Additional data

The payload holds the form data the user has to edit. All the data in the payload can be used in expressions, which is usually enough for most applications. But sometimes we want to use data in expressions that is not editable, for example the role of the loged in user, the parent of the current form scope or the backend urls.

For example, you may want to enable a component only when the logged in user is an admin.

{ "type": "scriptButton", "enabled": "{{currentUser.role === 'ADMIN'}}", "value": "{{deleted}}", "extraSettings": { "url": "./admin-site", "text": "Delete account", "script": true } }

To provide the additional data, we can pass the additionalData prop to the form.

<Form
  ...
  additionalData={{ 
    currentUser: {
      name: "Lina Morgan",
      role: "EDITOR"
    } 
  }}
/>

In addition to data, we can also add functions. These functions are useful to format data, for example, passing a function like:

<Form
  ...
  additionalData={{ 
    currentUser: {
      name: "Lina Morgan",
      role: "EDITOR"
    },
    now: new Date(),
    formatTime: date => `${date.getHours()} : ${date.getMinutes()}
  }}
/>

and then using it in the form:

{ "type": "text", "enabled": false, "value": "{{ now |> formatTime}}", "label": "Current time" }