Adding conditions to interactions
Conditions define the relationship between different interactions within an event. They are rules that determine whether or not an interaction should run, usually when there is more than one interaction present within an event.
Conditions are often used to build web and mobile experiences including, but not limited to:
- Conditional navigation
- Screen flow validation
- Loading animations
- Combination lock screens for mobile devices
To add a new condition to an interaction:
- Go to the Events palette and add an event (“Add Event”). Choose an event trigger and a resulting action, and click OK.
- Back in the Events palette, click the “add condition” link on the left of the action you just created.
- The Conditional Expression builder (a separate dialog) will appear, which is where you can create conditions. Once you’ve created your condition, click “OK” to exit the builder.
Here’s the Conditional Expression builder broken down:
- The expression: this is where you’ll drag items to create the condition
- Functions: you can combine these with UI elements, Data Masters (or Data Master fields), variables, text or numbers. These are useful for comparing text or numbers, and for filtering or modifying data
- Constants: these are fixed values that you can use on their own or combine with functions, UI elements, variables, Data Masters, text and numbers. These are useful for detecting things like the screen width or height, or the system time or date
- Screens: From here, you can choose the UI element(s) that are on your current screen
Note: only the UI elements in the current screens will be available for selection.
- Variables: select this tab to view the variables in your the prototype, and to be able to drag them into the expression
- Data Masters: select this tab to view the Data Masters (or Data Master fields) in your prototype, and to be able to drag them into the expression
Conditions are built by dragging any of those operations, elements, or texts into the open spaces in the expression.
Once you’ve finished building your condition, click “OK” to exit the Conditional Expression builder.
Click “Simulate” to see your action and condition run in real-time.