How to Use the Filter Component

This article shows site owners and design teams how to add a drop-down menu to a web page with the Filter component. 

The Filter component offers two key benefits:

• Drop-down menus are easy to create and require no coding skills.
• Site design. Drop-down menus occupy a tiny amount of space on a web page, which means you can provide visitors with plenty of menu options on a small digital footprint. 

 

Before you start

Before you build a drop-down menu with the Filter component, make sure you prepare two sets of resources in advance: a data set and data driven pages.

Data set

The data set is a spreadsheet that contains your raw source data. The Filter component dynamically pulls data from that spreadsheet and pushes it into a data driven page with a drop-down menu. 

• For more information, see: How to Create a Data Set Online.

This article works with a simple data set that lists all Australian state names and their codes (i.e. initials). The image below shows the spreadsheet with column headings (i.e. Name and Code) and rows of values.

 

Data driven pages

The Filter component creates a drop-down menu on a data driven page. The menu items are values from the data set. Each menu item links to a unique data driven page.

Here is an example.

The screenshot below shows how the Filter component fills the drop-down menu with Name values from the State data set. When the user selects an item in the drop-down menu, the Filter component redirects visitors to a data driven page that has a unique URL with the Code value that matches the Name value.

 

How does the Filter data set creates these unique data driven page URLs?

Through a process called data mapping.

Using our Australian States example, you tell the Filter component to put Name values in the drop-menu and Code values in the URL. That is data mapping. As we describe below, the key is to connect each column in the data set to the correct point on the data driven page.  

Without data mapping, you could manually create a separate web page for each item in the drop-down menu. That could take a long time.

We suggest you create data driven pages (DDP) with the Details template tool. With this tool, Sinorbis automatically generates a separate web page (and unique URL) for each record (i.e. row) in the data set. If you have many records  - or you plan on expanding the data set in the future - learning how to create data driven pages can save time and effort.

For more information, see:

• Overview of Data Driven Pages
• How to Create a Details Template

 

Opening the Filter component

The first step is to place a Filter component on a page. In this example, we start with a blank page, but you can place a filter on an existing page. 

1. Scroll down the Components list and drag the Filter component onto the page.

 

2. On the Filter Layout Picker window, click the X to remove the second drop-down menu. (optional) In this scenario, we create one drop-down menu.

The Filter component's default setting is two drop-down menus. Click the ADD NEW SELECT button to add drop-down menus.

 

3. Click the icons at the top of the window to customise how the drop-down menu displays on different devices. (optional) Click the plus (+) and minus (-) icons to change the width of the drop-down menu and Submit button.

 

4. Click OK to save the layout. The window closes, and the Filter component displays on the web page.

 

Customizing the settings

The next step is to adjust the Filter component settings.

1. Hover the mouse on the Filter component and click the Edit icon.

 

2. Hover the mouse on the Select your option field and click the Settings icon. 

 

3. On the Filter Select window, click the Label field and enter a new label. In this example, we change the label to State.

Remember the Label name. You need it later when you map data and customise the Submit button on the Filter Submit window.

 

Connecting to the data

The next step is to connect the drop-down menu to the data set.

1. Click the Options tab on the Filter Select window.

 

2. On the Options window, click the Edit icon.

 

3. On the Connect with Data window, scroll down the list and click the name of your data set. In this example, we click State.
4. Click OK. The window closes.

 

Adding menu items

In this step, you connect a data column to the menu. This column of data dynamically loads into the menu and displays as menu choices. 

1. On the Options window, click the data set icon.

 

2. On the Map to a Column window, choose the column you want to display in the drop-down menu. In this example, we click Name.
3. Click OK. The window closes.

 

Adding values

The next step is to assign a unique value from the data set to each option in the drop-down menu. These are the same values used to generate the data driven pages. In our example, the values are the state codes (e.g. nsw). The purpose is to identify a unique page per option.

1. On the Options window, check the box next to Different Values

 

2. Click the data set icon next to Values.

 

3. Click the field with the values that link to each item in the drop-down menu. In this example, we select Code. 
4. Click OK.

• A green light shows a proper connection with the data set.

 

Customising the Submit button

Up to this point, we have created a drop-down menu and dynamically linked it to a column in the data set. When a user opens the drop-down menu, the list of choices is automatically loaded from the data set. 

The next step is to update the settings for the Submit button.

1. On the web page, hover the mouse on the Filter component and click the Settings icon. 

 

2. On the Filter window, click the Filter Submit tab.

 

3. On the Filter Submit window, click the Edit icon next to Mapping.

 

4. Enter the drop-down menu Label in the blank field. This is the Label you created above in Customising the Settings.
5. Click OK.

If the auto-suggest tool displays two similar names, choose the Value option.

 

Saving and publishing

The data mapping work is complete.

1. Click Save.
2. Go to the top of the page and click the Publish button.

 

3. On the Please Confirm window, make sure the Filter component box is checked, and then click Publish Selected.

 

Viewing the results

1. Go to the Website Content page and click the page with the Filter component. In our example, that page name is Filter. The page displays on a new browser tab.

 

2. Click the drop-down menu and select an item. The drop-down menu shows the names from one column in the data set.
3. Click Submit.

• A new page opens in a browser tab. The URL contains the value from the data set.