Localizing Content in Salesforce Lightning

Localizing plays important role when you enable multiple languages, currency and uses different date formats in salesforce.

Below are different options which you can use to localize your contents in Lightning.

• Using Custom Label which can be translated into multiple languages.
• Format number and date using <lightning:formattedDateTime> and <lightning:formattedNumber> components.
• Using $Locale environment variable along with lightning localization service to format number and date formats in string expressions.

Using Custom Labels

As we know that custom labels can be translated in any language supported by salesforce. Custom label helps in displaying message to users in different languages. Remember, labels can contain only 1000 characters.

In order to use custom labels for multiple languages, you have to enable translation workbench. After this you can different translation text for labels.

Using labels in markup

You can access labels in lightning mark up by using below syntax:
{!$Label.namespace.labelName}

You can use "c" as namespace if your org uses default namespace.

Using labels in javascript function

You can use labels in controller/helper function by using the $A.get() function as mentioned below:

$A.get("$Label.namespace.labelName");

Formating Date, Time and Numbers

Localizing Dates in Markup

In <ui:outputDateTime>, you can specify the langLocale attribute and format to display datatime in required format. Below is an example:

<ui:outputDateTime value="2017-02-10T00:17:10:10.00Z" langLocale="us" format="M-d-y"/>

This will return "2-10-2017"

<ui:outputDateTime value="2017-02-10T00:17:10:10.00Z" langLocale="us" />

This will return "Feb 10, 2017 5:10:10 PM"

Using javascript to localize the dates

you can use localization service to format datetime values. Below is sample code:

var localDateFormat = $A.get("$Locale.dateFormat");
var userLocalLang = $A.get("Locale.langLocale");
var actualDtae = $A.localizationService.formatDateTime(new date(),localDateFormat);
//Now format datetime value
var requiredformat = "MMMM d, yyyy";
var formattedDate = $A.localizationService.formatDate(
actualDtae, 
requiredformat,
userLocalLang
);  
//Now you use formattedDate to set value in controller

Localizing Numbers in Markup

<ui:outputNumber> automatically reads user's SFDC locale setting on user detail page and formats number automatically.

For example:
<ui:outputNumber value="100002"/>

Output (if locale in user details page is English(United States))= 100,002
Output (if locale in user details page is German(Germany))= 100.002

You can also use format attribute to format numbers. Below is example:

<ui:outputNumber value="100002" format="0,000.00"/>
output will be = 100.002,00

Using javascript to localize the numbers

You can use different functions of localizationService to format numbers. Below are few exmaples:

$A.localizationSerevice.formatCurrency(100.10);
//dispaly output as $100.10

$A.localizationSerevice.formatNumber(1000.10,'0,000.00');
//dispaly output as 1,000.10

$A.localizationSerevice.formatPercent(.56);
//dispaly output as 56%

Using Locale Global Variable

$Locale global variable return information about user's locale. Below are few example:

{!locale.language}   

//returns language  code like "en', "fr" etc

{!locale.timezone}

//return time zone Id like America/New_York

{!locale.langLocale}

//return users locale id like "en_US", "en_GB" etc

In javascript, you can access this global variable by using $A.get() methods. Below is example to get user language:

var localelang= $A.get("$Locale.language");

//this will return language code like "en', "fr" etc

Hope this will help!!

More Blogs>>: 

DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
FETCHING FILE FROM EXTERNAL/PUBLIC URL AND STORING IT IN SALESFORCE