Dynamic inputs

Introduction

Dynamic forms are a powerful feature that allows the behavior and appearance of form elements to change based on certain conditions. These conditions are defined using JSON objects, which enable you to create complex form interactions and provide a more dynamic and user-friendly form experience.

In this documentation, we will explore different scenarios and cases of dynamic forms, including showing/hiding form elements based on conditions and dynamically setting options and other fields based on user input.

Basic Show/Hide

The simplest form of dynamic forms is to show or hide form elements based on a condition. For example:

Code

[
 {
    "type": "checkbox",
    "title": "1. Simple use, show/hidden depended child",
    "payloadName": "parent1",
    "helpText": "Toggle the switcher"
  },
  {
    "type": "text",
    "title": "1. I'm visible when the parent switcher is 'true'",
    "payloadName": "child1",
    "condition": {
      "when": "parent1",
      "is": "true"
    }
  }
]

No condition

Condition matched

In this case, the "child" field will only be visible if the "parent" checkbox is checked.

Show/Hide with Logical Operators

You can use logical operators like 'and,' 'or,' and 'not' to create more complex conditions. For example:

“AND“ Example:

Code

[ 
 {
    "type": "checkbox",
    "title": "Usage of the keyword 'and'",
    "payloadName": "parent1_and",
    "helpText": "Toggle this switcher"
  },
  {
    "type": "checkbox",
    "title": "Usage of the the keyword 'and'",
    "payloadName": "parent2_and",
    "helpText": "AND toggle this too"
  },
  {
    "type": "text",
    "title": "I'm visible when both parent switchers above are 'true'",
    "payloadName": "child2_and",
    "condition": {
      "and": [
        {
          "when": "parent1_and",
          "is": "true"
        },
        {
          "when": "parent2_and",
          "is": "true"
        }
      ]
    }
  }
]

No condition

Condition matched

In this example, the "child" field will be visible if both the parent's checkboxes are checked.

“OR“ Example:

Code

[ 
 {
    "type": "checkbox",
    "title": "Using with the keyword 'or'",
    "payloadName": "parent1_or",
    "helpText": "Toggle this switcher"
  },
  {
    "type": "checkbox",
    "title": "Using with the keyword 'or'",
    "payloadName": "parent2_or",
    "helpText": "OR toggle this one"
  },
  {
    "type": "text",
    "title": "I'm visible when at least one of the parent switchers above is 'true'",
    "payloadName": "child2_or",
    "condition": {
      "or": [
        {
          "when": "parent1_or",
          "is": "true"
        },
        {
          "when": "parent2_or",
          "is": "true"
        }
      ]
    }
  }
]

No condition

Condition matched

In this example, the "child" field will be visible if at least one of the parent’s checkboxes are checked.

“NOT“ Example:

Code

[ 
 {
    "type": "checkbox",
    "title": "Using with the keyword 'not'",
    "payloadName": "parent1_not",
    "helpText": "Toggle this switcher"
  },
  {
    "type": "checkbox",
    "title": "Using with the keyword 'not'",
    "payloadName": "parent2_not",
    "helpText": "Toggle this switcher"
  },
  {
    "type": "text",
    "title": "I'm visible when both parent switchers above me aren't 'true'",
    "payloadName": "child2_not",
    "condition": {
      "not": [
        {
          "when": "parent1_not",
          "is": "true"
        },
        {
          "when": "parent2_not",
          "is": "true"
        }
      ]
    }
  }
]

No condition

Condition matched

In this example, the "child" field will be hidden when both parent’s checkboxes are checked.

Dynamic Settings

Setting Options with "then"

Dynamic forms allow you to change the options of dropdowns and other select elements based on specific conditions:

Code

[
  {
    "type": "checkbox",
    "title": "This example changes options in the child dropdown",
    "payloadName": "parent",
    "helpText": "Depending on checked/unchecked option, the dropdown below has different options"
  },
  {
    "type": "dropdown",
    "title": "Some Marvel's hero",
    "payloadName": "child",
    "options": [
      {
        "value": "iron_man",
        "label": "Tony Stark"
      },
      {
        "value": "hulk",
        "label": "Bruce Banner"
      }
    ],
    "helpText": "Select your hero",
    "condition": {
      "when": "parent",
      "is": "true",
      "then": {
        "title": "Some DC's hero",
        "helpText": "As you can see we change not only options but title and this helper text as well",
        "options": [
          {
            "value": "batman",
            "label": "Bruce Wayne"
          },
          {
            "value": "cat-woman",
            "label": "Selina Kyle"
          }
        ]
      }
    }
  }
]

No condition

Condition matched

In this example, if the "parent" checkbox is checked, the "child" dropdown will change to different set of options.

Setting Options with "else"

You can also specify alternate options using the "else" property, which will be used when the condition is not met:

Code

[
  {
    "type": "checkbox",
    "title": "This example changes options in the child dropdown with else condition",
    "payloadName": "parent",
    "helpText": "Depending on checked/unchecked option, the dropdown below has different options"
  },
  {
    "type": "dropdown",
    "title": "All heros",
    "payloadName": "child6",
    "condition": [
      {
        "when": "parent",
        "is": "true",
        "then": {
          "title": "Only Marvel's hero",
          "helpText": " ",
          "options": [
            {
              "value": "iron_man",
              "label": "Tony Stark"
            },
            {
              "value": "hulk",
              "label": "Bruce Banner"
            }
          ]
        },
        "else": {
          "options": [
            {
              "value": "batman",
              "label": "Bruce Wayne"
            },
            {
              "value": "cat-woman",
              "label": "Selina Kyle"
            },
            {
              "value": "iron_man",
              "label": "Tony Stark"
            },
            {
              "value": "hulk",
              "label": "Bruce Banner"
            }
          ]
        }
      }
    ]
  }
]

