Filtering data using tree navigation
With Justinmind, you can filter values in your Data List using tree navigation.
To filter data using tree navigation, follow these steps:
- In a web prototype, go to the Data Masters palette and create a new Data Master. Name it “Flights” and create three fields: Airline, Depart to, Terminal.
- Double-click on the Data Master you’ve just created and select the “View and edit records” tab. Write some example data there and click “OK”.
- Drag a Data List widget to the Canvas. Name it “Flights” and select the Data Master you just created and all its fields to populate the Data List.
- Drag a Tree widget to the Canvas and add a third node to the element.
- Select the first node of the tree, go to the Events palette and add an “On Click” + “Set Value” event, selecting the Data List as the target of the action. For the value, select the ‘Calculated’ radio button, and the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.
- In the Calculated Expression builder, drag the ‘Filter’ function to the open space in the expression. Next, drag the Data Master to the first open space that appears. Type in “T1” in the last open space.
- Copy the action on the other two tree nodes, but change the text in the last space in the ‘Filter’ expression (i.e. T2 and T3).
Click “Simulate” to interact with your prototype.
You can download our example here.