Skip to main content

flw.numberFormat Expression

Outdated documentation page

This is an old version of the documentation for Flowable until version 3.13 and for the Angular-based Flowable Design 3.14/3.15. If you are running the latest version of Flowable please check out the current version of this page.

v3.10.0+
numberFormat(value: number | string, ...params)

The numberFormat method formats a number according to the locale and formatting options passed, internally makes use of the Intl.NumberFormat API.

...params:

  • locale?: string | "auto"
  • style?: "currency" | "percent" | "decimal"
  • fractionDigits?: number (0-20)
  • currency?: string

Locale parameter​

Can be any locale code such as BCP-47 codes. For ex: es, en-US, it-CH

How does the auto parameter work?​

The auto parameter will pick the locale from the user navigator.

How does the precedence work?​

  • 1st: If auto locale passed will use the navigator locale and will forget about internal lang of the Form.
  • 2nd: If auto is not passed, will try to use the internal language of the form.
  • 3nd: If we pass another locale for ex: en-US will use that locale.

Style parameter​

  • currency: Any ISO 4127 currency codes, if a currency is provided automatically the value will be formatted giving the locale and the currency. For ex: EUR, CHF, USD
  • percent: A % percent symbol, and our value will be formatted to a percent value. (Caution here, when the value formats to percent is multiplied per cent).
  • decimal: is the default style, just formats the value as decimal.

Fraction digits parameter​

The fractionDigits parameter can include a number from 0 to 20, it's the minimum and maximum number of fraction digits to use.

Examples​

> flw.numberFormat(123456, "auto", undefined, undefined, undefined)
  // "123,456.789"
> flw.numberFormat(123456, "auto", undefined, "2", undefined)
  // "123,456.79"
> flw.numberFormat(123456, "auto", undefined, "4", undefined)
  // "123,456.7890"
> flw.numberFormat(123456, "es", undefined, "2", undefined)
  // "123.456,79"
> flw.numberFormat(123456, "fr", undefined, "2", undefined)
  // "123 456,79"
> flw.numberFormat(123456, "it-CH", undefined, "2", undefined)
  // "123’456.79"
> flw.numberFormat(123456, "es", "currency", undefined, "EUR")
  // "123.456,79 €"
> flw.numberFormat(123456, "fr", "currency", undefined, "EUR")
  // "123 456,79 €"
> flw.numberFormat(123456, "it-CH", "currency", undefined, "CHF")
  // "CHF 123’456.79"
> flw.numberFormat(123456, "en-GB", "currency", undefined, "GBP")
  // "£123,456.79"
> flw.numberFormat(123456, "en-US", "currency", undefined, "USD")
  // "$123,456.79"
> flw.numberFormat(123456, "en-US", "currency", "4", "USD")
  // "$123,456.7890"
> flw.numberFormat(1, "en-US", "percent", undefined, undefined)
  // "100%"
> flw.numberFormat(1, "es", "percent", undefined, undefined)
  // "100 %"
> flw.numberFormat(1, "en-US", "percent", "3", undefined)
  // "100.000%"
> flw.numberFormat(1, "es", "percent", "3", undefined)
  // "100,000 %