0

I use lightning-formatted-number to show Item Amount on my LWC.

And I have a multicurrency enabled in my org.

So I pass the currencyCode dynamically to lightning-formatted-number see:

<lightning-formatted-number 
    value={item.amount} 
    format-style="currency" 
    currency-code={item.currencyCode} 
    currency-display-as="symbol"
></lightning-formatted-number>

Where item.currencyCode is either GBP or USD.

So for GBP I see correct £ symbol,
However for the USD I am seeing US$ as currency-symbol.

Currency Configs:

  • Corporate Currency : British Pound
  • Activate Multiple Currencies - enabled
  • Advanced Currency Management is not enabled
  • Parenthetical Currency Conversion is enabled
  • User Currency: USD - U.S. Dollar

Active Currencies:

  • GBP - British Pound - Corporate
  • USD - U.S. Dollar

I couldn't find anything in the docs for lightning-formatted-number.

Here are similar question: lightning-formatted-number deosn’t show correct currency code for some users, however there is no answer

Do I miss something or it is corrected behavior ?

As I would want to show the $ as currency-symbol

2 Answers 2

1

It's the expected behavior. lightning-formatted-number component leveages Intl.NumberFormat(locale, options) to format numbers and the currency symbol depends upon locale attribute.
Since GBP is the corporate currency, I guess the default locale of the Salesforce org is English (United Kingdom), so en-GB, therefore you could try the following code that shows US$ as currency-symbol:

const optionsUSD = { style: 'currency', currency: 'USD', currencyDisplay: 'symbol' };
const optionsGBP = { style: 'currency', currency: 'GBP', currencyDisplay: 'symbol' };
const locale = 'en-GB';
const usdNumberFormatter = new Intl.NumberFormat(locale, optionsUSD);
const gbpNumberFormatter = new Intl.NumberFormat(locale, optionsGBP);
const number = 123456.78;
console.log(usdNumberFormatter.format(number)); // US$123,456.78
console.log(gbpNumberFormatter.format(number)); // £123,456.78

That component import the locale via import locale from '@salesforce/i18n/locale'; so you cannot force it.

If you want to show the $ as currency-symbol, you should build your own component that accept the same paramenters and the locale one.
If you need just a method it could be something like:

#formatters = {};

getCurrencyFormatter(currency) {
    let formatter = this.#formatters[currency];
    if (!formatter) {
        const locale = 'en-US';
        const options = { style: 'currency', currency, currencyDisplay: 'symbol' };
        formatter = new Intl.NumberFormat(locale, options);
        this.#formatters[currency] = formatter;
    }
    return formatter;
}

format(currency, value) {
    const formatter = getCurrencyFormatter(currency);
    return formatter.format(value);
}

Then calling format(item.currencyCode, item.amount) results in the desired output

1
  • Thanks, however it is too much work and we use it in a lot of places. Changing the User Locale helped. Jan 31 at 11:31
0

As it appeared changing User Locale to English (United States) fixed it.

Previous User locale: English (United Kingdom)
Updated User locale: English (United States)

To change it go: User Settings => My Personal Information => Language & Time Zone => Locale

enter image description here

See Edit Your Language and Locale Settings

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .