Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to define cases: add conditions to your events

Define cases in your prototypes by adding conditions to your events.

Conditions or rules can be set up for any given event in order to manage its actions’ execution.

By using conditions, you can split and organize the execution of a case into different ‘conditional blocks’ and decide when to perform one action or another.

Here’s an example of a case split into blocks of separate conditions in the Events tab:

Define complex interactions in your prototypes with the help of conditions - Events panel

There are two types of conditions that can be defined with Justinmind:

  • User decision: User engagement is needed upon triggering the event, in order to decide what actions to execute. Depending on the user event trigger, a different action will be executed.
  • Automatic evaluated condition: The condition is an expression that can be evaluated automatically once the event is triggered.

Creating a user decision

Define a condition for a specific interaction in your UI prototypes

To define a condition for a specific case that has already been created, follow the next steps:

  1. In the canvas, click on the widget that has the events defined. Its events will display in the Events panel.
  2. Click on the ‘Add condition’ link next to the action you want to make conditional. The Expression Builder dialog will appear.
  3. Build an expression with only a text string that will define the decision.
  4. Click OK to confirm the expression or click Cancel to close the dialog without applying changes.

 

When simulating a user decision, a Yes/No decision box will appear. If the user selects “Yes”, the corresponding actions will be executed. If the user selects “No”, they will be ignored.

Creating an automatic condition

Define an automatic condition for a specific interaction in your UI prototypes

To that has already been created follow the next steps:

  1. Click on the widget that has the event defined on the canvas. Its events will display on the Events panel.
  2. Click on the ‘Add condition’ link above the actions you want to make conditional. The Expression Builder dialog will appear.
  3. Build a comparative expression using the prototype’s elements and functions (eg: Input_1 = “abc”).
  4. Click OK to create the condition. Select Cancel to close the dialog without applying changes.

You can also define a decision or condition for an action when defining the latter. To create it, click on the ‘Add condition‘ button in the Events tab.

You can find some examples of the use of conditions in the tutorials below:

Next tutorial > Simulate log in forms in your interactive prototypes with the help of conditions