Cascading dropdown filters

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.

---

Steps

1. Add component: Form
2. In the Settings Panel, set Schema to 'Country'

3. Add component: Data provider
4. In the Settings Panel, set Data to the 'Country' table
5. Set the Limit to 200, and untick Paginate

6. Add component: Options Picker
7. In the Settings Panel, enter 'Country' for the Field, and add a Label
8. Tick Autocomplete
9. Set Options source to 'Data provider'
10. Set Label column to 'country' and set Value column to 'country_id'

11. Add component: Relationship Picker and select the 'Cities' from the Field dropdown
12. Click the button beside Filtering
13. Add filter:
    1. 'country_id' Equals Binding {{ Form.Fields.Country }}
    2. Be sure to Save

14. Click on the Conditions tab and click Configure conditions
15. 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

16. 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
17. 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.