Send Us Your Feedback

AXURE 202 - Article 1: Conditional Logic

Overview

    1. Conditional Logic Demo
    2. Conditional Logic
    3. Building Conditions



1. Conditional Logic Demo

Please turn on speakers for audio
To view on Vimeo, please click here.



2. Conditional Logic

A well-written Case description can be an effective method for communicating conditional logic or flow and is very easily maintained and updated, but there are times when a more functional / higher fidelity prototype is necessary.

Functional conditional logic can be added to any interaction case in your design. The conditions can be based on values entered in form widgets in the prototype like the check state of checkboxes and the text in text fields. Conditions can also be based on Variable values.


3. Building Conditions

To add conditions, first add a case to an event in the Interactions pane. In the Interaction Case Properties dialog, click "Add Condition" under Step 1.



This will open the Condition Builder dialog. The Condition Builder dialog is used to construct a condition expression such as "If text on widget UsernameField equals 'axure' and text on widget PasswordField equals '12345'". The expression will be evaluated in the prototype to determine if the Actions in the Case are performed.

One or more condition rows can be created in the Condition Builder dialog. Clicking the "+" button at the end of a row will add an additional condition row. Clicking the "-" button will remove a condition row.

If all of the row conditions should be met, the Satisfy droplist should be set to "Satisfy all of the following". Choosing "any" would place an "or" between the comparisons instead of "and".

There are six types of values that can be used in a condition:
  • • Text entered in a Text Field or Text Area
  • • Checkstate of a Checkbox or Radio widget (checked or unchecked)
  • • Selected option of a Droplist or Listbox widget
  • • Length of a Widget value
  • • Value of a Variable
  • • Length of a Variable value


Click OK to return to the Interaction Case Properties dialog, where you can select the actions to perform if the condition is met.

Notice that the description of the cases in the Interactions pane now includes an "If" statement describing the condition. Also, the icons on the Event will be highlighted in green to indicate that Conditions are used on the Event.



Once a Condition is defined on a case in an event, subsequent cases will begin with an "Else If" by default. If no condition is specified on those subsequent cases, the description will be "Else If True".

By default, the prototype will only execute the first case where the condition evaluates to True.



"Else If"'s can be changed to an "If"'s by right-clicking the case in the Interactions pane and selecting Change to IF. Doing so will allow multiple cases to be performed if multiple conditions are met.