Cascading dropdown filters

Example: Filter a city picker by the chosen country of another options picker

Try it out!

Scenario

You have a Country table and a City table, with a relationship defined between them as One Country -> Many Cities.

Your form will have an Options picker that will allow the end-user to select a country, which will then populate a second Relationship picker with the cities that relate to the chosen country.

Challenge:
β˜…β˜…β˜†β˜†β˜†

Steps

  1. Add component: Form
  2. In the Settings Panel, set Schema to 'Country'
  1. Add component: Data provider
  2. In the Settings Panel, set Data to the 'Country' table
  3. Set the Limit to 200, and untick Paginate
  1. Add component: Options Picker
  2. In the Settings Panel, enter 'Country' for the Field, and add a Label
  3. Tick Autocomplete
  4. Set Options source to 'Data provider'
  5. Set Label column to 'country' and set Value column to 'country_id'
  1. Add component: Relationship Picker and select the 'Cities' from the Field dropdown
  2. Click the button beside Filtering
  3. Add filter:
    1. 'country_id' Equals Binding {{ Form.Fields.Country }}
    2. Be sure to Save
  1. Click on the Conditions tab and click Configure conditions
  2. Add condition:
    1. 'Update Setting Disabled' TO [βœ“] IF {{ Form.Fields.Country }} 'Is empty'
    2. Be sure to Save

πŸ‘

Layout

Use Field group layouts or Containers to align the pickers as desired.

More on field layout in this recipe: Display multiple fields in one row

  1. Finally we want to clear the selected cities when the country changes. Click on the Country Options Picker, and click the button beside the On change setting
  2. Add the Update Field Value action:
    1. Select the Form
    2. Set Type to 'Reset to default value'
    3. Select the 'Cities' Field from the dropdown
    4. Be sure to Save


App export

Downloads may take a few seconds.