Cascade Dropdown

Hello All,

I have a requirement where i have to create two dropdown fields but second dropdown will depend upon first. Suppose user selects one option from the first dropdown then according to that option second dropdown show options. one more thing is that i want second dropdown only appears when user choose option from first dropdown.

Kindly suggest how to achieve this.

Thanks in Advance

  Discussion posts and replies are publicly visible

Parents
  • Hi
    You can achieve this by saving the values to be shown in the second drop-down on the selection of 1st drop-down and show the second one only after the first is selected. 
    Make sure to do a null condition if the option is changed in the first one. Something like this.

    load(
      local!dropdown1: {1,2,3},
      local!value1,
      local!value2,
      local!dropdown2,
      {
      a!dropdownField(
        label: "Dropdown 1",
        placeholderLabel: "Please select",
        choiceLabels: local!dropdown1,
        choiceValues: local!dropdown1,
        value: local!value1,
        saveInto: {
          local!value1,
          a!save(local!value2,NULL),
          if(local!value1=local!dropdown1[1],a!save(local!dropdown2,{4,5,6}),a!save(local!dropdown2,{7,8,9}))
        }
      ),
      a!dropdownField(
        showWhen: not(rule!APN_isBlank(local!value1)),
        label: "Dropdown 2",
        placeholderLabel: "Please select",
        choiceLabels: local!dropdown2,
        choiceValues: local!dropdown2,
        value: local!value2,
        saveInto: local!value2
     )
    })

Reply
  • Hi
    You can achieve this by saving the values to be shown in the second drop-down on the selection of 1st drop-down and show the second one only after the first is selected. 
    Make sure to do a null condition if the option is changed in the first one. Something like this.

    load(
      local!dropdown1: {1,2,3},
      local!value1,
      local!value2,
      local!dropdown2,
      {
      a!dropdownField(
        label: "Dropdown 1",
        placeholderLabel: "Please select",
        choiceLabels: local!dropdown1,
        choiceValues: local!dropdown1,
        value: local!value1,
        saveInto: {
          local!value1,
          a!save(local!value2,NULL),
          if(local!value1=local!dropdown1[1],a!save(local!dropdown2,{4,5,6}),a!save(local!dropdown2,{7,8,9}))
        }
      ),
      a!dropdownField(
        showWhen: not(rule!APN_isBlank(local!value1)),
        label: "Dropdown 2",
        placeholderLabel: "Please select",
        choiceLabels: local!dropdown2,
        choiceValues: local!dropdown2,
        value: local!value2,
        saveInto: local!value2
     )
    })

Children