Learn to use conditional logic to demonstrate flow based on user entered values.
Conditional Logic Overview
A well written case description is an effective method to communicate conditional logic or flow and is very easy to maintain and update. However, there are times when you may not want to ask the user to select a description in the prototype in order to demonstrate the cases.
By adding conditions to your interaction cases, you can evaluate values and perform actions based on those values without further input from the user.
Add Conditions to Interaction Cases
To add a condition, first add a case to an event in the interactions pane. In the Interactions Case Properties dialog, click the “Add Condition” link under Step 1.
This opens the Condition Builder dialog, where you construct a condition expression using the dropdown lists and field inputs.
An easy way to look at this is to break up the expression into three parts: The two items being compared and the type of comparison. In other words,
[One value] + [how does it compare] + [To another value].
In more detail, the first and second fields are the type of value to check and the widget or variable you are checking. The third field is the type of comparison (i.e., equals, does not equal, etc.). And, the fourth and fifth fields are the type of value and the value you are comparing to.
You can build the conditions using the following types of values:
Is checked of: the check state of a checkbox or radio button
Selected option of: the selected option of a droplist or list box
Value of variable: the value currently stored in a variable
Length of variable value: the number of characters in a variable value
Text on widget: the text entered in a form field
Length of widget value: the number of characters in the text on a form field
State of panel: the current state of a dynamic panel
Visibility of panel: whether a dynamic panel is currently visible or hidden
Add Multiple Conditions
To add more conditions to a case (i.e., “text on widget Username Field equals ‘stringerbell’” AND “text on widget Password Field equals ‘realestate'”), click the “+” button in the Condition Builder dialog. To remove conditions, click the “-” button.
If all the conditions need to be met (an “and” statement), set the droplist at the top of the dialog to “Satisfy all of the following” (this is the default). If just one of the conditions need to be met (an “or” statement), set the droplist to “Satisfy any of the following”.
Click OK to return to the Interactions Case Properties dialog. Select and configure the actions to perform if the condition(s) is met.
When you add a condition to a case, the description in the Interactions pane includes the “If” statement describing the condition, and the icons on the Event are highlighted in green.
Example - Login (
RP File |
Prototype )
See an example of a login button that uses conditional logic to determine if the username and password entered are valid and responds accordingly. Follow the instructions in the file to try it yourself.
Tip: You can mask the text on Password Field by right-clicking and selecting Edit Text Field->Mask Text.
Understanding Multiple Cases with Conditions
You can add multiple cases with conditions to an event to demonstrate the various responses to the event. By default, each case after the first is an “Else If” statement. If there is not a condition on those cases, the description becomes “Else If True”. In the prototype, the event goes in order through the cases and executes the first case where the condition is met.
You can also setup the event so that multiple cases are performed if multiple conditions are met. To do this, you can change the “Else If” statements to “If” statements. Right-click the case in the Interactions pane and select “Change to If”. An example of when this is useful is on the OnClick of a Submit button for a form where each field is verified independently. "If" cases can be created for each field validation and error messages displayed accordingly.
Summary
So now you can create a working login form. How about setting a dynamic panel state based on a droplist selection? If you're in a pickle and need some more details, shoot an email to support@axure.com.