When the list of items gets longer, we may want to view each time only the items belonging to a specific category.
The Table Wizard makes this very simple:
If you now save your model and start the application, you will see an additional row at the top of the table. If you select a category in this row and press 'Refresh', only matching items will be displayed. For example, if you select 'Dairy', only items with the category 'Dairy' will be displayed:
Filtering works nicely, but the 'Got It' button at the filtering row is completely out of place.
It appears there because the filtering row is a re-use of the table row. We need to hide it when the row is used for filtering.
If you now save your model and restart the application, you'll get a cleaner screen layout:
The filtering we have made was an "exact match" - displaying only items matching the exact values specified.
More flexible filtering can be achieved by specifying ranges of values. For example, we may want to list all items with Quantity 2 or more, only items with Quantity between 2 and 5, or only items with Quantity 5 or less.
To activate such filterings, we use two filtering rows instead of one. The first row (the 'From' row) is used to specify the lower limit of the range of values, and the second row (the 'To' row) is used to specify its upper limit:
If you now save your model and restart the application, you will be able to specify a ranges of values for filtering. For example, here is how to list all items with Quantity 2 or more (press 'Refresh' to apply the updated filtering conditions):
The screen layout doesn't look very good on smartphones. The Quantity column wastes too much space.
We can improve the display by reducing the width of the Quantity column:
Download Model: Stage 8 (version 2.1.9)
Try It Online: iPhone/Android iPhone Preview Desktop View
Next: Publish-Subscribe Improvements
For best results, use the Firefox browser..