Exercises: Adding conditions to interactions

You can use conditions in your prototypes to create dynamic user experiences, like conditional navigation, error message/form validation, and much more. Check out the exercises below for some examples of how to use them in Justinmind.

Conditional navigation

In this exercise, you’ll learn how to build a simple condition that checks which value you select in a dropdown. You’ll then link to the corresponding screen.
An example of conditional navigation using dropdowns

Design the example

  1. Create a Search screen with texts and rectangles. Add a button and label it “Search”.
  2. Add a Dropdown/Select List widget to the Canvas and style it as preferred. You can find it in the Toolbar dropdown under ‘Interactive input fields’.
  3. With the dropdown selected, go to the Properties palette and click on ‘Edit values’. Delete all the values in the dialog and add two new ones – “Houses” and “Apartments”.Edit dropdown values in the properties palette
  4. Click the ‘+’ button in the Screens palette and create two new screens. Name one “Houses” and the other “Apartments”. Customize these screens as preferred.

Create the events

  1. Go back to the Search screen and select the “Search” button. Look to the Events palette and click ‘Add event’. Create an On Tap + Navigate To event and choose the Houses screen as the target.
  2. Look to the Events palette, where you’ll see the event you just created. Click the ‘add condition’ text link above the action, which will open the Conditional Expression builder.Add condition text link in the events palette
  3. Follow these steps to build the condition:
    • a. Look to the Canvas preview and drag the dropdown to the open space in the expression that’s labeled “Click to edit or drag & drop a component”.
    • b. Drag the Equals (=) logic function next to the dropdown in the expression.
    • c. You’ll see a new open space appear in the expression. Double-click in this space and write “Houses”.
    • d. Click ‘OK’ to finish building the expression.
    Note: the value you type into the expression must match the value from the dropdown.

    The event and condition you just created will link you to the Houses screen only if you select “Houses” from the dropdown.

  4. Still in the Events palette, click on the ‘Else’ text link below. Create another On Tap + Navigate To event and link to the Apartments screen.

    Since there are only two options you can select from the dropdown, you don’t need to create a condition for this action.

Here’s how your events palette should look:
The events palette showing all of the events in this example
Click the ‘Play’ button to simulate your prototype. Select a value from the dropdown and you’ll be linked to the corresponding screen.

Download this example.

Different actions on a button

You can also use conditions to assign different actions a button that will trigger after you click on it each time.
Different actions on one button example

Design the example

  1. Place three rectangles and a button on the Canvas.
  2. Select all the rectangles and mark them as hidden in the Properties palette.Hide the rectangles in the Properties palette

Create the events

  1. Select the button on the Canvas, go to the Events palette, and click ‘Add event’.
  2. Create an On Click + Show event, selecting the first rectangle to show with a fade effect. Click ‘OK’ to finish building the event.Create an On Click + Show event, showing the first rectangle with a fade effect
  3. Look back to the Events palette and click the ‘add condition’ text link above the event you just created. Follow these steps to build the expression:
    • Drag the rectangle to the open space in the expression and select 'is visible' from the dropdown. Place a Not function in front of that
    • a. Drag the first rectangle to the open space in the expression.
    • b. You’ll see a dropdown appear below the element in the expression. Click on it and select the ‘Is visible’ option.
    • c. Drag a Not logic function to the expression. Click ‘OK’ to finish building the expression.
    • This condition checks to see if the first rectangle is not visible. If it’s not, it will show the first rectangle.
  4. Click on the ‘Else’ text and build another On Click + Show event, selecting the second rectangle to show with a fade effect.
  5. Click the ‘Else add condition’ text above the action you just created and build this condition:
    • In this condition, the first rectangle should be visible and the second rectangle should not be visible
    • a. Drag the first rectangle to the open space in the expression and select ‘Is visible’ from the dropdown.
    • b. Place an And (&) logic function next to the rectangle in the expression.
    • c. Drag the second rectangle to the open space in the expression and select ‘Is visible’ from the dropdown.
    • d. Place a Not logic function to the left of the second rectangle and click ‘OK’ to finish building the expression.
    • This condition checks to see if the first rectangle is visible and the second rectangle is not visible on the Canvas. If so, it will show the second rectangle.
  6. Tap the ‘Else’ text link again and build another On Click + Show event, selecting the third rectangle to show with a fade effect. You won’t need to add a condition to this event.

