Is it possible to achieve multiple selection in cascading dropdowns

Question

I have a requirement where I'm having 5 dropdowns, based on the values (Multiple Selection) in first dropdown, the remaining dropdown values need get auto filtered out (Cascading Dropdowns). Is it possible to achieve? The one way of implementing is after multiple selections in first dropdown we need to keep a button and on click of button we can pass to next dropdowns. But without having button is it possible to achieve.

Stefan Helzle · Answer

Did you consider to apply that "pass to next" logic inside the saveinto of the first dropdown?

Shubham Aware · Answer

Sample code for reference a!localVariables(
 /* Sample hierarchical data: Adjust to your data source */
 local!lv1Labels: {"Cat1", "Cat2", "Cat3"},
 local!lv1Values: {1, 2, 3},
 local!lv2Labels: {"1-A", "1-B", "2-A", "2-B", "3-A", "3-B"},
 local!lv2Values: {11,12,21,22,31,32},
 local!lv3Labels: {"11-i","11-ii","12-i","21-i","22-i","31-i"},
 local!lv3Values: {111,112,121,211,221,311},
 local!lv4Labels: {"111-a","111-b","121-a","211-a","311-a"},
 local!lv4Values: {1111,1112,1211,2111,3111},
 local!lv5Labels: {"1111-x","1111-y","1211-x","2111-x"},
 local!lv5Values: {11111,11112,12111,21111},

 local!selected1: {}, local!selected2: {}, local!selected3: {},
 local!selected4: {}, local!selected5: {},
 local!tmp2Labels: {}, local!tmp2Values: {},
 local!tmp3Labels: {}, local!tmp3Values: {},
 local!tmp4Labels: {}, local!tmp4Values: {},
 local!tmp5Labels: {}, local!tmp5Values: {},
{
 /* Level 1 */
 a!multipleDropdownField(
 label: "Level 1",
 choiceLabels: local!lv1Labels, choiceValues: local!lv1Values,
 value: local!selected1,
 saveInto: {
 local!selected1,
 /* Clear children */
 a!save(local!selected2, {}), a!save(local!selected3, {}), a!save(local!selected4, {}), a!save(local!selected5, {}),
 /* Filter L2 */
 a!save(local!tmp2Labels, index(local!lv2Labels, wherecontains(local!selected1, local!lv1Values), {})),
 a!save(local!tmp2Values, index(local!lv2Values, wherecontains(local!selected1, local!lv1Values), {}))
 }
 ),

 /* Level 2 */
 a!multipleDropdownField(
 label: "Level 2",
 choiceLabels: if(length(local!tmp2Labels)>0, local!tmp2Labels, local!lv2Labels),
 choiceValues: if(length(local!tmp2Values)>0, local!tmp2Values, local!lv2Values),
 value: local!selected2,
 saveInto: {
 local!selected2,
 /* Clear children */
 a!save(local!selected3, {}), a!save(local!selected4, {}), a!save(local!selected5, {}),
 /* Filter L3 based on L2 */
 a!save(local!tmp3Labels, index(local!lv3Labels, wherecontains(local!selected2, local!lv2Values), {})),
 a!save(local!tmp3Values, index(local!lv3Values, wherecontains(local!selected2, local!lv2Values), {}))
 }
 ),

 /* Level 3 */
 a!multipleDropdownField(
 label: "Level 3",
 choiceLabels: if(length(local!tmp3Labels)>0, local!tmp3Labels, local!lv3Labels),
 choiceValues: if(length(local!tmp3Values)>0, local!tmp3Values, local!lv3Values),
 value: local!selected3,
 saveInto: {
 local!selected3,
 a!save(local!selected4, {}), a!save(local!selected5, {}),
 a!save(local!tmp4Labels, index(local!lv4Labels, wherecontains(local!selected3, local!lv3Values), {})),
 a!save(local!tmp4Values, index(local!lv4Values, wherecontains(local!selected3, local!lv3Values), {}))
 }
 ),

 /* Level 4 */
 a!multipleDropdownField(
 label: "Level 4",
 choiceLabels: if(length(local!tmp4Labels)>0, local!tmp4Labels, local!lv4Labels),
 choiceValues: if(length(local!tmp4Values)>0, local!tmp4Values, local!lv4Values),
 value: local!selected4,
 saveInto: {
 local!selected4,
 a!save(local!selected5, {}),
 a!save(local!tmp5Labels, index(local!lv5Labels, wherecontains(local!selected4, local!lv4Values), {})),
 a!save(local!tmp5Values, index(local!lv5Values, wherecontains(local!selected4, local!lv4Values), {}))
 }
 ),

 /* Level 5 */
 a!multipleDropdownField(
 label: "Level 5",
 choiceLabels: if(length(local!tmp5Labels)>0, local!tmp5Labels, local!lv5Labels),
 choiceValues: if(length(local!tmp5Values)>0, local!tmp5Values, local!lv5Values),
 value: local!selected5,
 saveInto: local!selected5
 ),

 /* Debug: Selected values */
 a!textField(
 value: local!selected1 & "|" & local!selected2 & "|" & local!selected3 & "|" & local!selected4 & "|" & local!selected5,
 label: "Selected: ",
 readOnly: true
 )
}

)

