Internationalization Properties in Lightning Web Component Salesforce | Currency, Language, Timezone, Locale

In this blog I will show you how you can Internationalize your Lightning Web Component using Internationalization Properties.

If you are using a single currency org then Salesforce Admin can set default currency, locale and time zone and user may also set their own currency, locale and time zone from their personal settings page.

But if you have multi-currency enabled in your org then the base Lightning Web Component will only adapt org's default currency, locale and time zone. For example if your org currency and user's currency is different then the LWC will adapt the org currency by default.

To make components Internationalize you can use Internationalization Properties in Salesforce as shown below-

1	import internationalizationPropertyName from @salesforce/i18n/internationalizationProperty

Note : The Property values will be returned for current user.

Example 1 - Internationalize Locale Date

HTML

<template>
  <lightning-card
    title="Internationalization Date in LWC"
    icon-name="utility:date_input"
  >
    <div class="slds-var-p-around_small">
      <b>
        Date : {date}
        <br />
        Formatted Date : {formattedDate}
      </b>
      <br />
      <br />
      <lightning-button
        label="Get Formatted Date"
        onclick={handleFormattedDate}
      >
      </lightning-button>
    </div>
  </lightning-card>
</template>

import { LightningElement } from "lwc";
import LOCALE from "@salesforce/i18n/locale";

export default class Internationalization extends LightningElement {
  date = new Date(2022, 6, 25);
  formattedDate;

  handleFormattedDate() {
    this.formattedDate = new Intl.DateTimeFormat(LOCALE).format(this.date);
  }
}

Example 2 - Internationalize Currency

HTML

<template>
  <lightning-card
    title="Internationalization Currency in LWC"
    icon-name="utility:currency"
  >
    <div class="slds-var-p-around_small">
      <b>
        Number : {number}
        <br />
        Formatted Currency : {formattedCurrency}
      </b>
      <br />
      <br />
      <lightning-button
        label="Get Formatted Currency"
        onclick={handleFormattedCurrency}
      ></lightning-button>
    </div>
  </lightning-card>
</template>

import { LightningElement } from "lwc";
import LOCALE from "@salesforce/i18n/locale";
import CURRENCY from "@salesforce/i18n/currency";

export default class InternationalizationCurrency extends LightningElement {
  number = 10050.5;
  formattedCurrency;

  handleFormattedCurrency() {
    this.formattedCurrency = new Intl.NumberFormat(LOCALE, {
      style: "currency",
      currency: CURRENCY,
      currencyDisplay: "symbol"
    }).format(this.number);
  }
}

Example 3 - Internationalize Time Zone

HTML

<template>
  <lightning-card
    title="Internationalization Timezone"
    icon-name="utility:currency"
  >
    <div class="slds-var-p-around_small">
      <b> TimeZone : {timeZone} </b>
      <br />
      <br />
      <lightning-button
        label="Get Timezone"
        onclick={handleTimeZone}
      ></lightning-button>
    </div>
  </lightning-card>
</template>

import { LightningElement } from "lwc";
import TIMEZONE from "@salesforce/i18n/timeZone";

export default class InternationalizationFirstDayOfWeek extends LightningElement {
  timeZone;
  handleTimeZone() {
    this.timeZone = TIMEZONE;
  }
}

Official Documentation : https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_i18n

Output