How to use cascading dropdowns

Applies to: Online Creator

A cascading (or dependent, or filtered) drop-down list lets users choose among a large number of options by 'drilling down' through multiple lists. A typical example would be a first dropdown to choose a state and a second  dropdown to choose a city in that state. The cities shown in the second list depend on the state chosen in the first list. 

The Formotus form creator lets you build cascading dropdowns based on an online data source such as a SharePoint list, or an attached data source such as an Excel file.

Creating your cascading dropdowns

To begin:

  1. Create a new form in the form creator.
  2. Add three dropdown controls to the form.
  3. Add a data source with columns that will populate your dropdowns. (More info on adding lists is later in this article.)

For this example we will be using a list from SharePoint that looks like this:

As you can see we have three different columns: Title, Category, and Item Name. These columns correspond to three dropdowns in our form. When the user chooses "Food" for example, then the second dropdown will show "Fruit" and "Vegetable", a choice that will in turn determine which items show in the third dropdown.

To do this in the form creator I will select my first dropdown, select Data Source from the Items section, and then click Edit Data Source

Here I chose the Data source that I want to query from (Yum), the value that I want the dropdown to contain (Title) and the Display Name. Normally your Value is the same as your Display Name. If you want to make sure there are no duplicates in your dropdown, select Show unique values only. Since this is our first item, we do not want these values to be filtered, so we will not select the Enable Filtering.

In our second dropdown, we do want these values to be filtered based on the value in the Title dropdown, so we select Enable Filtering

Next, all that needs to be done in the conditions is to check whether the dropdowns that filter the current dropdown have a value. So in our condition we are simply going to run the check that the Title dropdown has a value.

In our third and final dropdown, we essentially repeat the steps above. Fill out the top section of the third dropdown with the basic information that corresponds to it, and then check Enable Filtering. However, since the selections of this dropdown will be based on the values of both of the two previous dropdowns, we need to have two conditions here. The conditions will simply check to make sure that Title has a value, and that Category has a value.

Make sure you Save & Publish, and try out your new cascading dropdowns!

Importing a List

To import a list into an existing Formotus form, open the form in the form creator, select the Query tab under Data, and click +DATA SOURCE. You can import an .xml file, an Excel sheet, or a list from SharePoint. 



Importing a List (.xml or Excel)

If the list you want to query from is an .xml file or an Excel file, select the first option and you will be prompted with the following screen.



Select the Upload button and browse for your excel sheet.   You can also select the Query on data load checkbox if you would like the data to be retrieved as soon as a new draft of your form is opened.

You can then link this data source by selecting a dropdown control, and choosing External data source in the Items dropdown.  Then select the EDIT DATA SOURCE button.


In the next wizard, Select the excel Data source you added, then the Value and Display Name.  If your excel sheet has multiple columns, you can choose one to be the Display Value (what shows in your form) and one as the Value (the value that shows in your backend); otherwise they may be the same.

Importing a List (SharePoint)

Choosing to query a list from SharePoint will display this screen.

First, choose what to Query from by selecting either SharePoint Library or SharePoint List, then enter a Name for this data connection, next copy and paste the URL from SharePoint into the URL box. Next, enter your SharePoint User Name and Password, click CONNECT. Be sure to check the Query on load box if you want to use that feature. 

You can allow all of your mobile users to use the same encrypted credentials to submit their data to your SharePoint server.  The mobile users do not have access to the credentials, however the form will submit securely.  Click the Attach Credentials box, to enable this feature. 




Tags: cascading drop, filtered drop, dependent drop, FormDesigner


Have more questions? Submit a request


Article is closed for comments.