Sometimes business logic can be represented adequately with text requirements or abstract diagrams. At other times, when the stakes are high and ambiguity is not an option, that logic should be built into your simulations.
In this tutorial, you will learn how to control the views in a dynamic display by creating “rules” that define the logic for determining which view is displayed. As you will see, these rules can be linked directly to a widget, or they can be based on data.
Watch this video for a brief demonstration of the topics covered in this tutorial.
If you completed the tutorial on Where conditions, you’ve already seen one example of rules in iRise. The rules we’ll be dealing with here are similar, but unlike Where conditions, which are set up specifically to govern data flow, these rules are used to define how simulation events are executed. These events include branching navigation (which is covered in the next tutorial) and alternate views.
Rules are defined in the Rules editor, which is launched from the Views panel when working with alternate views, and from the Events panel or a decision’s Branches panel when working with branching navigation.
Each rule listed in the Rules editor defines one possible outcome depending on the criteria selected in the fields above the rules. The first column indicates the Event, View or Branch; the second column indicates the criterion selected above; the third column contains a drop-down list for selecting an operator; and the fourth column is for entering a value, if applicable.
In the image above, the first rule would read as follows: the ‘TileList 1’ View will be displayed if the value of the ‘Product Name’ data field is not empty. Here it is phrased as an if/then statement: if a value for the Product Name field currently exists on the Clipboard, then the TileList 1 View will be displayed.
By now, you should have some experience in setting up a Switch Views action to control a dynamic display. This simple, yet powerful tool will meet your needs in most scenarios. There are two situations, however, where it falls short:
In both cases, rules provide a more flexible alternative for controlling the dynamic display.
Let’s start out with a simple example in which we give our reviewer the ability to use a drop-down list (Select widget) to choose from three alternate views. On a new blank page in iRise Studio, add a Section widget and give it a green background color. Then right-click the Section and choose Add View > Duplicate View. Give the new Section a blue background color. Repeat this once more, giving the third view a red background color.
Now add a Select widget in the vicinity of the dynamic display. Name the widget [color chooser] and add the following selection items: Green, Blue and Red.
Open the Views panel for the dynamic display. Name the display Colored Sections DD and name the views Green, Blue and Red.
Now click the Set Rules link. In the Rules editor, choose ‘Based on widget’ in the View is selected field. Then choose the [color chooser] widget in the Criterion field. Finally, in the last column for each rule, type the value that corresponds to the name of the View. Your rules will end up looking like this: :
Test the rules by launching the page in your browser and choosing different options from the Select widget. The color of the dynamic display should change with each new selection. Note that no page refresh or data capture is required to trigger the event.
To introduce the use of data to control a dynamic display, we’ll make some slight modifications to the interaction we just created. Rather than linking the Select widget directly to the dynamic display with rules, we’ll capture data from the widget and use that to define the rules that control the display.
First, we’ll need to wrap the Select widget in a Form so we can capture data. Right-click the widget and choose Wrap In > Form. Don’t forget to increase the size of the Form widget or configure its scroll settings so scroll bars don’t appear in the browser.
Now add a Clipboard widget to the canvas on the right side of the page. Drag the Select widget and release it on the Clipboard widget, choosing Send data when prompted. Type Color choice in the Select a Field window and click OK.
Finally, connect a Submit Form action to the Select widget, making sure to move the trigger to ‘On change’.
Now we can modify the rules associated with the dynamic display. Open the display’s Views panel and click Edit Rules. Change ‘Based on widget’ to ‘Based on data’, and then select ‘Color choice’ as the Criterion. Everything else can stay the same. Your rules will end up looking like this:
You will notice after you close the Rules editor that a Clipboard widget was automatically added to the canvas on the left side of the page, connected to the dynamic display by a data flow line labeled with a ‘V’.
Test the modified rules by launching the page in your browser and again choosing different options in the Select widget. The only difference you should notice in the interaction’s behavior is a slight flicker while the page refreshes.
To illustrate these concepts in a more realistic scenario, let’s revisit the page you built over the last two tutorials. As we’re sure you noticed, the Product List page loads with no search results displayed, which in a real application might leave a user scratching her head. Let’s resolve this issue by creating an alternate view that displays a message when no product matches are found.
Note: This section does rely on your having completed one of the previous two tutorials.
We’ll start out by creating the alternate views. Right-click the border of the Tile List and choose Add View > Add View. An “Empty View” will be created. Drag a Section widget inside the boundaries of the Empty View and resize the Section to approximately the same dimensions as the Tile List in the other view. Near the center of the Section, add a Text widget containing the phrase No products found.
In the Views panel, name the display Matches / No matches DD, and name the Views Matches and No matches. Setting a default view is unnecessary, because the view that gets displayed will always depend on the rules we are about to set up.
To set the Views criterion, we’ll drag the Get PRODUCTS widget that is populating the Tile List to whichever view is currently displayed on the page (note: if you are dragging to the Tile List, release the Record widget outside of the main Tile). In the menu that pops up, choose ‘Set Views criterion’.
In the Select a Record or Field pop-up window, select ‘Record’ on the left, and then the PRODUCTS datasheet on the right. Click OK. A data flow line labeled with a ‘V’ will connect the Record widget to the dynamic display.
Finally, we’ll update the rules. Open the dynamic display’s Views panel and click Edit Rules. When the Rules editor opens, you will see that part of our work has been done for us, but we need to make one change.
The rules will evaluate whether or not any data Records are flowing into the display. To do this, we’ll change the operator for each rule. In the first rule, expand the drop-down list in the third column and choose ‘Is not empty.’ Do the same for the second rule, but choose ‘Is empty.’ Your rules will end up looking like this:
Test the rules by launching the page in your browser. Since no matches appear when the page loads, the “No matches found” message should appear. Make a selection in the Type (Category) filter and confirm that the display changes to show the matches. Now change one of the other two filters to remove the current matches. Confirm that the display changes back to the “No matches found” message.