Filtering data using tree navigation

With Justinmind, you can filter values in your Data List using tree navigation.

filter-using-tree-menu-gif

To filter data using tree navigation, follow these steps: 

  1. 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. 
    • Click “OK”.
  2. 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”.
  3. Now drag a Data List widget to the screen.
    1. 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 palette and add an “On Click” + “Set Value” event.
    • Select the Data List and click “Calculate”. Build the expression displayed in the image below, by dragging the “Filter” function and the Data Master to the conditional expression.
    • 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 criteria for the “Filter” expression.

And that’s all. Click “Simulate” to interact with your prototype.

You can  download our example here.