Creating a Multilingual Community
You must have gone through our previous blog for setting up a multilingual community. If not, here is a link: https://www.v2force.com/build-multilingual-community/
As a summary of the above blog, the Salesforce community provides the capability to have a multilingual community to improvise and customize your community’s login experience – the experience that external users embark on when they log in to your site.
Based on the user language preference community will be translated. Custom labels will be used inside the community for translations concerning User language preference.
“Creating a multilingual community is a multistep process. It involves defining the languages you want your community to support, adding translated content for each language, and letting your community visitors choose their preferred language.”
But what about the Login Page?
Most of the customers with the multilingual enabled community will also expect a login standard form to be translated. As we won’t be having control over the code of standard login form, custom labels will be of no use for translation. So, we get a magical option for translation of the standard login form, using Language translation in community builder.
To get to translation in the builder, follow this path:
Settings – > Language -> Export Language.
On click of Export language, an XML file will be downloaded in the browser on which we must play around for login form’s translation. Since we are considering the community to be multilingual, we can download multiple XML files based on multiple languages.
Sample downloaded XML:
<?xml version="1.0" encoding="utf-8"?> <languagedata exporttimestamp="1568996554637" version="1.0"> </languagedata>
How to Specify Translation?
Let’s look into a major part of specifying translation for the login page. Considering we are having another language as French let’s see how we translate the login page to French.
Step 1: Navigate to the login page and inspect the Id of the login form and fetch the Id of the component as shown in the image below.
Update the language.xml file to have French translation specified against Username, Password and login button Labels as specified below. We have specified French translation for each label.
<?xml version="1.0" encoding="utf-8"?> <languagedata exporttimestamp="1572950438876" version="1.0"> <component context="Login Form (Aura)" id="6dfe00cd-de43-4da0-9a2c-5e50de4c400f"> <field name="AuraAttributes" language="fr" exportcrc="3662060251"> <property name="usernameLabel"><![CDATA[Courriel]]></property> <property name="loginButtonLabel"><![CDATA[Ouvrir une session]]></property> <property name="passwordLabel"><![CDATA[Mot de passe]]></property </field> </component> </languagedata>
Navigate to builder language setting i.e., Settings – > Language -> Import content – > Upload the langauge.xml filed updated in step 2.
Navigate to the builder’s login page (Standard page) and drag ‘Language Selector’ standard component to the bottom of the page. This component will allow the user to change the language of the page as required.
Publish the changes to reflect in the login page.
Now navigate to the login page and select the language to see the magic.
Login page when language is English
Login page when Language is French