Skip to main content

Formatting

There are several formatting options that can be applied to the value of a field. We can use the format property to a text type to format the value shown.

Available formats​

FormatDescriptionExample
dateDisplay the value as a date14/01/2024
date[DD/MM]Display the value as a date and month14/01
priceDisplay the value as a price1 000,00 €
rawDisplay the value as is100
kw_powerDisplay the value as a power in kW with autmatic conversion to HP100 kW / 134 CV
numberDisplay the value as a number100
number[*]Display the value as a number with the same precision as the value"100.123456" -> 100.123456
[.XXX]Display the value formated as described in the []0.123
[+32 XXXX XX XX XX]Display the value as a phone number in the format +32 XXXX XX XX XX+32 0471 23 45 67
[.XX]Display the value with 2 digits after the comma0.12
[* %]Adds a % symbol at the end of the value100 %
percentageDisplay the value as a percentage100 %
permilleDisplay the value as a permille100 ‰
liquidDisplay the value as a liquid templateHello {{ name }}
info

The format only applies on the visual representation of the value, the value itself is not changed, it is still the same value.

The format based on X characters will replace the X characters by the value. For example, if the value is 123456, the format [XXX XX XX] will display 123 45 6. So that means that the X represents a character, you have to know the amount of X characters you need to display the value.

Number format​

By default, the number format will only show an integer number. If you want to show the value with the same precision as the value, you can use the format number[*]. Or you can use the format number[.XXX] to show the value with the precision you want. For example, if the value is 100.123456, the format number[.XX] will display 100.12.

Date format​

For dates, you can also pass a specific format to the date format. For example, if you want to display the date as a date and month, you can use the format [DD/MM]. All the formats available for dates are definied in moment.js.

{
  "text": {
    "type": "text",
    "text": "14/01/2024",
    "format": "date[DD/MM]"
  }
  "date_in_interpolation": {
    "type": "message",
    "color": "info",
    "message": "Show only year of date {{date:date[YYYY]}}"
  }
}

Wild card characters​

The wild card characters are the characters that are replaced by the value. For example, if the value is 98, the format [* %] will display 98 %. The * represents a wildcard character, it will be replaced by the value.

{
  "text": {
    "type": "text",
    "text": "98",
    "format": "[* %]"
  }
}

Will display 98 %.

Percentage format​

The percentage format will display the value as a percentage. The value is not changed, it is still the same value but it will be displayed with a trailing % symbol.

Permille format​

The permille format will display the value as a permille. The value is not changed, it is still the same value but it will be displayed with a trailing ‰ symbol.

Liquid format​

The liquid format is used when we want to render a liquid template. For more information, see the Liquid templating documentation.

tip

The liquid format is mainly useful when you want to format or render a complex html content like table, list based on the data of the form. It allows the user to not explicitly write the html content, but only the data that will be used to render the content.

Transform​

We can also transform the value before it is displayed. This is useful when we want to display the value in a specific way, for example in uppercase or lowercase. To use a transform, we can set the transform property to the value we want to transform.

info

The transform applies on the value itself, it is not only a visual representation. So if we use a transform, the value will be changed in the data.

{
  "text": {
    "type": "text",
    "text": "John Doe",
    "transform": "lowercase"
  }
}

Available transforms​

TransformDescriptionExample
lowercaseConvert the value to lowercaseJohn Doe
uppercaseConvert the value to uppercaseJOHN DOE

Storybook example​

Format Shown Value#

Inline Format#

Format Attribute#

Liquid Template#

Big HTML Liquid Template#