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 online 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 online 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 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". In the

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 the TWO previous dropdowns, we need to have 2 conditions instead. The conditions will simply check to make sure that "Title" has a value, and that "Category" has a value.

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

Importing a List

To import a list into an existing form in the creator, select the "Query" tab under "Data", and click "+Data Destination". 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.

Choose which type of list you are querying from, select the file, and assign a name to this data destination. You can also select the "on load" checkbox if you would like the data to be retrieved as soon as a new draft of your form is opened.

Importing a List (SharePoint)

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

First, Select whether you are importing a Library or a List from SharePoint and copy and paste the URL from SharePoint into the "URL" box. Next, enter your SharePoint credentials, click connect, and choose whether or not you would like the data to query on load. If you want all users of your form to login automatically using these same credentials, select "Attach Credentials".



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


Have more questions? Submit a request


Article is closed for comments.