Tersus: Demo Stage 8 – Filtering: Controlling which items to show

Demo Stage 8 – Filtering: Controlling which items to showDate: May 31, 2023When the list of items gets longer, we may want to view each time only the items belonging to a specific category.FilteringThe Table Wizard makes this very simple:

In '<Desktop View>', right click on

'Items' and select Apply Table Wizard.

In the 'Filtering' column of the wizard, select Exact for the 'Category' field.

Press 'Finish'.

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:

Getting Rid of 'Got It'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.

Zoom into

'Items', and then into 'Init/Init Display/Init Display by Configuration/Init Table by Configuration/Init Table Header by Configuration'.

Zoom into 'Init From Filter Row Visibility' and create a flow from the 'No' constant to the '<Visible>' element of 'Got It':

Do the same in 'Init To Filter Row Visibility' (see below what the 'From' and 'To' rows are).

If you now save your model and restart the application, you'll get a cleaner screen layout:

Filtering Range ('From' and 'To')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:

Right click on

'Items' and select Apply Table Wizard.

In the 'Filtering' column of the wizard, select Range for the 'Qunatity' field.

Press 'Finish'.

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):

Improve the iPhone/Android DisplayThe 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:

'Items', zoom into 'Table Row' and then into 'Quantity'.

Set the html.size property of 'Quantity' to 5.

Save the model.

Download Model: Stage 8 (version 2.1.9)Try It Online: iPhone/Android iPhone Preview Desktop View Next: Publish-Subscribe ImprovementsSee Also:

To use the full functionality of this web site, JavaScript needs to be turned on.

For best results, use the Firefox browser..

Loading ...