Cascading Dropdown to 3 levels

Certified Senior Developer

I am trying to implement 3 level cascading dropdown fields. 'State' dropdown field will have choices based on 'country' selected and 'City' dropdown field will have choices based on 'State' selected. I have created choices for 'States' field using choose() function. But not sure how to create choices for 'City' field. It would be great if anyone can respond to this.

Note: I am using localVariables for all the data. Not querying to DB. This is only for testing purpose.

  Discussion posts and replies are publicly visible

Parents
  • Hi Sudip

    The key to this is the data model. You want to create data sets that can be related. There will be three sets of data:

    • Countries, with a key and a name e.g. '1' and 'USA'
    • States, with a key, a foreign key relating the State to a Country, and a name e.g. '1', '1', 'Colorado'
    • Cities, with a key, and a foreign key relating the City to the State, and a name e.g. '1', '1', 'Denver'

    Here's an example:

    a!localVariables(
      local!countries: {
        {countryId: 1, countryName: "Australia"},
        {countryId: 2, countryName: "United States of America"}
      },
      local!states: {
        /* States of Australia */
        {stateId: 1, countryId: 1, stateName: "New South Wales"},
        {stateId: 2, countryId: 1, stateName: "Queensland"},
        /* States of USA */
        {stateId: 11, countryId: 2, stateName: "Alabama"},
        {stateId: 12, countryId: 2, stateName: "Alaska"},
        {stateId: 13, countryId: 2, stateName: "Arkansas"},
        {stateId: 14, countryId: 2, stateName: "California"},
        {stateId: 15, countryId: 2, stateName: "Colorado"}
      },
      local!cities: {
        /* Cities of New South Wales, Australia */
        {cityId: 1, stateId: 1, cityName: "Sydney"},
        {cityId: 2, stateId: 1, cityName: "Wollongong"},
        /* Cities of Colorado, USA */
        {cityId: 12, stateId: 15, cityName: "Boulder"},
        {cityId: 13, stateId: 15, cityName: "Denver"}
      },
      local!selectedCountry: null,
      local!selectedState: null,
      local!selectedCity: null,
      {
        a!dropdownField(
          label: "Countries",
          placeholderLabel: "---Select a Country---",
          choiceLabels: fn!index(local!countries,"countryName", null),
          choiceValues: fn!index(local!countries,"countryId",null),
          value: local!selectedCountry,
          saveInto: {
            local!selectedCountry,
            a!save(
              {local!selectedState,local!selectedCity},
              null
            )
          }
        ),
        a!dropdownField(
          showWhen: fn!not(fn!isnull(local!selectedCountry)),
          label: concat(
            "States for ",
            local!countries.countryName[
              wherecontains(
                local!selectedCountry,fn!tointeger(local!countries.countryId))
            ]
          ),
          placeholderLabel: "---Select a State ---",
          choiceLabels: local!states.stateName[wherecontains(local!selectedCountry,tointeger(local!states.countryId))],
          choiceValues: local!states.stateId[wherecontains(local!selectedCountry,tointeger(local!states.countryId))],
          value: local!selectedState,
          saveInto: {
            local!selectedState,
            a!save(
              local!selectedCity,
              null
            )
          }
        ),
        a!dropdownField(
          showWhen: fn!not(fn!isnull(local!selectedState)),
          label: concat(
            "Cities for ",
            local!states.stateName[
              wherecontains(
                local!selectedState,fn!tointeger(local!states.stateId))
            ]
          ),
          placeholderLabel: "---Select a City ---",
          choiceLabels: local!cities.cityName[wherecontains(local!selectedState, tointeger(local!cities.stateId))],
          choiceValues: local!cities.cityId[wherecontains(local!selectedState, tointeger(local!cities.stateId))],
          value: local!selectedCity,
          saveInto: {
            local!selectedCity
          }
        )
      }
    )

Reply
  • Hi Sudip

    The key to this is the data model. You want to create data sets that can be related. There will be three sets of data:

    • Countries, with a key and a name e.g. '1' and 'USA'
    • States, with a key, a foreign key relating the State to a Country, and a name e.g. '1', '1', 'Colorado'
    • Cities, with a key, and a foreign key relating the City to the State, and a name e.g. '1', '1', 'Denver'

    Here's an example:

    a!localVariables(
      local!countries: {
        {countryId: 1, countryName: "Australia"},
        {countryId: 2, countryName: "United States of America"}
      },
      local!states: {
        /* States of Australia */
        {stateId: 1, countryId: 1, stateName: "New South Wales"},
        {stateId: 2, countryId: 1, stateName: "Queensland"},
        /* States of USA */
        {stateId: 11, countryId: 2, stateName: "Alabama"},
        {stateId: 12, countryId: 2, stateName: "Alaska"},
        {stateId: 13, countryId: 2, stateName: "Arkansas"},
        {stateId: 14, countryId: 2, stateName: "California"},
        {stateId: 15, countryId: 2, stateName: "Colorado"}
      },
      local!cities: {
        /* Cities of New South Wales, Australia */
        {cityId: 1, stateId: 1, cityName: "Sydney"},
        {cityId: 2, stateId: 1, cityName: "Wollongong"},
        /* Cities of Colorado, USA */
        {cityId: 12, stateId: 15, cityName: "Boulder"},
        {cityId: 13, stateId: 15, cityName: "Denver"}
      },
      local!selectedCountry: null,
      local!selectedState: null,
      local!selectedCity: null,
      {
        a!dropdownField(
          label: "Countries",
          placeholderLabel: "---Select a Country---",
          choiceLabels: fn!index(local!countries,"countryName", null),
          choiceValues: fn!index(local!countries,"countryId",null),
          value: local!selectedCountry,
          saveInto: {
            local!selectedCountry,
            a!save(
              {local!selectedState,local!selectedCity},
              null
            )
          }
        ),
        a!dropdownField(
          showWhen: fn!not(fn!isnull(local!selectedCountry)),
          label: concat(
            "States for ",
            local!countries.countryName[
              wherecontains(
                local!selectedCountry,fn!tointeger(local!countries.countryId))
            ]
          ),
          placeholderLabel: "---Select a State ---",
          choiceLabels: local!states.stateName[wherecontains(local!selectedCountry,tointeger(local!states.countryId))],
          choiceValues: local!states.stateId[wherecontains(local!selectedCountry,tointeger(local!states.countryId))],
          value: local!selectedState,
          saveInto: {
            local!selectedState,
            a!save(
              local!selectedCity,
              null
            )
          }
        ),
        a!dropdownField(
          showWhen: fn!not(fn!isnull(local!selectedState)),
          label: concat(
            "Cities for ",
            local!states.stateName[
              wherecontains(
                local!selectedState,fn!tointeger(local!states.stateId))
            ]
          ),
          placeholderLabel: "---Select a City ---",
          choiceLabels: local!cities.cityName[wherecontains(local!selectedState, tointeger(local!cities.stateId))],
          choiceValues: local!cities.cityId[wherecontains(local!selectedState, tointeger(local!cities.stateId))],
          value: local!selectedCity,
          saveInto: {
            local!selectedCity
          }
        )
      }
    )

Children
No Data