Populate the choices of a dropdown based on the selection from another

Hi,

I have two dropdowns on a form.  Is it possible to populate the choices for the second dropdown based on the selection from the first?

In the first dropdown, I populated its choices from a record type using this example, Dropdown Component - Appian 23.4.  Based on the selection from this dropdown, I'd like to query another record type (filtering on this selection) and use the result as choices for the second dropdown.

What is the best way to achieve this?  Any examples for reference would be much appreciated.

Thanks.

  Discussion posts and replies are publicly visible

Parents
  • +1
    Certified Senior Developer

    PFB the sample code for your use case

    a!localVariables(
      local!state: {
        a!map(id: 1, state: "UP"),
        a!map(id: 2, state: "Maharashtra"),
        a!map(id: 3, state: "Karnataka"),
        a!map(id: 4, state: "Goa")
      },
      local!city: {
        a!map(id: 1, City: "Bangalore", stateId: 3),
        a!map(id: 2, City: "Mumbai", stateId: 2),
        a!map(id: 3, City: "Pune", stateId: 2),
        a!map(id: 4, City: "Vasco da Gama", stateId: 4),
        a!map(id: 5, City: "Lucknow", stateId: 1),
        
      },
      local!selectedStateId,
      local!filterCityBasedOnStateSelected: if(
        a!isNullOrEmpty(local!selectedStateId),
        {},
        index(
          local!city,
          wherecontains(
            tointeger(local!selectedStateId),
            tointeger(index(local!city, "stateId", {}))
          ),
          {}
        )
      ),
      local!selectedCity,
      {
        a!dropdownField(
          label: "State",
          placeholder: "--Select--",
          choiceValues: index(local!state, "id", {}),
          choiceLabels: index(local!state, "state", {}),
          saveInto: {
            local!selectedStateId,
            a!save(local!selectedCity, null)
          },
          value: local!selectedStateId
        ),
        a!dropdownField(
          label: "City",
          placeholder: "--Select--",
          choiceValues: index(
            local!filterCityBasedOnStateSelected,
            "id",
            {}
          ),
          choiceLabels: index(
            local!filterCityBasedOnStateSelected,
            "City",
            {}
          ),
          saveInto: local!selectedCity,
          value: local!selectedCity
        )
      }
    )

Reply
  • +1
    Certified Senior Developer

    PFB the sample code for your use case

    a!localVariables(
      local!state: {
        a!map(id: 1, state: "UP"),
        a!map(id: 2, state: "Maharashtra"),
        a!map(id: 3, state: "Karnataka"),
        a!map(id: 4, state: "Goa")
      },
      local!city: {
        a!map(id: 1, City: "Bangalore", stateId: 3),
        a!map(id: 2, City: "Mumbai", stateId: 2),
        a!map(id: 3, City: "Pune", stateId: 2),
        a!map(id: 4, City: "Vasco da Gama", stateId: 4),
        a!map(id: 5, City: "Lucknow", stateId: 1),
        
      },
      local!selectedStateId,
      local!filterCityBasedOnStateSelected: if(
        a!isNullOrEmpty(local!selectedStateId),
        {},
        index(
          local!city,
          wherecontains(
            tointeger(local!selectedStateId),
            tointeger(index(local!city, "stateId", {}))
          ),
          {}
        )
      ),
      local!selectedCity,
      {
        a!dropdownField(
          label: "State",
          placeholder: "--Select--",
          choiceValues: index(local!state, "id", {}),
          choiceLabels: index(local!state, "state", {}),
          saveInto: {
            local!selectedStateId,
            a!save(local!selectedCity, null)
          },
          value: local!selectedStateId
        ),
        a!dropdownField(
          label: "City",
          placeholder: "--Select--",
          choiceValues: index(
            local!filterCityBasedOnStateSelected,
            "id",
            {}
          ),
          choiceLabels: index(
            local!filterCityBasedOnStateSelected,
            "City",
            {}
          ),
          saveInto: local!selectedCity,
          value: local!selectedCity
        )
      }
    )

Children