Valtimo documentation
  • Welcome to Valtimo
  • Fundamentals
    • â„šī¸What is Valtimo
    • đŸ™ī¸Architectural overview
      • Choosing the right setup
      • âš™ī¸Available modules
    • Process Exchange
      • Process blueprints
      • Building blocks
    • 📖How to use this documentation
    • đŸ–ąī¸Getting started
      • Configuring the database
      • Modules
        • Core modules
          • Audit
          • Authorization
          • Camunda
          • Case
          • Connector
          • Contract
          • Core
          • Dashboard
          • Document
          • Document generation
          • Exporter
          • Form
          • Form flow
          • Form flow Valtimo
          • Importer
          • Localization
          • Local document generation
          • Local mail
          • Mail
          • Mandrill
          • Milestones
          • Plugins
          • Outbox
            • Outbox RabbitMQ
          • Process document
          • Resource
          • Temporary resource storage
          • Test utils common
          • Value resolvers
          • Valtimo dependencies
          • Valtimo dependency versions
          • Web
            • CORS
        • GZAC modules
          • Besluit
          • Besluiten API
          • Catalogi API
          • Contactmoment
          • Documenten API
          • Haalcentraal BRP
          • Klant
          • Notificaties API
          • Notificaties API Authentication
          • Objecten API
          • Objecten API Authentication
          • Object management
          • Objects API
          • Objecttypen API
          • OpenZaak
          • OpenZaak Plugin Authentication
          • OpenZaak resource
          • Portaaltaak
          • SmartDocuments
          • Valtimo GZAC dependencies
          • Verzoek
          • Wordpress mail
          • Zaken API
      • Compatibility matrix
  • Features
    • 🔏Access control
      • Configurable elements
      • Configuring roles
      • Configuring permissions
      • Configuring conditions
      • Configuring context conditions
      • For developers
        • Front-end access control
        • Creating a resource
        • Creating a relation to another resource
        • Running custom code without access control
    • đŸ—ƒī¸Case
      • Configuration
      • Document definition
      • List
      • Notes
      • Processes
      • Search fields
      • Statuses
      • Tabs
      • Tags
      • Widgets
        • Fields widget
        • Custom component widget
        • Form.io widget
        • Table widget
        • Collection widget
      • For developers
        • Search fields API
        • Case list tab order
        • Custom case list columns
        • Custom case tabs
        • Case migration
        • Custom case headers
        • Register Angular component
    • 📊Dashboard
      • Widget data sources
      • Widget display types
      • For developers
        • Custom dashboards
        • Custom data sources
        • Custom display types
        • Widget translations
    • 📋Forms
      • Creating FormIO forms in Valtimo
      • Interpolating data in Form.io
      • Configuring an Objecten API object form
      • For developers
        • Form field data resolver
    • 🔀Form flow
      • Creating a form flow definition
      • For developers
        • Custom form flow component
        • Whitelisting Spring beans for Form flow
    • 🌍Localization
      • For developers
    • Logging
      • For developers
    • âœ‰ī¸Outbox
      • For developers
    • 🔌Plugins
      • Configuring plugins
      • SmartDocuments plugin
      • Exact Plugin
      • For developers
        • Custom plugin definitions
    • ⭕Process
      • System processes
      • Correlating messages
      • Job service
      • For developers
        • Integrating spring beans in a process
        • Whitelisting Spring beans for Camunda
    • 🔗Process links
      • Creating a process link
      • Editing a process link
      • Unlinking a process link
    • ✅Tasks
      • Task list columns
    • đŸ”ĸValue resolvers
      • For developers
    • 📃ZGW
      • Documents
        • Access control
        • Uploading to Documenten API with metadata
      • Creating extra case tabs for Zaakobjects
      • ZGW plugins
        • Besluiten Plugin
        • Catalogi API plugin
        • Documenten API plugin
        • Object Token Auhentication Plugin
        • Objecten API Plugin
        • Objecttypen API Plugin
        • Open Zaak plugin
        • Portaaltaak Plugin
        • Verzoek Plugin
        • Zaken API plugin
  • Release notes
    • Release notes
    • 12.x.x
      • 12.0.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
          • Spring Boot 3
      • 12.1.0
      • 12.2.0
      • 12.3.0
        • 12.3.1
      • 12.4.0
        • 12.4.1
      • 12.5.0
      • 12.6.0
        • 12.6.1
      • 12.7.0
        • 12.7.1
        • 12.7.2
      • 12.8.0
      • 12.9.0
      • 12.10.0
        • 12.10.1
        • 12.10.2
      • 12.11.0
      • 12.12.0
    • 11.x.x
      • 11.3.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 11.2.0 (RC)
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 11.1.5
        • Valtimo frontend libraries
      • 11.1.4
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 11.1.1
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 11.1.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 11.0.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
    • 10.x.x
      • 10.8.3
        • Valtimo backend libraries
      • 10.8.2
        • Valtimo frontend libraries
      • 10.8.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.7.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.6.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
      • 10.5.3
        • Valtimo backend libraries
      • 10.5.2
        • Valtimo backend libraries
      • 10.5.1
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.5.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
      • 10.4.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.3.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.2.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.1.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
      • 10.0.1
        • Valtimo frontend libraries
      • 10.0.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
    • 9.x.x
      • 9.26.2/5.15.1
        • Valtimo backend libraries (9.26.2)
        • Migration
      • 9.26.1/5.15.1
        • Valtimo backend libraries (9.26.1)
        • Valtimo frontend libraries (5.15.1)
      • 9.26.0/5.15.0
        • Valtimo backend libraries (9.26.0)
        • Valtimo frontend libraries (5.15.0)
        • Migration
      • 9.25.0/5.14.0
        • Valtimo backend libraries (9.25.0)
        • Valtimo frontend libraries (5.14.0)
      • 9.24.0/5.13.0
        • Valtimo backend libraries (9.24.0)
        • Valtimo frontend libraries (5.13.0)
      • 9.23.0/5.12.0
        • Valtimo backend libraries (9.23.0)
        • Valtimo frontend libraries (5.12.0)
      • 9.22.0/5.11.0
        • Valtimo backend libraries (9.22.0)
        • Valtimo frontend libraries (5.11.0)
        • Migration
      • 9.21.0/5.10.0
        • Valtimo backend libraries (9.21.0)
        • Valtimo frontend libraries (5.10.0)
        • Migration
      • 9.20.0/5.9.1
        • Valtimo backend libraries (9.20.0)
        • Valtimo frontend libraries (5.9.1)
        • Migration
      • 9.19.0/5.8.0
        • Valtimo backend libraries (9.19.0)
        • Valtimo frontend libraries (5.8.0)
        • Migration
      • 9.18.0/5.6.0
        • Valtimo backend libraries (9.18.0)
        • Valtimo frontend libraries (5.6.0)
        • Migration
      • 9.17.0/5.5.0
        • Valtimo backend libraries (9.17.0)
        • Valtimo frontend libraries (5.5.0)
      • 9.16.0/5.4.0
        • Valtimo backend libraries (9.16.0)
        • Valtimo frontend libraries (5.4.0)
  • Running Valtimo
    • Application configuration
      • Temporary file-storage
      • Configuring CORS
      • REST API endpoint security test
      • Content Security Policy (CSP)
      • Configuring Keycloak
      • Temporary file storage
      • Feature toggles
  • Customizing Valtimo
    • Front-end customization
      • Customizing Carbon theme
      • Custom logo
      • Custom components
        • Custom case management tab
  • Contributing to Valtimo
    • Contributing to Valtimo
    • Docs style guide for contributing
    • Branching and release strategy
    • Extend the core or build a plugin
Powered by GitBook
On this page
  • How to interpolate data
  • Available syntaxes

Was this helpful?

  1. Features
  2. Forms

Interpolating data in Form.io

PreviousCreating FormIO forms in ValtimoNextConfiguring an Objecten API object form

Last updated 10 months ago

Was this helpful?

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 .

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.

This results in the following form:

When creating a case with the required information that will be stored.

This data is used in the form to display the name in the message.

This same feature can be used in other text fields. For example, the label of a field can also be dynamically changed.

Which results in the following field.

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.

This would result in the following text being displayed in the form when using the {{ expression }} syntax

When using the {{ expression }} syntax, the data is not escaped. This means that the data is interpreted as HTML as shown below.

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.

<p>
  Names:
  <ul>
    {{ data.names ? ((data.names).map(name => '<li>'+_.escape(name)+'</li>').join('')) : '-' }}
  </ul>
</p>
📋
Available syntaxes
Setting up an HTML field with data interpolation
Add hidden field for prefilling data
Create a case with prefillable information
Add case data
Interpolated data example
Configuration of label with interpolated data
Example of label with interpolated data
Example input with HTML
Example of escaped data
Example of interpolated data