Cascading drop downs

Lets explore how we can make one drop down menu filter another drop-down menu

Updated over a week ago

In previous articles we discussed how you can filter a SharePoint data source. Lets take this a step further and show how you can get one SharePoint drop-down menu to filter another one (aka cascading drop-downs).

To filter one drop down based on another drop down you need to set the filter query on your SharePoint Datasource to reference the response of the previous drop down.

Advanced Filter Query

The filter query setting is located in the data tab of your SharePoint Data component. This setting allows you to write JavaScript code that will run for each row of your datasource. Your JavaScript code simply needs to set the show variable to control weather or not a row is visible in your drop-down menu. Additionally your JavaScript code can access the responses to other questions via the data variable and the current row in your datasource via the item variable.

For the example, the code used to filter the second drop down menu based on the first is described below.

show = item.Make === data.model.Make

The code may be a little confusing at first glance, however lets deconstruct it.

To help in determining the right side of the expression you can use the code view on the preview screen as show below.

Additionally you can use the Sample Item to help determine the left side of the formula. In this case item.Make

Did this answer your question?