In this guide, you will learn how to apply a two-tiered filter to a dataset.
The filter component pulls in values from the data set, displays them in a dropdown menu and when a value is selected, the system will display the corresponding pages.
For example, you can apply a filter component to a dataset that contains all the Australian states, which will list the state names in a dropdown menu. Then, if you select a state name from the list, you will be redirected to the corresponding page.
Two-tiered filtering allows a parent-child relationship within a dataset. For instance, you can select state name as the primary filter and city name as the secondary filter, e.g. you can select New South Wales (NSW) and the second filter will display the city names – Sydney, Dubbo, etc.
In other words, dual filtering allows users to narrow down the results more effectively and find the page they want more quickly.
To set up a single filter component, see:
The following steps allow you to set up a dual or two-tiered filter component:
- Create a dynamic view for the first filter
- Copy API authorization
- Connect the first filter data set
- Connect the second filter data and authenticate
- Map the data for the second filter
- Map the URL to the data driven pages
- Save and publish the page
Before you follow the steps set out below, you need to have a data set and data driven pages prepared.
1 Create a dynamic view for the first filter
Click on Website in the main title bar. Click on Content in the left-hand menu bar and select Data.
If you don’t have a dataset already set up, please refer to this article:
Alternatively, you can import data from an Excel file into a dataset, see:
Click on the Filter dropdown menu positioned above the dataset. Click on Add Filter.
A window titled Add New Filter will appear. Here we can choose the conditions for the filter. In this example, we want to allow the website user to filter the data down to the universities that are in a specific state. The first filter must be set as a dynamic value as the user will enter a state into a search box.
Therefore, we select the field Location, with the condition Equals. We leave the value box blank and check the box next to “This filter uses a dynamic value” to indicate that the value will change depending on the search term entered by the user.
Click OK to apply the filter.
Next, we need to save the current view. Click on Add View in the View dropdown menu.
Name the view Location Dynamic and click OK.
Re-apply the filter if necessary, then click Save View and Save.
2 Copy API authorization
Click on Data in the left-hand menu bar again and then click Manage Authentication.
Allow access to the dataset by checking the box next to the relevant dataset name. This will allow the system to pull data across from the corresponding datasets. Also, highlight the API key string and copy it to the clipboard. Click Save.
3 Connect the first filter data set
Click on Manage in the Content menu. Hover over the page that you want to add the filter to and click Edit.
On the Edit Content screen, select components in the left-hand menu bar and click on Filter. Drag the component over to the website layout and place it in the desired location.
Select the layout you want to use for desktop, tablet, or smartphone. Click OK.
Next, click on the filter in the website page layout window. Click the edit icon on the right-hand side.
Then, click on the first filter dropdown menu and click the settings icon on the left-hand side.
In the Filter Select window that opens, change the label (in this case we use “State”), then click on Options.
Click on the icon next to Connect with Data.
Select the data you want to connect with the filter from the list on the left-hand side. Click OK to connect the data.
Click the settings icon in the Filter Select for the first filter. Select Options and this time click the data set icon next to Options.
Select the data set column that you want to apply to the first filter. In this example, we select Location.
4 Connect the second filter data and authenticate
Select the settings icon for the second filter.
Select Options, then Connect with Data.
Select the data you want to filter from the list on the left-hand side. In this example we select University. Then select the Location Dynamic View that we set up in step one from the dropdown menu. This will apply the condition applied for fetching the value. Paste the API key that we copied in step two to authenticate the data. Click OK.
5 Map the data for the second filter
In a similar way to the first filter, we will map the values that we want show using the dropdown menu that corresponds to the first filter. Firstly, select the relevant column and click OK.
6 Map the URL to the data driven pages
Finally, you need to map the URL. Click on the settings icon in the top left hand corner of the filter box.
Click on Filter Submit.
Click the edit icon next to Mapping.
Here you can add URLs of data driven pages that are already created. In this example, each data driven page will provide details of the different universities.
If there is no data driven page, when the user clicks on the submit button, they will be redirected to a 404 error page.
The second filter is now set up. When a user selects a state, the second filter will automatically display options from the chosen state only.
7 Save and publish the page
Save the configuration by hovering on the filter and clicking Save.
Finally, click Publish at the top of the screen to publish the page and you're done.