Cascading Dropdown Filters

 

 

About

You can use data source filters in tandem with ProntoForms' ability to auto-populate answers from a data source to narrow down the number of available answers in a dropdown question displayed to your mobile users. This is useful if, for example, your mobile users are working in a particular city, but are unsure of their contact's name and need to narrow the list to that city.

These can also be stacked to create a cascade effect: the answer to Question 1 limits the available answers in Question 2, which in turn limits Question 3.

This can also be done using Data Source Partitions on a broader level.

[ top ]

 

Use Case

We have a basic customer list data source with a number of header fields:

2020-01-02-CascadingFilters01.png

We want to create a form where our mobile users can search and filter first by province, select a city in that province, then a select a customer. When they select a customer after these filters, the form will auto-fill the Customer Address, Phone Number, and Email Address. 

[ top ]

 

How to Build Cascading Filters in the Form Builder

  1. In the Form Builder, create a Dropdown question and navigate to the Options tab.
  2. Select User Data Source for Options, then select the desired Data Source
  3. Set the Column displayed in dropdown to what you want to have displayed to your mobile users. In this case, we want our users to select a province first to narrow down the options:
    2020-01-02-CascadingFilters02.png
    Note: If you are filtering on a common, repeated piece of data (for example, state or province), you may want to select Hide duplicate options.

  4. Create a second question that will be filtered based on the first question's answer. In this case, we're letting users choose a City in whichever Province they've selected first. Once you have created the question, select Filter Options.
  5. Select the data source column that the filter should be based off of. In this case, we are filtering based on the answer to the Province question:
    2020-01-02-CascadingFilters04.png
  6. Enter the information under Filter column. The first dropdown allows you to select which data source column you wish to filter on, then the operator, and then either a constant typed into the Filter Options, or a previous question's answer.
  7. Repeat until you reach the desired filter level. In our example, we have one more dropdown question (Company Name) that will be filtered by the answer to the City question. On the final question, select Push Data to Other Questions:
    2020-01-02-CascadingFilters05.png

    Add as many additional answers as you wish to have auto-populate, and associate the desired Source Columns with the questions to be populated.

[ top ]

 

Using Filtered Questions on the Mobile App

This uses our example above to demonstrate the workflow for the filtered questions.

2020-01-02-CascadingFilters06.png

  1. Select a Province (in this case, AB for Alberta).
    2020-01-02-CascadingFilters07.png

  2. Tap on City. All cities displayed are located in Alberta. We'll select Calgary in this example:
    2020-01-02-CascadingFilters08.png
  3. Tap on Customer Name (Click to Select). All customers listed are located in Calgary. When you select one of the customers listed, their information will auto-populate the final four questions.
    2020-01-02-CascadingFilters09.png

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments

  • Avatar
    Leo Lui

    It is great! Brilliant! Perfect to solve my question!!!