Formatting

import { Format } from 'cx/util';

Cx offers rich support for value formatting.

You may use Format.value(value, format) function to format single values.

Formats are supported in data expressions and string templates.

Value

Max two decimals	Compact (1M, 1k)
3.14	3.1416
Currency (default)	Currency USD, two decimals
$3.14159	$3.14
Currency EUR, no decimals	Accounting format
€3	+$3.14
Percentage	Percentage sign
314.16%	3.14%

Date of Birth

MM/dd/yyyy format (default)	M/d/yy format
02/06/2026	2/6/26
Short day name, M/d/yyyy	Full day name, MMM dd, yyyy
Fri, 2/6/2026	Friday, Feb 06, 2026
Full day name, MMMM dd, yyyy
Friday, February 06, 2026

Enter your name

Hi John. Nice to meet you!

Enter your height in cm

Your height is 180 cm.

Controller Widgets

<div>
    <LabelsTopLayout columns={2}>
        <NumberField value-bind="$page.value" label="Value" />
        <div />
        <LabeledContainer label="Max two decimals">
            <div text-tpl="{$page.value:n;0;2}" />
        </LabeledContainer>
        <LabeledContainer label="Compact (1M, 1k)">
            <div text-tpl="{$page.value:n;0;4;c}" />
        </LabeledContainer>
        <LabeledContainer label="Currency (default)">
            <div text-tpl="{$page.value:currency}" />
        </LabeledContainer>
        <LabeledContainer label="Currency USD, two decimals">
            <div text-tpl="{$page.value:currency;USD;2}" />
        </LabeledContainer>
        <LabeledContainer label="Currency EUR, no decimals">
            <div text-tpl="{$page.value:currency;EUR;0}" />
        </LabeledContainer>
        <LabeledContainer label="Accounting format">
            <div text-tpl="{$page.value:currency;USD;1;2;+ac}" />
        </LabeledContainer>
        <LabeledContainer label="Percentage">
            <div text-tpl="{$page.value:p;0;2;}" />
        </LabeledContainer>
        <LabeledContainer label="Percentage sign">
            <div text-tpl="{$page.value:ps;0;2;}" />
        </LabeledContainer>
    </LabelsTopLayout>
    <hr />
    <LabelsTopLayout columns={2}>
        <DateField value-bind="$page.person.dateOfBirth" label="Date of Birth" />
        <div />
        <LabeledContainer label="MM/dd/yyyy format (default)">
            <div text-tpl="{$page.person.dateOfBirth:d}" />
        </LabeledContainer>
        <LabeledContainer label="M/d/yy format">
            <div text-tpl="{$page.person.dateOfBirth:d;yyMd}" />
        </LabeledContainer>
        <LabeledContainer label="Short day name, M/d/yyyy">
            <div text-tpl="{$page.person.dateOfBirth:d;DDDyyyyMd}" />
        </LabeledContainer>
        <LabeledContainer label="Full day name, MMM dd, yyyy">
            <div text-tpl="{$page.person.dateOfBirth:d;DDDDyyyyMMMdd}" />
        </LabeledContainer>
        <LabeledContainer label="Full day name, MMMM dd, yyyy">
            <div text-tpl="{$page.person.dateOfBirth:d;DDDDyyyyMMMMdd}" />
        </LabeledContainer>
    </LabelsTopLayout>
    <hr />
    <LabelsTopLayout columns={2} style="margin-top: -10px">
        <LabelsTopLayout columns={1}>
            <TextField value-bind="$page.person.name" label="Enter your name" maxLength={20} />
            <div text-tpl='{[fmt({$page.person.name}, "prefix;Hi :suffix;. Nice to meet you!")]}' />
        </LabelsTopLayout>
        <LabelsTopLayout columns={1}>
            <NumberField value-bind="$page.person.height" label="Enter your height in cm" />
            <div text-tpl="Your height is {$page.person.height:suffix; cm.|N/A.}" />
        </LabelsTopLayout>
    </LabelsTopLayout>
</div>

Copied!Cx Fiddle

Formatting Rules

Use ; to delimit format parameters.

Use : to use chain multiple formats. Formats are applied from left to right.

Use | to provide null text. Default null text is empty string.

Format Specifiers

Specifier	Description
currency	Currency formatting. Formatting is done using the `Intl.NumberFormat` class provided by the browser. It's required to use a polyfill if your browser doesn't support `Intl` (e.g. older versions of Safari). `currency;currencyCode;decimalPrecision` `currency;currencyCode;minPrecision;maxPrecision` `currency;currencyCode;minPrecision;maxPrecision;+` Displays a plus sign for positive numbers. `currency;currencyCode;minPrecision;maxPrecision;a` Accounting format. `currency;currencyCode;minPrecision;maxPrecision;c` Used for compact number formatting, e.g. 105000 will be formatted as 105K. `currency;currencyCode;minPrecision;maxPrecision;+ac` Combines previous formats.
date d	Short date format.
lowercase	Converts text to the lower case.
number n	Number formatting. `n;decimalPrecision` `n;minPrecision;maxPrecision` `n;minPrecision;maxPrecision;+` Displays a plus sign for positive numbers. `n;minPrecision;maxPrecision;c` Used for compact number formatting, e.g. 105000 will be formatted as 105K. `n;minPrecision;maxPrecision;+c` Combines previous formats.
percentage p	Percentage. Please note that the given number will be multiplied with 100.
string s	Default format. Convert any value to string using the `toString()` method.
time t	Time of the day formatting.
uppercase	Converts text to the upper case.
datetime	Options are used for custom date formatting. `datetime;options` Please check out the intl-io project for more info.
ellipsis	Shortens long texts. `ellipsis;maxLength;position` `position` defines ellipsis position and can be either `start`, `end` or `middle`. Default position is `end`.
percentSign ps	Percentage sign. Only percentage sign will be appended to the give number.
prefix	Prefixes the given value with the provided text. `prefix;text`
suffix	Appends the provided text to the given value. `suffix;text`
urlencode	Encodes the given value using the `encodeURIComponent` function. Useful in URL templates.
wrap	Wraps the given value with into the provided prefix and suffix strings. `wrap;prefix;suffix`

Culture Sensitive Formatting

import { enableCultureSensitiveFormatting } from 'cx/ui';

Date, currency and number formats are dependent on an external library and must be enabled before use. This is slightly inconvenient but ensures small bundle sizes for applications that do not use this feature.

enableCultureSensitiveFormatting();

Custom Formats

Custom formats may be defined using Format.register and Format.registerFactory methods.

Format.register can be used to register formats which do not need any parameters.

Format.register('brackets', value => `(${value})`);
Format.value('test', 'brackets'); //'(test)'

Format.registerFactory can be used to define formats which take parameters.

Format.registerFactory('suffix', (format, suffix) => value => value.toString() + suffix);
Format.value(10, 'suffix; kg'); //'10 kg'

Documentation

Formatting