Design and user testing processes can sometimes be helped by building functionality into your Axure RP project, just as it would be in the final app.

 

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.

CONDITIONAL LOGIC Demonstrate flow based

on user entered values

CONDITIONAL LOGIC OVERVIEW

Now you can make your prototypes even more real with conditional logic.

Features

Learn

Community

Company

Buy

Download

Axure Share

Forum

Manage Licenses

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.

Value: A text/numeric value or variable

 

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

 

Text on focused widget: The text  in the widget that is focused

 

Length of widget value: The number of characters in the text on a form field

 

Selected option of: The selected option of a droplist or

list box

 

Is selected of: The check if a checkbox or radio button is checked, or a widget is in it's selected state.

State of panel: The current state of a dynamic panel

 

Visibility of widget: Whether a dynamic panel is currently visible or hidden

 

Key pressed: The key or key combination pressed

on keyboard

 

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)

 

Adaptive view: The current adaptive view being displayed

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 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 “x“ 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. 

 

Home

Features

Community

Learn

Support

Company

Download

Buy

Contact

Privacy

Legal

Sitemap

© 2002-2014 Axure Software Solutions, Inc. All rights reserved. Axure is a registered trademark of Axure Software Solutions Inc.

u81_start u81_end u81_line

Patents

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.

 

Go to Account Login Tutorial

This tutorial shows how to dynamically enable and disable widgets when toggling a checkbox and typing in a text field.

 

Go to Terms and Conditions Tutorial

This tutorial shows how to make a phone number form that automatically jumps to the next field when the prior field is complete.

 

Go to Auto-Tab Fields Tutorial

This tutorial shows how to use conditional logic and the OnChange event to set a panel state based on the selection of a droplist.

 

Go to Droplist Selection Tutorial

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.

 

Go to Required Fields Tutorial

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

If text in text field

Conditional Logic Example

equals

If true

Open Page 1

If else

Show Error Message

mylogin@axure.com

Conditions Available

You can build conditions based on the following types of values:

Building Conditions

This tutorial uses conditional logic and variables to pass text entered in a text field, or send them to a different page if no text was entered.

 

Go to Core Training #3: Conditions, Values, & Variables

Core Training #3: Conditions,

Values, & Variables

Still need help? Check out the forum or drop us a line at support@axure.com.

THE ROUND UP

u198_start u198_end u198_line
u200_start u200_end u200_line
u202_start u202_end u202_line
u204_start u204_end u204_line
u206_start u206_end u206_line
u208_start u208_end u208_line
u210_start u210_end u210_line
u217_start u217_end u217_line
u219_start u219_end u219_line

MORE ADVANCED PROTOTYPING ARTICLES ::

u226_start u226_end u226_line
u227_start u227_end u227_line