Learn how to prototype web and mobile apps

How to filter Data List columns in your web prototypes

In this tutorial, you will learn how to filter Data List columns, using the FILTER data function and a Select list in the header in your interactive prototypes.

You can download the below example here.

How to filter Data List columns in your web prototypes

1) In a web prototype, go to the Data Masters tab and create a new Data Master.

2) Name it ‘cars’ and create four fields: model, year, manufacturer and color. For the ‘manufacturer’ field, select the ‘category’ type, and edit the values by selecting the field, clicking on the gear button on the right-hand side, and typing in the manufacturer field values. In the same window, select ‘list box’ as the default type for this field. Click OK twice.

3) Double-click on the Data Master you’ve just created and select the tab ‘View and edit records’. Write some example data there.  As for the category, select the correspondent value in the drop-down list next to each field. Click OK.

4) Now drag a Data List widget to the screen. Name it ‘cars’ and select the Data Master and all its fields. 

5) Now select the header of the Manufacturer column. Be sure you have selected the entire cell, not only the text that is in it. Go to the properties panel and make sure that the ‘layout’ is set to ‘free layout’. Make the row taller, and drag a drop-down select list into that cell, just below the text.

6) Select the drop-down select list, go to Properties and define as values the manufacturers you created in your Data Master, by clicking on ‘Edit values’ and selecting the relevant Data Master field. You can have a look at this tutorial to understand better how to display Data Master records in a selection widget


7) Go to the Events tab and add an ‘On change’ + ‘Set value’ event. In the events dialog, select the Data List as the component that will display the value, and click on ‘Calculate’. Now build the expression displayed in the image below, by dragging the FILTER data function, the Data Master, the ‘manufacturer’ Data Master field, the text function HAS, and finally the Selection list to the expression builder:


And that’s it! You can now click on ‘Simulate’ and enjoy!

Next tutorial > Learn how to sort Data List columns