A well written case description is an effective way to communicate conditional logic or flow, and is easy to maintain and update. However, there are times when making the functionality work as it would in the final app, can help with the design process or user testing.
For example, let's say we want to show a picture of a fruit based on the value selected in a droplist. You could create a dynamic panel with states containing the images of fruit. When the value of the droplist is changed (OnChange) you can define conditional logic in the cases to evaluate the value in the droplist (if selected option of Fruit Droplist equals 'apple') and set the dynamic panel state accordingly.
When case descriptions aren’t enough, you can add logic to your prototypes to “make it work”. Learn how to use conditional logic to demonstrate flow based on user entered values.
Keepin' it real with
Conditional Logic
Conditional Logic Overview
Download MP4
Now you can make your prototypes even more real with conditional logic.
Training
Training
Videos
Tutorials
Widget Libraries
Forum
Manage Licenses
Forum
AxShare
HOME
PRODUCTS
WHY AXURE
LEARN
SUPPORT
COMPANY
DOWNLOAD
BUY
To add conditions to your interactions, first add a case to an event in the Interactions tab of the Widget Properties pane. At the top of the Case Editor dialog in Step 1, there is an option to “Add Condition”. Clicking this link opens the Condition Builder dialog.
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 current value 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
Text on focused widget: the text in the widget that is focused
Drag cursor: the location of the cursor during a drag
Area of widget: the rectangular area that a widget occupies (used for drag and drop)
The Condition Builder allows you to create conditional expressions, such as “If selected option of Fruit Droplist equals ‘apple’”. Using the dropdown menus and input fields, you can build the conditions you want to evaluate.
An easy way to look at this is to break up the expression into three parts: The two items you are comparing, and the type of comparison. In other words,
[One value] + [How it compares] + [To another value]
The first and second fields in each row are the type of value and the specific widget or variable you are checking. The third field is the type of comparison (i.e., equals, does not equal, etc.). The fourth and fifth fields are the type of value and the specific value you are comparing to.
You can build conditions based on the following types of values:
You can add more conditions to the same case by clicking the “+” button at the end of an expression. For example, “If text on widget Email Field equals ‘billhaverchuck@mckinleyhigh.edu’” AND “text on widget Password Field equals ‘DallasRules’”. To remove a condition, click on 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”. If just one of the conditions need to be met (an “or” statement), set the droplist to “Satisfy any of the following”. By default, the expression is set to satisfy all of the conditions.
When you're done, click OK to return to the Case Editor dialog and choose the actions you want to perform when that condition is satisfied. For example, “If text on widget Email Field equals ‘billhaverchuck@mckinleyhigh.edu’ and text on widget Password Field equals 'DallasRules’, open Checkout Page in current window”.
An event can have multiple conditional cases. For example, if you had a droplist with options for different departments, you would add multiple OnChange cases with conditions to evaluate the different department options.
By default, each additional case will be an “Else If” statement. If you add a case without a condition, it will be an “Else If True” statement. In the prototype, the event will go through each case in the order and execute the first case that meets its condition.
You can also setup the event so that multiple cases execute if multiple conditions are met. In other words, instead of only performing the first case where the condition is met, you can execute multiple cases where the conditions are met.
To do this, you can change the “Else If” on a condition to “If” by right-clicking the case in the Interactions tab and choosing “Toggle IF/ELSE IF”. An example use is a form where each field is validated individually. In the OnClick of a Submit button, you can create an “If” case for each field and show the dynamic panels containing the error message accordingly.
Still need help? Check out the forum or drop us a line at support@axure.com.
Home
Products
Why Axure
Learn
Support
Company
Download
Buy
Contact
Privacy
Legal
Sitemap
© 2002-2013 Axure Software Solutions, Inc. All rights reserved.
Use Axure RP as:
Back to Overview
The Round Up
This tutorial uses conditional logic to create a login experience that displays an error message or links to the next page depending on the email and password entered.
This tutorial shows how to dynamically enable and disable widgets when toggling a checkbox and typing in a text field.
This tutorial shows how to make a phone number form that automatically jumps to the next field when the prior field is complete.
This tutorial shows how to use conditional logic and the OnChange event to set a panel state based on the selection of a droplist.
This tutorial shows us how to use conditional logic and the ability to toggle an "Else If" to an "If" to make a form with multiple required fields and multiple error messages.
Interactions and Conditional Logic
The Condition Builder Dialog
Multiple Cases with Conditions
Conditional Logic Tutorials
Account Login
Terms and Conditions
Auto-Tab Fields
Droplist Selection
Required Fields
