Variable dropdown items

Let's say you want to make a form with dropdowns for state -> city selection.
This is a problem with fixed values in dropdowns, because the content of cities' dropdown depends on the selected state.
For this example, we will use a JSON file as API directly from GitHub containing Brazilian cities (Cidades) and States (Estados)

Step 1: Setting up the connectors

Add a rest API with this base url:
and following methods:
GET /Estados.json
GET /Cidades.json

Step 2: Adding variables

Add 3 variables:
  • states: Array/List -> used for store the list of states
  • cities: Array/List -> used for store the list of cities
  • selectedState: Text -> used for store the id of selected state

Step 3: Grabbing the list of states and cities

At the page start, you can add an action to fetch the states and cities list

Step 4: Configuring the dropdowns

States dropdown -> variable
States dropdown -> options
$.states.map(state => ({
value: state.ID,
label: state.Nome
Cities dropdown -> options
$.cities.filter(city => city.Estado === $.selectedState).map(city => ({
label: city.Nome,
value: city.ID