Learn how to prototype web and mobile apps

How to filter Data Lists using a tree menu in your web prototypes

Download an example here.

In this tutorial, you will learn how to filter the values in a Data List using a tree menu in your interactive prototypes.


1) In a web prototype, go to the Data Masters tab and create a new Data Master. Name it ‘Flights’ and create three fields: Airline, Depart to, Terminal. Click OK.

2) Double-click on the Data Master you’ve just created and select the tab ‘View and edit records’. Write some example data there and click OK.

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

4) Drag a Tree widget and add a third node to it.

5) Now select the first node of the tree, go to the events tab and add an ‘On click’ + ‘Set value’ event. Select the Data List and click on ‘Calculate’. Build the expression displayed in the image below, by dragging the data function FILTER and the Data Master to the expression builder. In the last value, write T1.


6) Click OK twice. Copy the action on the other two tree nodes, but remember to set different texts (i.e. T2 and T3) as criterias for the FILTER expression. And that’s all! You can now click ‘Simulate’ and enjoy!

Next tutorial > How to filter Data List columns