Filtering a Data List through a column header

With Justinmind, you can filter Data List columns, using the “Filter” function and a Select List in your prototype’s header.

filter-data-list-columns-gif

 

 

 

 

 

 

 

 

 

 

 

 

 

 

To filter a Data List through a column header, follow these steps:

  1. In a web prototype, go to the Data Masters palette 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 “View and edit records” tab.
    • 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 palette 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.
    • How-to-filter-Data-List-columns-in-your-web-prototypes-expression
  7. Go to the Events palette 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” function, the Data Master, the “manufacturer” Data Master field, the “Has” function, and finally the Selection List to the expression builder:
    • How-to-filter-Data-List-columns-in-your-web-prototypes-values

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

You can download our example here.