Here’s how your Events palette should look:
View of the events palette with all events
Click the ‘Play’ button to simulate your prototype. Click the button to see the first rectangle appear. Click the button again to see the second rectangle show up, and tap it once more to see the last rectangle.

Download this example.

Error messages in an input form

In this exercise, you’ll learn how to build conditions that check to see if all the fields in a form are filled out and validated correctly. If they’re not, you’ll show an error message.
The finished error message prototype. Enter nothing in the input text fields and click the sign up button. Enter the correct information and the errors will disappear.

Design the example

  1. Drag two Input Text Fields F and a Button to the Canvas. Align them to match the example.
  2. Double-click on each input text field to add a placeholder value. Type in “Email”, and “Password”.Type placeholder values into each input text field in the properties palette
  3. Add two text elements, placing one below each input text field. Label them “Please enter a valid email” and “Please enter a password”.

    These will be the error messages you’ll show if the form isn’t fully completed.
  4. Select both error messages and mark them as hidden in the Properties palette. You can use Shift to multi-select them on the Canvas.Hide the error messages in the properties palette

Create the events

  1. Select the “Sign up” button, go to the Events palette and click ‘Add event’. Create an On Click + Show event, selecting the “Please enter a valid email” error message to show. Click ‘OK’ to finish building the event.Choose the hidden email error message to show
  2. Click the ‘add expression’ text link above the event you just created. Follow these steps to build the expression:
    • a. Drag a Regular Expression (Reg Exp) logic function to the open space in the expression.Regular expression logic function added to the expression
    • b. You’ll see two open spaces appear. Drag the “Email” input text field to the open space on the left.Drag the email input field to the open space on the left
    • c. Click to the Constants tab and to the ‘Regular Expressions’ section. Drag the Email (@) constant to the open space on the right.Email constant in the open space on the right
    • d. Click back to the Functions tab. Drag a Not logic function in front of the expression. Click ‘OK’ to finish building the expression.
    • This condition checks to see if the value you entered in the input text field matches the structure of an email address or not. If it doesn’t match, it will show the error message.
  3. Click the ‘Else’ text below the event you just created and build an On Click + Hide event, selecting the “Please enter a valid email” error message to hide.Click the 'Else' text below the events you created
  4. Click the ‘+’ button at the top of the Events palette to create a new interaction. Build an On Click + Show event, selecting the “Please enter a password” error message to show.Click the + button to create a new interaction
  5. Click the ‘add condition’ text link above the event you just created, which will open the Conditional Expression builder. Follow these steps to build the expression:
    • The condition which checks to see if the password input text field is empty
    • a. From the Canvas preview, drag and drop the “Password” input text field to the open space in the expression.
    • b. Place an Equals (=) logic function next to the input text field.
    • c. You’ll see a new open space appear. Double-click on it, but leave it empty. Click ‘OK’ to finish building the expression.
    • This condition checks to see if there’s no value entered in the input text field. If so, you’ll see the error message you created appear.
  6. Tap the ‘Else’ text link below the events you just created and build an On Click + Hide event, selecting the “Please enter a password” error message to hide. This will hide the error message if you have entered some value in the “Password” input text field.

Here’s how your events palette should look:
View of the events palette with all events and conditions
Click the “Play” button to simulate your prototype. Fill in one of the input text fields, but leave the other blank. Click the “Sign up” button and you’ll see an error message appear. Enter a value in the input text field and click the button again to see the error messages hide.

Download this example.