Cascading Inputs
Allows to render dynamic options in 'cascadable' components by replacing the options
array with an Object of the following form
options: {
linked: 'multi',
default: [{ value: 'radio1_default', label: 'radio1_default' }, { value: 'radio2_default', label: 'radio2_default' }],
"multi1|multi2": [{ value: 'radio3', label: 'radio3' }, { value: 'radio4', label: 'radio4' }],
"multi3|multi4": [{ value: 'radio5', label: 'radio5' }, { value: 'radio6', label: 'radio6' }],
},
It is important to note that default_value of a component will only render if it is part of the available options. If you conditionally render a set of options that the default does not belong to, the field value will be empty.
Properties
- linked: This is a string that matches your data_token mapped component (right hand side - see example below)
- default: This is an array of JSON object that have the shape {value: 'itemValue', label: 'readableLabel'}. NOTE: default options will only show if NO OTHER matches occur between this component and the linked component.
- : This is a valid json property name that should match the 'value' you expect from the linked component
- |>: This is a special valid json property name that is pipe
|
seperated. Use this when the linked component has multiple options that should display the 'same' list of options.
This options object requires a linked
and a default
property which can then be followed by property names that match the value
of the linked component. The linked component is the name of your data_token mapped value to evaluate against.
Example
This example has a multiselect as the 'starting point' and then has the radio_group options depend on the multiselect's value. After that a select that depends on the radio_group value. Lastly, a checkbox_group that depends on the select's value.
{
"component_name": "form_builder",
"pages": [
{
"header": "Cascading Options",
"instructions": "Dev-Test",
"fields": [
{
"id": "multi",
"title": "Multiselect",
"component": "multiselect",
"instructions": "Pick a set of options",
"required": true,
"default_value": ["multi1"],
"output": "Array",
"options": ["multi1", "multi2", "multi3"]
},
{
"id": "radio",
"title": "Radio Group",
"component": "radio_group",
"instructions": "Select an option",
"required": true,
"default_value": "radio1_default",
"options": {
"linked": "multi",
"default": [{ "value": "radio1_default", "label": "radio1_default" }, { "value": "radio2_default", "label": "radio2_default" }],
"multi1|multi2": [{ "value": "radio3", "label": "radio3" }, { "value": "radio4", "label": "radio4" }],
"multi3|multi4": [{ "value": "radio5", "label": "radio5" }, { "value": "radio6", "label": "radio6" }]
}
},
{
"id": "select",
"title": "Select",
"component": "select",
"instructions": "Select an option",
"required": true,
"default_value": "select1_default",
"options": {
"linked": "radio",
"default": ["select1_default", "select2_default"],
"radio3|radio4": ["select3", "select4"],
"radio5|radio6": ["select5", "select6"]
}
},
{
"id": "check",
"title": "Checkbox Group",
"component": "checkbox_group",
"instructions": "Pick a set of options",
"required": true,
"default_value": ["check1_default"],
"output": "Keys",
"options": {
"linked": "select",
"default": [{ "value": "check1_default", "label": "check1_default" }, { "value": "check2_default", "label": "check2_default" }],
"select3": [{ "value": "check3", "label": "check3" }, { "value": "check4", "label": "check4" }],
"select4": [{ "value": "check5", "label": "check5" }, { "value": "check6", "label": "check6" }],
"select5|select6": [{ "value": "check7", "label": "check7" }, { "value": "check8", "label": "check8" }],
"select2_default": [{ "value": "check9", "label": "check9" }, { "value": "check10", "label": "check10" }]
}
}
]
}
],
"data_token": {
"request.select": "select",
"request.multi": "multi",
"request.radio": "radio",
"request.check": "check"
}
}
Note: When integrating the Form Builder component, include the readOnly
prop and set it to true to enable read only mode.
Updated 2 months ago