Harshmodi · Answer

Hi saimoulikrishnak293956 , 
 Here is an example of multiple selection using cascading dropdowns. 
 a!localVariables(
 local!countries: { "India", "USA" },
 local!statesByCountry: {
 "India": { "Rajasthan", "Maharashtra" },
 "USA": { "California", "Texas" }
 },
 local!citiesByState: {
 "Rajasthan": { "Jaipur", "Udaipur" },
 "Maharashtra": { "Mumbai", "Pune" },
 "California": { "Los Angeles", "San Francisco" },
 "Texas": { "Houston", "Dallas" }
 },
 local!areasByCity: {
 "Jaipur": {
 "Malviya Nagar",
 "Vaishali Nagar",
 "Mansarovar"
 },
 "Udaipur": {
 "Hiran Magri",
 "Fatehpura",
 "Shobhagpura"
 },
 "Mumbai": { "Andheri", "Bandra", "Dadar" },
 "Pune": { "Wakad", "Hinjewadi", "Kothrud" },
 "Los Angeles": { "Hollywood", "Venice", "Beverly Hills" },
 "San Francisco": { "Mission District", "SoMa", "Sunset" },
 "Houston": { "Downtown", "Midtown", "Uptown" },
 "Dallas": { "Deep Ellum", "Bishop Arts", "Lakewood" }
 },
 local!selectedCountry,
 local!selectedState,
 local!selectedCities,
 local!selectedArea,
 local!showSelectedChoiceforState: touniformstring(
 a!forEach(
 items: local!selectedCountry,
 expression: index(local!statesByCountry, fv!item, {})
 )
 ),
 local!showSelectedChoiceforCity: touniformstring(
 a!forEach(
 items: local!selectedState,
 expression: index(local!citiesByState, fv!item, {})
 )
 ),
 local!showSelectedChoiceforArea: touniformstring(
 a!forEach(
 items: local!selectedCities,
 expression: index(local!areasByCity, fv!item, {})
 )
 ),
 {
 a!multipleDropdownField(
 label: "Country",
 choiceLabels: local!countries,
 choiceValues: local!countries,
 value: local!selectedCountry,
 saveInto: {
 local!selectedCountry,
 a!save(
 {
 local!selectedArea,
 local!selectedCities,
 local!selectedState
 },
 null
 )
 }
 ),
 a!multipleDropdownField(
 label: "State",
 choiceLabels: local!showSelectedChoiceforState,
 choiceValues: local!showSelectedChoiceforState,
 value: local!selectedState,
 saveInto: {
 local!selectedState,
 a!save(
 {
 local!selectedArea,
 local!selectedCities
 },
 null
 )
 }
 ),
 a!multipleDropdownField(
 label: "City",
 choiceLabels: local!showSelectedChoiceforCity,
 choiceValues: local!showSelectedChoiceforCity,
 value: local!selectedCities,
 saveInto: {
 local!selectedCities,
 a!save(local!selectedArea, null)
 }
 ),
 a!multipleDropdownField(
 label: "Area",
 choiceLabels: local!showSelectedChoiceforArea,
 choiceValues: local!showSelectedChoiceforArea,
 value: local!selectedArea,
 saveInto: { local!selectedArea }
 )
 }
)