Salesforce Live: #LightningPageTranslation

In this blog i am going to explain about "How to traslate lightning component into multiple languages like visualforce.I have a drop-down with list of all salesforce supported languages and when I select any language Ineed to render the complete lightning component lables/Buttons/Heading etc. in that specific language."

Steps to be followed:

Create the JavaScript Library

In the Developer Console, click File > New > Static Resource.
Enter counter in the Name field.
Select text/javascript in the MIME Type field and click submit.
Copy paste the below code(change the translations according to your requirement).

Javascript Library Code Snippet :

window.__langTranslations = (function() {

return {

JSONString : function(){

return {

"languages": {

"English": "en_US",

"Japanese": "ja",

"Chinese_Simplified": "zh_CN",

"Chinese_Traditional": "zh_TW",

"Danish": "da",

"Dutch": "nl_NL",

"Finnish": "fi",

"French": "fr",

"German": "de",

"Italian": "it",

"Korean": "ko",

"Norwegian": "no",

"Portuguese_Brazil": "pt_BR",

"Russian": "ru",

"Spanish": "es",

"Spanish_Mexico": "es_MX",

"Swedish": "sv",

"Thai": "th"

"btns": {

"Save_btn": "Save",

"Submit_btn": "Submit",

"Create_btn": "Create",

"Login_btn": "Login",

"Register_btn": "Register",

"Go_btn": "Go",

"Process_btn": "Process",

"Cancel_btn": "Cancel",

"Download_btn": "Download",

"Next_btn": "Next",

"Previous_btn": "Previous",

"First_btn": "First",

"Last_btn": "Last",

"Click_btn": "Click"

}

};

Tranaslations : function(lang){

console.log("lang value ::"+lang);

return {

"translations": {

"en_US": {

"User_Name": "User Name",

"Passowrd": "Password",

"save_Button" : "Save"

"ja": {

"User_Name": "ユーザー名",

"Passowrd": "パスワード",

"save_Button" : "保存"

"zh_CN": {

"User_Name": "用户名",

"Passowrd": "密码",

"save_Button" : "保存"

"zh_TW": {

"User_Name": "用戶名",

"Passowrd": "密碼",

"save_Button" : "保存"

"da": {

"User_Name": "Brugernavn",

"Passowrd": "adgangskode",

"save_Button" : "Gem"

"nl_NL": {

"User_Name": "Gebruikersnaam",

"Passowrd": "wachtwoord",

"save_Button" : "Save"

"fi": {

"User_Name": "Käyttäjätunnus",

"Passowrd": "salasana",

"save_Button" : "Tallenna"

"fr": {

"User_Name": "Nom d'utilisateur",

"Passowrd": "Mot de passe",

"save_Button" : "Enregistrer"

"de": {

"User_Name": "Nutzername",

"Passowrd": "Passwort",

"save_Button" : "Speichern"

"it": {

"User_Name": "Nome utente",

"Passowrd": "Parola d'ordine",

"save_Button" : "Salva"

"ko": {

"User_Name": "사용자 이름",

"Passowrd": "암호",

"save_Button" : "저장"

"no": {

"User_Name": "Brukernavn",

"Passowrd": "Passord",

"save_Button" : "Lagre"

"pt_BR": {

"User_Name": "Nome de Usuário",

"Passowrd": "Senha",

"save_Button" : "Guardar"

"ru": {

"User_Name": "Имя пользователя",

"Passowrd": "пароль",

"save_Button" : "Сохранить"

"es": {

"User_Name": "Nombre de usuario",

"Passowrd": "Contraseña",

"save_Button" : "Сохранить"

"es_MX": {

"User_Name": "Nombre de usuario",

"Passowrd": "Contraseña",

"save_Button" : "Salvar"

"sv": {

"User_Name": "Användarnamn",

"Passowrd": "Lösenord",

"save_Button" : "Spara"

"th": {

"User_Name": "ชื่อผู้ใช้",

"Passowrd": "รหัสผ่าน",

"save_Button" : "บันทึก"

}

};

}());

Lightning Component : TranslatorPage.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<ltng:require scripts="{!$Resource.LightningLoad}"
afterScriptsLoaded="{!c.JSONString}"/>
<aura:attribute name="languageOptions" type="String[]"/>
<aura:attribute name="langProperty" type="object"/>
<aura:attribute name="lang" type="String" default="en_US"/>
<aura:attribute type="Boolean" name="showLoader" default="false"/>
<aura:attribute name="User_Name" type="String" default="User Name"/>
<aura:attribute name="Password" type="String" default="Password"/>
<aura:attribute name="save_Button" type="String" default="Save"/>
<lightning:card>
<div class="c-container">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12">
<lightning:layout>
<lightning:layoutItem padding="around-small" size="6">
<div class="page-section page-right">
<ol class="slds-setup-assistant">
<li class="slds-setup-assistant__item">
<article class="slds-setup-assistant__step">
<div class="slds-setup-assistant__step-summary">
<div class="number percentage">
<div class="slds-media__figure">
<div class="slds-progress-ring slds-progress-ring_large">
<div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">

</div>
<div class="slds-progress-ring__content">1</div>
</div>
</div>
<div class="slds-media__body slds-m-top_x-small">
<div class="slds-media">
<div class="slds-setup-assistant__step-summary-content slds-media__body">
<h3 class="slds-setup-assistant__step-summary-title slds-text-heading_small">Lightning Component Label Translations</h3>
<p>Here I am going to explain about "How to traslate lightning component into multiple languages like visualforce.I have a drop-down with list of all salesforce supported languages and when I select any language Ineed to render the complete lightning component lables/Buttons/Heading etc. in that specific language."</p>
</div>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="slds-setup-assistant__item">
<article class="slds-setup-assistant__step">
<div class="slds-setup-assistant__step-summary">
<div class="number percentage">
<div class="slds-media__body slds-m-top_x-small">
<div class="slds-media">
<div class="slds-setup-assistant__step-summary-content slds-media__body">
<li class="slds-setup-assistant__item">
<article class="slds-setup-assistant__step">
<div class="slds-summary-detail slds-is-open">
<div class="slds-container_fluid">
<div aria-hidden="false" class="slds-summary-detail__content" id="step-1-summary-action">
<div class="slds-setup-assistant__step-detail">
<div class="slds-progress slds-progress_vertical slds-progress_success">
<ol class="slds-progress__list slds-progress__list-bordered">
<li class="slds-progress__item slds-is-active">
<div class="slds-progress__marker">
<span class="slds-assistive-text">Active</span>
</div>
<div class="slds-progress__item_content slds-grid slds-grid_align-spread">
<div class="slds-size_3-of-4">Create the JavaScript Library</div>
</div>
</li>
<li class="slds-progress__item slds-is-active">
<div class="slds-progress__marker">
<span class="slds-assistive-text">Active</span>
</div>
<div class="slds-progress__item_content slds-grid slds-grid_align-spread">
<div class="slds-size_3-of-4">In the Developer Console, click File > New > Static Resource.</div>
</div>
</li>
<li class="slds-progress__item slds-is-active">
<div class="slds-progress__marker">
<span class="slds-assistive-text">Active</span>
</div>
<div class="slds-progress__item_content slds-grid slds-grid_align-spread">
<div class="slds-size_3-of-4">Select text/javascript in the MIME Type field and click submit.</div>
</div>
</li>
<li class="slds-progress__item slds-is-active">
<div class="slds-progress__marker">
<span class="slds-assistive-text">Active</span>
</div>
<div class="slds-progress__item_content slds-grid slds-grid_align-spread">
<div class="slds-size_3-of-4">Copy paste the below code(change the translations according to your requirement).</div>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</article>
</li>
</div>
</div>
</div>
</div>
</div>
</article>
</li>
</ol>
</div>
</lightning:layoutItem>

<lightning:layoutItem padding="around-small" size="4">
<div class="page-section page-main">
<lightning:input class="boldcss" aura:id="field" label="{!v.User_Name}" name="userName" required="true" />
<lightning:input class="boldcss" aura:id="field" label="{!v.Password}" name="password" required="true" />

<br/>
<lightning:button label="{!v.save_Button}" onclick="{!c.JSONString}"/>
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="2">
<div class="page-section page-right">
<lightning:select aura:id="languageTranslation" value="{!v.lang}" onchange="{!c.handleCompanyOnChange}" name="industryPicklist" label="Language" required="true">
<option value="">--None--</option>
<aura:iteration items="{!v.languageOptions}" var="ind" indexVar="key">
<option text="{!ind.key}" value="{!ind.value}" selected="{!ind.key==v.lang}" />
</aura:iteration>
</lightning:select>
</div>
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
</lightning:layout>
</div>
</lightning:card>
</aura:component>

JS Controller: TranslatorPage.js

({

JSONString : function(component, event, helper) {

component.set("v.showLoader",true);

var jsonLanguages = __langTranslations.JSONString().languages;

var jsonLanguagesArray = [];

for(var key in jsonLanguages){

jsonLanguagesArray.push({key: key, value: jsonLanguages[key]});

}

component.set("v.languageOptions",jsonLanguagesArray);

//console.log(__langTranslations.Tranaslations("en_US"));

component.set("v.langProperty",__langTranslations.JSONString());

console.log(__langTranslations.JSONString())

component.set("v.showLoader",false);

throwError : function(component, event){

component.set("v.showLoader",true);

alert("faz hello");

throw new Error("I can’t go on. This is the end.");

component.set("v.showLoader",false);

throwErrorForKicks: function(cmp) {

component.set("v.showLoader",true);

var hasPerm = false;

try {

if (!hasPerm) {

throw new Error("You don't have permission to edit this record.");

}

catch (e) {

$A.createComponents([

["ui:message",{

"title" : "Sample Thrown Error",

"severity" : "error",

}],

["ui:outputText",{"value" : e.message

}]

],function(components, status, errorMessage){

if (status === "SUCCESS") {

var message = components[0];

var outputText = components[1];

message.set("v.body", outputText);

var div1 = cmp.find("div1");

div1.set("v.body", message);

}else if (status === "INCOMPLETE") {

console.log("No response from server or client is offline.")

}else if (status === "ERROR") {

console.log("Error: " + errorMessage);

}

});

component.set("v.showLoader",false);

}

component.set("v.showLoader",false);

//handle Industry Picklist Selection

handleCompanyOnChange : function(component, event, helper) {

component.set("v.showLoader",true);

var lang = component.get("v.lang");

var transKey = lang;

var jsonLanguagesArray = [];

component.set("v.User_Name",__langTranslations.Tranaslations(lang).translations.User_Name ? __langTranslations.Tranaslations(lang).translations.User_Name : "User Name");

component.set("v.Password",__langTranslations.Tranaslations(lang).translations.Passowrd ? __langTranslations.Tranaslations(lang).translations.Passowrd : "Password");

component.set("v.save_Button",__langTranslations.Tranaslations(lang).translations.save_Button ? __langTranslations.Tranaslations(lang).translations.save_Button : "Save");

for(var key in __langTranslations.Tranaslations(lang).translations){

//console.log(key+"--"+(key === transKey));

if(key === transKey){

for(var i in __langTranslations.Tranaslations(lang).translations[key]){

if(i === "User_Name"){

component.set("v.User_Name",__langTranslations.Tranaslations(lang).translations[key][i]);

}else if(i === "Passowrd"){

component.set("v.Password",__langTranslations.Tranaslations(lang).translations[key][i]);

}else{

component.set("v.save_Button",__langTranslations.Tranaslations(lang).translations[key][i]);

}

jsonLanguagesArray.push({i: i, value: __langTranslations.Tranaslations(lang).translations[key][i]});

component.set("v.showLoader",false);

}

console.log(jsonLanguagesArray);

}

});

CSS :

.THIS .page-section {
border: solid 1px #ccc;
padding: 1rem;
}
.THIS .page-header,
.THIS .page-footer {
height: 50px;
}
.THIS .slds-form-element__label{
font-weight: bold;
}
.THIS .slds-button {
font-weight: bold;
}

Screenshot :

Salesforce Live

Custom Labels in Lightning Component for different languages

Featured

What is Cryptography in salesforce and what are all the algorithms provided by them ?

Popular

Translate