Show or Hide an Input

This example shows how to dynamically display or remove an input based on the value of a checkbox. It uses a Boolean input named Hide and a Comment input that is added or removed when the checkbox value changes.

This pattern is useful when an input is relevant only in a specific state of the form. It helps keep the UI compact and prevents users from filling in fields that are not currently needed.

How It Works

The implementation is split into two phases:

1. Init – creates the initial form structure.

2. OnValueChange – reacts to a change in the Hide checkbox and updates the form accordingly.

Phase: Init

In the initialization phase, the form creates two inputs:

• Hide – a checkbox input

• Comment – a required text input

The Hide input is registered with .onValueChange(), so the form sends an update request whenever the user changes its value.

form.createBooleanUserEntry("Hide")
        .setLabel("Hide")
        .onValueChange()
        .buildFormInput()

form.createStringUserEntry("Comment")
        .setLabel("Comment")
        .setRequired(true)
        .buildFormInput()

At this point, both inputs are visible. The checkbox acts as the trigger, while Comment is the input whose visibility will be controlled.

Phase: OnValueChange

When the user changes the checkbox, the OnValueChange phase is executed. The logic checks the current value of input.Hide and updates the form as follows:

• If input.Hide is true, the Comment input is removed from the form.

• If input.Hide is false, the Comment input is created again and inserted immediately after Hide.

if (input.Hide) {
    form.updateInput("Comment").remove()
} else {
    def comment = form.createTextUserEntry("Comment")
            .setLabel("Comment")
            .buildContextParameter()
    form.insertAfter("Hide", comment)
}

Why remove() and insertAfter() Are Used

remove() does not just disable the input visually. It removes the input from the returned form update, so the field is no longer displayed in the UI.

insertAfter("Hide", comment) adds the input back into the form and keeps the field order predictable by placing Comment directly after the checkbox.

Returned Form Updates

The frontend receives a form update payload rather than a full form definition.

When the checkbox is cleared, the response adds Comment after Hide:

{
  "data": [
    {
      "Hide": {
        "addAfter": [
          {
            "name": "Comment",
            "label": "Comment",
            "type": "TEXTUSERENTRY",
            "inputs": [],
            "parameterConfig": {},
            "formattingOptions": {}
          }
        ]
      }
    }
  ]
}

When the checkbox is selected, the response removes the input:

{
  "data": [
    {
      "Hide": {
        "remove": true
      }
    }
  ]
}

Result

From the user perspective, the behavior is straightforward:

• Hide = false → Comment is displayed

• Hide = true → Comment is hidden

This makes the form reactive without rebuilding the entire layout.

Notes for Configuration Engineers

• Use Init to define the initial state of the form.

• Use OnValueChange only for incremental updates triggered by a frontend event.

• Register the event explicitly with .onValueChange() on the input that should trigger the update.

• When re-adding an input dynamically, insert it at a specific location to preserve form structure and avoid unexpected ordering changes.