Filtering a Data List through a column header
With Justinmind, you can filter Data List columns, using the “Filter” function and a Select List.
To learn how, follow these steps:
- In a web prototype, go to the Data Masters palette and create a new Data Master. 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.
- Double-click on the Data Master you’ve just created, select the “View and edit records” tab, and write some example data there. Select some values in the drop-down list next to each record for the Manufacturer field.
- Drag a Data List widget to the Canvas. Name it “Cars” and select the Data Master you just created and all its fields to populate the Data List.
- Select the header row (Row_cell_3 in our example) and drag down to increase its length. Then, drag a drop-down select list into that cell, just below the text.
- Select the Select List, go to the Properties palette, and click “Edit values”. Type in the same values you added for the Manufacturers field records in your Data Master.
- With the Select List selected, create an “On Change” + “Set Value” event, selecting the Data List as target of the action. For the value, click the ‘Calculated’ radio button, and the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.
- In the builder, follow these steps to create the expression:
1. First drag the ‘Filter’ function to the open space in the expression.
2. Click to the Data Master tab in the builder and drag the Data Master to the first space in the expression.
3. Drag the “Manufacturer” Data Master field to the second space in the expression.
4. Drag the “Has” function next to the “Manufacturer” attribute to the expression.
5. Finally, drag the Select List within the Data List in the builder Canvas next to the “Has” function.
And that’s it! Click “Simulate” to interact with your prototype.
You can download our example here.