chesterdocs

#Show, hide and lock form fields

Display control hides a field while a condition is false, and Input control makes it read-only while a condition is true — both evaluated live in the browser as the person fills in the form.

#How a condition decides

flowchart LR
  E["Condition"] --> R{"Result"}
  R -- "false" --> H["Display control: hidden<br/>Input control: editable"]
  R -- "true" --> S["Display control: shown<br/>Input control: read-only"]
  R -- "anything else,<br/>e.g. undefined" --> O["Display control: shown<br/>Input control: editable"]
  R -- "error" --> X["Display control: hidden<br/>Input control: editable"]

The conditions are worked out again every time the person changes a value, so a field can appear the moment a checkbox is ticked.

#Set up a condition

On the user task, with a Form picked:

  1. Open Display control to show and hide fields, or Input control to lock them.
  2. Click + and select the fields.
  3. Give each field a condition — for example formData.approved === false to show a Reason field only when an order is not approved.

A condition is a JavaScript expression that can use:

  • the values of the form, as formData.<field key> — or just <field key>;
  • inside a dynamic list, the current row as item.<field key> and its position as index, counted from 0 — the condition is worked out for each row on its own;
  • the data the form was filled with.

Display control can also hide a whole group, table or dynamic list. Input control works on single fields only. Neither can target a file picker.

#Limits

  • ⚠️ Only false hides. A condition that gives undefined, 0 or an empty text leaves the field visible. Write conditions that give true or false.
  • ⚠️ A broken condition hides the field instead of showing it. A value name that is not a valid JavaScript name can break every condition of the form at once.
  • ⚠️ Hidden is not gone. A field hidden by Display control is still submitted with the form. If it is required and empty, the form cannot be submitted — and the person cannot see why. Don't make a field required if a condition can hide it.
  • ⚠️ Data from earlier steps. As soon as Form data input fills any field, conditions only see the form's values and what Form data input provided — not the rest of the process data, even though the variable list offers it. Put what a condition needs into a (hidden) field through Form data input.
  • ⚠️ Read-only is a lock in the browser only. The value is still submitted, and nothing checks it again when the task arrives. Rules that must hold belong in a gateway after the task.
  • The form builder hides form-js's own conditions, so a field's visibility is set here and only here. Its Read only setting remains: it locks the field always, without a condition.
  • ❌ A dynamic list inside another dynamic list cannot be targeted.

#What validation checks

Each condition must give a true-or-false value. The messages are German, and they are counted on the Option data group — see Fill a form with process data.