Skip to main content

Data interpolation

In any text shown in the form we can add values coming from the data of the form. In order to do that we can use the {{}} syntax. The value inside the brackets will be replaced by the value of the property in the data. The value can be a simple property or a nested property. If the property does not exists, the value will be replaced by an empty string.

{
"text": {
"type": "text",
"text": "This is a text with a value from the data : {{value_from_data}}"
}
}

The data that is added to the form can be a simple object or a nested object. The value can be a simple property or a nested property.

{
"text": {
"type": "text",
"text": "This is a text with a nested value from the data : {{nested.value_from_data}}"
}
}

Format

We also can format the data that will be added in the text. In order to do this, we can add :[format] at the end of the path to the data. The format can be either date or price.

{
"text": {
"type": "text",
"text": "This is a text with a formatted value from the data : {{value_from_data:date}}"
}
}

Custom format

We also can define some custom formats with :format[], for example :

{{rate:format[.XXX]}} will only display 3 digits after the commas. The value 0.123456 will be shown as 0.123. In .XXX the X represents a digit, so if we need to show only 2 digits after the comas, the format will be {{rate:format[.XX]}}.

{{phone_number:format[+32 XXXX XX XX XX]}} will display the value 0471234567 in the format +32 0471 23 45 67

Anywhere

Keep in mind that it can be in any text, and also the data interpolation should be done inside the result of a Translation key

Storybook example

Data Interpolation#

Data Interpolation In Table#