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

  • I like the spirit of this answer. 

    Just note that - for illustrative purposes, I assume - is loading the drop down values from hard-coded arrays in the SAIL.  This will work fine for the example.  However, in practical application, this can be a chore to maintain.  Typically, a more flexible solution would be to retrieve those values from your reference data repository.

  • yes Correct. we will retrieve values from data repository.

Reply Children
No Data