Filtering Data Records

A very common use case when displaying data records involves the use of one or more "Where Conditions" to filter the records being displayed. This is one method of applying business logic in your simulations.

In this tutorial, you will learn how to use the reviewer’s selections in a set of user input widgets as the criteria for determining which records should be displayed in a Tile List.

Watch a Video

Watch this video for a brief demonstration of the topics covered in this tutorial.

What is a Where condition?

Where conditions allow you to modify the criteria that control which records are affected by Update, Delete and Get Record actions. They are set up specifically to govern the way data records are displayed or modified in your simulation.

How do I create a Where condition?

There are two methods of defining Where conditions: by using the Where dialog, or by choosing Add “where” condition in the pop-up menu that appears when creating data flow from a data producing widget (e.g., a Clipboard, a User Input widget, or a Get Record widget) to a Record widget. When you use the latter method, the only additional step is selecting a field or record. Once you have done that, the rule is created for you.

Add Where condition pop-up menu item          Get Record widget properties

To use the Where dialog to create or edit Where conditions, you would click the Where button in the Record widget’s Properties panel.

The Where dialog

The Where dialog presents a list of “rules” that make up the criteria for applying the Record action. Rules created using the method above will automatically appear in this list. To create a rule from scratch, click the Add Rule button. Note that you can choose whether all or any of the rules must be met for the Record action to be applied.

The first column shows the name of the field that will be used for the rule. You can choose the name of any column in the datasheet.

The second column is the operator for the rule. Some example operators are “equals”, “contains” and “is greater than”.

The third and fourth columns work together to determine the source of data for comparison. The third column determines how you want to gather the value to which the field in the datasheet will be compared. What you choose in the third column controls what you see in the fourth column. The options for the third column are:

Employing user input to filter the records displayed in a Tile List

Our goal in this tutorial is to enable our reviewer to customize her view of the items presented in a product list by applying a series of filters. If you have ever searched for a product in an online storefront, you have probably encountered a similar interface.

Create the Tile List

We’ll start out by creating the Tile List that will display our data. Drag a Tile List widget from the Widget Toolbar and release it on a blank page in your simulation. Name the component “Phone Search – Tile List” in the Properties panel. The rest of the Tile List’s properties can remain unchanged.

Inside the Tile, add five Text widget placeholders. Your page should end up looking something like this:

Tile List layout

Capture the user input values

Each time the reviewer makes a selection from one of the filters, we’ll want to refresh the results displayed in the Tile List. To do this, we’ll need to wrap the user inputs in a Form widget and submit the form with each selection.

First, we’ll enclose the Select widgets in a Form by selecting all three, right-clicking and choosing Wrap In > Form. Then we’ll add a Submit Form action to the canvas and connect it to each of the Select widgets. Right-click each of the three resulting navigation lines and choose Move to > On change. Now the form will be submitted each time the reviewer makes a new selection in any of the three Select widgets.

Finally, add a Clipboard widget to the canvas and use it to send data from each of the Select widgets to the Clipboard. So the Select widgets retain their new values after a page refresh, add a second Clipboard widget to the canvas and drag it to each of the Select widgets, selecting the corresponding field name for each one.

The top portion of your page will now look something like this:

Filters applied

Add Where conditions to filter the data flow

Now we’re ready to add the Where conditions that will filter the records flowing into the Tile List.

First, let’s filter on Price. Drag the Price field label — the one on the far left in the image above — and release it on the Get PRODUCTS widget that’s being used to populate the Tile List. Two things happen: a data flow line labeled with a ‘C’ now connects the field label to the Record widget, and the Record widget no longer contains the word ‘ALL’. If you select the Record widget, you will see in the Properties panel that the following Where condition now appears: “Price equals [price].”

Repeat the process above for the Weight field, and again for the Category field. Then select the Get PRODUCTS widget, and click the Where button in the Properties panel to open the Where dialog.

Two of the rules that were created for us have a problem. The operator for the rules associated with the Price and Weight fields is currently ‘equals’, which will not give us the results we want. Expand the drop down list in the second column for the Price and Weight rules, and choose ‘is at most’. When you close the Where dialog, the Where conditions in the Properties panel will look like this:

Where conditions in the Properties panel

Test your simulation

Launch the page in your browser. At first, the page will load with no results displayed under the filters. To get some results, you will need to make a selection in the Type (Category) filter. Each selection in this field will give you different results. Now test the other two filters.

If the Where conditions are working as expected, each selection in the Price and Weight filters should narrow down the results you received after choosing a phone Category.

Optional enhancement – improving the user experience

As it is currently laid out, the interface on this page is not very intuitive. To improve the user experience, you could move the Category filter up on the page and present it as “Step 1″ in choosing a phone. Taking this even further, you could hide the Price and Weight filters until a selection is made in the Category filter.