MelodyArc

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.