No condition

Condition matched

In this example, if the "parent" checkbox is not checked, the "child" dropdown options will show list from else condition.

Setting Options with Array of Conditions

You can use array conditions to set different options based on multiple conditions:

Code

[
 {
    "type": "text",
    "title": "In this example, the dropdown below is controlled by text field. Dropdown options are depended on typed value",
    "payloadName": "parent",
    "helpText": "Type your favorite superhero universe, e.g. 'marvel' or 'dc' or something else"
  },
  {
    "type": "dropdown",
    "title": "Please type something in the text field above",
    "payloadName": "child",
    "condition": [
      {
        "when": "parent",
        "is": "marvel",
        "then": {
          "title": "Some Marvel's hero",
          "helpText": " ",
          "options": [
            {
              "value": "iron_man",
              "label": "Tony Stark"
            },
            {
              "value": "hulk",
              "label": "Bruce Banner"
            }
          ]
        }
      },
      {
        "when": "parent",
        "is": "dc",
        "then": {
          "title": "Some DC's hero",
          "helpText": " ",
          "options": [
            {
              "value": "batman",
              "label": "Bruce Wayne"
            },
            {
              "value": "cat-woman",
              "label": "Selina Kyle"
            }
          ]
        }
      }
    ]
  }
]

No condition

First condition matched

Second condition matched

In this example, if the "parent" input is set to "marvel," the "child" dropdown options will change to include Marvel characters like "Tony Stark" and "Bruce Banner." If set to "dc," the options will change to include DC characters like "Bruce Wayne" and "Selina Kyle."

Dynamic Settings based on Dropdown Selection

You can also use dynamic settings based on dropdown selections, allowing for cascading dropdowns:

Code

[
   {
    "type": "dropdown",
    "title": "Dropdown combination between show/hidden case and setting options",
    "payloadName": "parent",
    "options": [
      {
        "value": "marvel",
        "label": "Marvel"
      },
      {
        "value": "dc",
        "label": "DC"
      }
    ],
    "helpText": "Select your universe then you will see the next dropdown"
  },
  {
    "type": "dropdown",
    "title": "I'm visible when the parent dropdown isn't empty",
    "payloadName": "child",
    "options": [
      {
        "value": "default",
        "label": "Default"
      }
    ],
    "condition": [
      {
        "when": "parent",
        "isNotEmpty": true
      },
      {
        "when": "parent",
        "is": "marvel",
        "then": {
          "options": [
            {
              "value": "iron_man",
              "label": "Tony Stark"
            },
            {
              "value": "hulk",
              "label": "Bruce Banner"
            }
          ]
        }
      },
      {
        "when": "parent",
        "is": "dc",
        "then": {
          "options": [
            {
              "value": "batman",
              "label": "Bruce Wayne"
            },
            {
              "value": "cat-woman",
              "label": "Selina Kyle"
            }
          ]
        }
      }
    ]
  }
]

No condition

First condition matched

Second condition matched

In this example, the "child" dropdown options will change based on the selection made in the "parent" dropdown. If "Marvel" is selected, the options will include "Tony Stark" and "Bruce Banner." If "DC" is selected, the options will include "Bruce Wayne" and "Selina Kyle."

Other Dynamic Fields

Modifying Form Element Properties

Dynamic forms can be used to modify other properties of form elements based on certain conditions:

Code

[
  {
    "type": "checkbox",
    "payloadName": "parent",
    "title":  "Child changer",
    "helpText": "Title, description and default value changer"
  },
  {
    "type": "text",
    "payloadName": "child",
    "title": "Default text",
    "helpText": "Default description",
    "condition": {
      "when": "parent",
      "is": "true",
      "then": {
        "title": "Modified title",
        "defaultValue": "Apply default value",
        "helpText": "Modified description"
      }
    }
  }
]

No condition

Condition matched

In this example, when the "parent" checkbox is checked, the "child" field's title will change and a help text as well as the default value will be set.

Empty and Not Empty Conditions

Dynamic forms can also be based on the presence or absence of values in form elements:

isEmpty Condition

Code

[
   {
    "type": "text",
    "title": "Example using 'isEmpty' keyword",
    "payloadName": "parent",
    "helpText": "Type something"
  },
  {
    "type": "text",
    "title": "I'm visible only when the parent field is empty",
    "payloadName": "child",
    "condition": {
      "when": "parent",
      "isEmpty": true
    }
  }
]

No condition

Condition matched

In this example, the "child" field will only be visible if the "parent" field is empty.

isNotEmpty Condition

Code

[
  {
    "type": "text",
    "title": "Example using 'isNotEmpty' keyword",
    "payloadName": "parent",
    "helpText": "Type something"
  },
  {
    "type": "text",
    "title": "I'm visible only when the parent field isn't empty",
    "payloadName": "child",
    "condition": {
      "when": "parent",
      "isNotEmpty": true
    }
  }
]

No condition

Condition matched

In this example, the "child" field will only be visible if the "parent" field is not empty.

Conclusion

Dynamic forms offer powerful capabilities to create interactive and personalized form experiences. By defining conditions and using logical operators, you can control when form elements are displayed or hidden. Additionally, you can modify form element properties and set different options based on user input, providing a more dynamic and user-friendly form interaction. Use these techniques to enhance your forms and make them more intuitive and tailored to your users' needs.