Interpolating data in Form.io
Data can be included in Form.io forms in multiple ways. One of the more common ways is to interpolate variables in field descriptions and HTML type fields.
How to interpolate data
By adding expressions to any text field in the form configuration, it is possible to use variables in that text. The example below shows how the name stored in the case document can be used in a HTML field in a form. This is used to display the name as part of a message.
First, when configuring the field an expression is used that will combine the data. More information on the syntax can be found below in the section Available syntaxes.
![](https://docs.valtimo.nl/~gitbook/image?url=https%3A%2F%2F181910120-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG21VIGcgPc1cyGRZY5CR%252Fuploads%252Fgit-blob-8e804d85d8cbabf57842812bd4368a247dbb4f47%252Fsetting-up-html-field.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=f7389d75&sv=1)
Only data that Form.io has access to at runtime can be used in the expression. This means that any data from the case document that needs to be displayed, first needs to be made available to Form.io. This can be done by for example adding a hidden field in the same form that the data will be prefilled in.
![](https://docs.valtimo.nl/~gitbook/image?url=https%3A%2F%2F181910120-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG21VIGcgPc1cyGRZY5CR%252Fuploads%252Fgit-blob-53e55f68c77a5dbb358932f69f3f690ff462d4b0%252Fadd-hidden-field-for-prefilling.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=5f128a88&sv=1)
This results in the following form:
![](https://docs.valtimo.nl/~gitbook/image?url=https%3A%2F%2F181910120-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG21VIGcgPc1cyGRZY5CR%252Fuploads%252Fgit-blob-0ee6afcbbabef7272bdd8454d38a43696d456530%252Fcreate-case-with-prefill-information.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=885b0145&sv=1)
When creating a case with the required information that will be stored.
![](https://docs.valtimo.nl/~gitbook/image?url=https%3A%2F%2F181910120-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG21VIGcgPc1cyGRZY5CR%252Fuploads%252Fgit-blob-d749b18ca5d9f6c7e7200efdf41991b6d2788471%252Fadd-case-data.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=e1cf6ded&sv=1)
This data is used in the form to display the name in the message.
![](https://docs.valtimo.nl/~gitbook/image?url=https%3A%2F%2F181910120-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG21VIGcgPc1cyGRZY5CR%252Fuploads%252Fgit-blob-325841f520165a1d4cbfe35f6fc27f4b9cb45e79%252Finterpolated-data-example.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=2cd18d6c&sv=1)
This same feature can be used in other text fields. For example, the label of a field can also be dynamically changed.
![](https://docs.valtimo.nl/~gitbook/image?url=https%3A%2F%2F181910120-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG21VIGcgPc1cyGRZY5CR%252Fuploads%252Fgit-blob-81bbe38abe21437445b03b760c21141775648e33%252Finterpolate-label-configuration.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=d9876d07&sv=1)
Which results in the following field.
![](https://docs.valtimo.nl/~gitbook/image?url=https%3A%2F%2F181910120-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG21VIGcgPc1cyGRZY5CR%252Fuploads%252Fgit-blob-688414f02cecb8955b4beb3a383b8ef214fe4825%252Finterpolate-label-example.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=34cccbf4&sv=1)
Available syntaxes
There are two different syntaxes for interpolating data in Form.io forms:
{{{ expression }}}
for interpolation and escaping{{ expression }}
for only interpolation
Because the data that is interpolated in the form can come from the user, it is important to escape the data to prevent it from being interpreted as HTML. This can be done by using the {{{ expression }}}
syntax.
For example if a user were to enter the following text in a form fields.
![](https://docs.valtimo.nl/~gitbook/image?url=https%3A%2F%2F181910120-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG21VIGcgPc1cyGRZY5CR%252Fuploads%252Fgit-blob-83e5d96e4faee2a8c83451e45968c089f4130418%252Finput-with-html.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=853f77ed&sv=1)
This would result in the following text being displayed in the form when using the {{ expression }}
syntax
![](https://docs.valtimo.nl/~gitbook/image?url=https%3A%2F%2F181910120-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG21VIGcgPc1cyGRZY5CR%252Fuploads%252Fgit-blob-25c74dfa82a1401995f9f3744f560eefdced88bf%252Fexample-escaped-data.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=6e74caa6&sv=1)
When using the {{ expression }}
syntax, the data is not escaped. This means that the data is interpreted as HTML as shown below.
![](https://docs.valtimo.nl/~gitbook/image?url=https%3A%2F%2F181910120-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG21VIGcgPc1cyGRZY5CR%252Fuploads%252Fgit-blob-ec7d1209f477a3d279bf800d5e27dea46f6e977e%252Fexample-interpolated-data.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=70516df9&sv=1)
It is recommended to always use the {{{ expression }}}
syntax to prevent any issues with the data being displayed, unless it is intended to use HTML in the form and the data is trusted.
Sometimes it is useful to use html as part of the expression itself. The example below can be used to display a list of names in a form. It uses an unordered list for clarity. The actual value is escaped using the _.escape
function from lodash. The way the data need to be escaped can be different depending on the data that is used, and the context in which it is displayed. Please always think about the security implications when displaying data in a form.
Last updated