Appian Community and Appian Academy are being upgraded. From July 24–August 3, the Appian Community will be in read-only mode. During this time, the site will be read-only and user registration will be disabled. We apologize for any inconvenience this may cause, but a more secure, stable, and performant Community experience is coming soon!

The new Appian Community launches August 3, followed by Appian Academy on August 7. During the migration, Appian Community Edition, Appian Academy, Documentation, Certifications, Instructor-led Customer Training, Partner Sales Training & Accreditation, and Forum (for Appian Partners and Customers only) will remain available.

Is it possible to achieve multiple selection in cascading dropdowns

Certified Senior Developer

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.

  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer

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

  • 0
    Certified Lead Developer

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

  • 0
    Certified Senior Developer

    Hi  ,

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