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
     )
    })

  • 0
    Certified Lead Developer
    in reply to ekanshj

    If the second dropdown is ever going to be required, you might want to replace "showWhen:" in ekanshj's example code with "disabled:"  It helps the user not be shocked by the addition of a new field, but informs them of exactly how many inputs they're going to have to fill in and in what order.

    UX is a bit more of an art than a science, though.  You can try both approaches and see which you prefer.

Reply Children
No Data