Events and interactions



Create fully-functional web and mobile prototypes by defining UI element interaction. This tutorial will explain how to do so using Events, a key Justinmind feature.

Making UI elements interactive with events

An event interaction consists of:

  • An event trigger, i.e. how the user engages with the interface (e.g. a click, or mouse hover)
  • Every event can have one or more interactions
  • Every interaction can have one or more actions

Actions are the system’s response to an event trigger (e.g. navigating from one screen to another, or changing the properties of a UI element).

Conditions enable the system to perform a certain action depending on how the user engages with the system, and the system’s response (e.g. taking the user to the login screen in a sign up form if the user inputs an email address already in use).

Note: you can add multiple event interactions to the same UI element (e.g. you can make a rectangle react a certain way when clicked and another way when the mouse hovers over it).
Additionally, each event trigger can prompt multiple interactions (e.g. click on a button once to make a rectangle appear and click on it again to make it disappear). 

Adding an event to a UI element

An event is created by selecting a UI element in the Canvas, the source of the event trigger.

To add an event, select the UI element you wish to add an event to, go to the Events palette and click “Add event”.
add event

A dialog will appear allowing you to define the event trigger and action:
events interactions

  1. Select the event trigger from the drop-down menu on the left
  2. Select an action from the drop-down menu on the right
  3. Select the target UI element from the Canvas, (i.e. the UI element that the event trigger applies to), or select it in the Outline palette (highlighted in the image). You can zoom in on the Canvas at the top of the Events dialog
  4. With some events (e.g. Change Style events) you can change the properties and styles of UI elements including the background color, the border and transparency. These options will become available at the bottom of the dialog when the relevant action is chosen

Once you’ve created your event interaction, click “OK”. It will appear in the Events palette.

The Events palette

All events are created, viewed, edited or deleted in the Events palette once the element has been selected on the Canvas.

The Events palette consists of:
events palette

  1. An “Add Event” option. Click on this to create a new event. In the top left-hand corner you’ll find the Event trigger and the Action drop-down menus to define events for a selected UI element
  2. Event triggers for the selected UI element
  3. Interactions defined for the current event trigger. Each event trigger can prompt one or more interactions
  4. Actions defined for the current interaction. Each interaction can include one or more actions

From the events operation toolbar you can:
events toolbar

  1. Create a new event (‘+’)
  2. Copy all events defined for the selected UI element
  3. (Paste) all events copied to the clipboard
  4. Delete (‘X’) all events defined for the selected element
  5. Additionally, you can expand/collapse all events and conditional blocks, and change how actions are displayed (switching between text and image views)

Event operations

By clicking on the gear icon next to an event, you can perform the following operations:
event operations

  1. Add a new interaction(s) for this event trigger
  2. Copy event and its interactions to a different UI element’s event trigger
  3. Copy event interactions from one event to another for the same UI element
  4. Paste the interactions copied to the clipboard
  5. Delete event and its interactions

Interaction operations

By clicking on the Gear icon next to an interaction, you can perform the following operations:

interaction operations

  1. Modify the interaction’s name
  2. Copy interaction
  3. Shift the interaction to the left so it runs prior to the previous interaction
  4. Shift the interaction to the right so it runs after the next interaction
  5. Delete this interaction

Action operations

By clicking the gear icon next to the word “Do”, you can perform the following operations:
action operations

  1. Add another action that runs after the previous one
  2. Modify selected action
  3. Copy/Paste selected action
  4. Move the action left or right so it runs prior to the previous or after the next action. You can also do this by dragging and dropping them into place.
  5. Delete selected action

You can modify actions one by one or as a group.

To select an individual action, click it. A green border will appear around the action when selected. To select a group of actions, hold down the Control key (or Command key for Mac) and select them with the mouse.
action operations

The sequence of interactions in an event

Each event contains an interaction or set of interactions (made up of actions). A single event trigger can prompt one or more interactions in sequence.

By default, the actions will run in the order in which they have been created. However, you can reposition interactions by shifting them left or right (see above section “Interaction operations”).

You can also change the way interactions run by defining their position in relation to other interactions. These options are:

sequence actions

  1. After previous
  2. With previous
  3. Time after previous stated

The sequence of actions in an interaction

Each interaction contains an action or set of actions (with or without conditions). A single interaction can include one or more actions in sequence.

By default, actions will run in the order in which they have been created. However, you can reposition actions and re-order them by dragging and dropping them into place, or shifting them left or right (see above section “Action operations”).

You can also change the way actions run by defining their position. These options are:

actions interaction

  1. After previous
  2. With previous
  3. Time after previous stated

Event triggers for web prototypes

Choose from the following event triggers to make your web prototypes interactive.

Events triggered by user interaction with the mouse

An event is triggered when…

event triggers

  • On Click (the user’s mouse clicks a UI element in the Canvas)
  • On Mouse Down (the mouse clicks and holds an element)
  • On Mouse Up (the mouse clicks an element and then releases it)
  • On Double Click (the mouse double clicks an element)
  • On Right Click (the mouse right clicks on an element)
  • On Toggle (the mouse toggles between two states of a UI element)
  • On Mouse Over (the mouse hovers over an element and the corresponding action runs until the mouse moves away from the element)
  • On Mouse Enter (the mouse hovers over an element and the corresponding action runs even after the mouse moves off the element)
  • On Mouse Leave (the mouse moves off an element)
  • On Drag Start (the mouse starts to drag an element to another location)
  • On Drag (the mouse drags an element to another location)
  • On Drag Stop (when the mouse moves off an element after dragging it across the screen)

Events triggered by user interaction with the keyboard

An event is triggered when…

user interaction

  • On Key Up (the user presses the up arrow key on their keyboard)
  • On Key Down (the user presses the down arrow key on their keyboard)

Events triggered when…

click events

  • On Page Load (the current/a new screen loads)
  • On Page Unload (the user leaves the current screen)
  • On Window Resize (the size/resolution of the displayed screen changes)
  • On Scroll (the user scrolls up, down or across the screen)
  • On Variable Change (when a variable is used to control the prototype’s data)

Event triggers (gestures) for mobile prototypes

Make your mobile prototypes interactive with Justinmind’s extensive set of mobile gestures.

Choose from the following event triggers to make your mobile prototypes interactive.

Events triggered by user interaction with the mobile device screen

Events triggered when…

gesture events

  • On Swipe Up (the user performs a upwards swipe gesture)
  • On Swipe Down (the user performs a downwards swipe gesture)
  • On Swipe Left Up (the user performs a leftwards and upwards swipe gesture)
  • On Swipe Left (the user performs a leftwards swipe gesture)
  • On Swipe Left Down (the user performs a leftwards and downwards swipe gesture)
  • On Swipe Right Up (the user performs a rightwards and upwards swipe gesture)
  • On Swipe Right (the user performs a rightwards swipe gesture)
  • On Swipe Right Down (the user performs a rightwards and downwards swipe gesture)
  • On Pinch Open (the user presses two fingers to the screen and moves them away from each other)
  • On Pinch Close (the user presses two fingers to the screen and moves them closer together)
  • On Pinch Left (the user presses two fingers to the screen and moves them to the left of the screen)
  • On Pinch Right (the user presses two fingers to the screen and moves them to the right of the screen)
  • On Rotate Left (the user rotates the screen anti-clockwise)
  • On Rotate Right (the user rotates the screen clockwise)
  • On Portrait (the user rotates the device so it is in portrait mode)
  • On Landscape (the user rotates the device so it is in landscape mode)

Actions for web and mobile prototypes

You can build fully functional web and mobile prototypes with Justinmind’s wide range of event actions.

Note: you cannot add an action without an event trigger.

Once you have defined your event trigger, choose from the following actions:

on click change

  • Link To
  • Change Style
  • Show
  • Hide
  • Set Active Panel
  • Set Value
  • Select Value
  • Pause
  • Move
  • Resize
  • Rotate
  • Insert Into
  • Data Master Action
  • Set Focus On
  • Scroll To
  • Enable/Disable Input
  • Paginate Data grids
  • Play Audio

Link To

This action allows the user to navigate to another screen in your prototype or an external URL.

To add this action:

link to event

  1. Select the “Screen” radio button. This allows the user to navigate to another screen within your prototype, the previous screen (back button), or to an external URL
  2. You can also configure this action so the target page opens in a pop-up window or in a new tab

Change style

This action changes the style of a UI element. You can change multiple styles and formatting attributes of an element within a single Change Style action.

To do so:

change style

  1. Select the element to be modified from the Canvas or Outline palette. A set of attribute check boxes will appear below the Canvas
  2. Check the styles/attributes you wish to modify
  3. Make the desired modifications

Show

This action makes a previously hidden element appear.

To do so, select the element to be shown from the Canvas or Outline palette.

on click show

Hide

This action hides a previously visible element.

To do so, select the element to be hidden from the Canvas or Outline palette.

on click hide

Set active panel

This action changes the active panel within a Dynamic Panel, enabling the user to interact with that panel’s content.

To select the active panel:

set active panel

  1. Select the panel from the drop-down at the top of the dynamic panel on the Canvas, or
  2. Select the panel from within the dynamic panel in the Outline palette

Set Value

This action (sets) assigns a value to an element in the current screen or to a variable.

To add an action that sets a value to an element:

set value

  1. Select the “Components” radio button
  2. Select the widget you wish to assign the value to from the Canvas or Outline palette (or a variable from the Variables tab)
  3. Select a type of value, by selecting either the Fixed or Calculated radio button. The value will either be fixed or calculated. A fixed value requires you to enter a value in the input field, and a calculated value requires you to define a value by building an expression with the expression builder
Note: you can only set a value to some UI elements.

UI elements that you can add “Set Value” events to include:

  • Basic elements containing text: Text and Paragraph elements, Buttons and text cells within Text Tables
  • Forms and input elements e.g. Input Text Fields, List Boxes, Check Boxes and Radio Buttons

Select Value

This action selects a value or group of values from a selection element e.g. Select Lists (single selection elements) or Radio Lists, Check Lists and Multi-Select lists (multi selection elements). The value(s) to be selected can be defined by a fixed or calculated value.

To add an action that selects a value from a single selection element:

select value

  1. Select a single selection element from the Canvas or Outline palette
  2. Then, either choose a fixed value from the drop-down menu or select the “Calculate” radio button to define a value with the expression builder
Note: to add an action that selects a set of values from a multi selection widget, select a multi selection widget from the Canvas and then choose how to define the value (fixed or calculated as before).

Pause

This action pauses the current event and delays pending actions defined for the same event trigger.

You will need to indicate the pause duration in milliseconds.

Note: this action only pauses the event for the corresponding UI element. If this event has been added to other elements –even if been set up to run simultaneously – they will run as planned.

on click pause

Move

This action repositions an element on the Canvas.

To do so, select the element you wish to move from the Canvas or the Outline palette.

on click move

Below, you can customize the X (Left) coordinates in the following ways:
x left

  1. Current: Select this option if you don’t want to modify the selected coordinate
  2. Fixed: Select this option if you wish to move the element a specified distance and have it remain in that position
  3. Offset: Select this option if you wish to move the element a specified distance and enable it to be repositioned again if the user repeats the action
  4. Calculated: Select this option to reposition the element as a result of the defined expression
  5. Pin to center: Select this option to pin element to the center of the Canvas
  6. Pin to left: Select this option to pin element on the Canvas on the left-hand side
  7. Pin to right: Select this option to pin element on the Canvas on the right-hand side

You can customize the Y (Top) coordinates in the following ways:

on click move

  1. Current: Select this option if you don’t want to modify the selected coordinate
  2. Fixed: Select this option if you wish to move the element a specified distance and have it remain in that position
  3. Offset: Select this option if you wish to move the element a specified distance and enable it to be repositioned again if the user repeats the action
  4. Calculated: Select this option to reposition the element as a result of the defined expression
  5. Pin to center: Select this option to pin element to the center of the Canvas
  6. Pin to top: Select this option to pin element to the top of the Canvas
  7. Pin to bottom: Select this option to pin element to the bottom of the Canvas

Resize

This action changes the width and height of an element. Combine “On Window Resize” event triggers with “Resize” actions for responsive and adaptive prototypes.

To add this action, select the element you wish to resize from the Canvas or Outline palette.

resize

Below, you can modify the width and/or height of the element in the following ways:

resize menu

  1. Current: select this option if you don’t want to modify the width or height of the element
  2. Fixed: select this option to modify the width or height of the element indicating a specific amount
  3. Percentage: select this option to scale the element to proportion
  4. Calculated: select this option to set the width or height as a result of the defined expression

Rotate

This actions lets you rotate elements such as Image, Text box and Shape elements, as well as Dynamic Panels and groups of elements.

To add this action:

rotate

  1. Select the element you want to rotate from the Canvas or Outline palette
  2. Below, set the angle rotation’s value (it can be fixed, offset or calculated)

Insert Into

This action inserts an element into container element. When an element is inserted into a container, its absolute position will remain the same if the container has a free layout. If the container has a fixed layout (horizontal or vertical), the element will be positioned next to the container’s closest child.

Container widgets include Dynamic Panels and Text Table cells, Data Lists and Data Grid cells.

Note: container elements cannot be inserted into their children elements.

To add this action:

insert into

  1. Select the element from the Canvas or Outline palette that you wish to insert into another. Once you’ve done this, a second Canvas will appear below the first
  2. From the second Canvas (or second Outline palette), select the element that you wish to insert it into

Data Master Action

This action is directly related to Data Masters. A Data Master is a set of records that defines a prototype’s object and allows you to build data-driven prototypes. Learn more about prototyping with them here.

Add this action if you want to modify a Data Master e.g. add new records to it, or modify or delete existing ones.

To add a Data Master action, choose the Data Master Action from the drop-down menu and select the Data Master you wish to modify (or create a new Data Master ). Then choose one of the following options: New, Modify or Delete.

data master action

Set Focus On

This action sets the focus on an Input Field or a selection element in the same screen as the element you’re adding the event to.

This action is useful for input form design, providing a helpful prompt for users.

To add this action, select the element you wish to set focus on from the Canvas or Outline palette.

set focus on

Scroll to

This action is allows the user to easily navigate to an element currently out of view. When this action runs, the screen will scroll until the target element appears.

To add this action:

scroll to

  1. Select the element you wish to scroll to from the Canvas or Outline palette
  2. Choose the direction you wish to scroll in

Enable/Disable Input

This action enables or disables an input or a selection element, controlling whether or not the user can interact with it.

To add an Enable/Disable Input action:

enable disable input

  1. Select the input or selection element you want to enable/disable from the Canvas or Outline palette
  2. Below, select “Enable” or “Disable” by clicking on the corresponding radio button

Paginate Data Grids

This action relates to Data Lists and Grids. Add this action if you want to navigate through the pages of a Data List or Grid.

To add this action:

paginate data grids

  1. Select the data list or grid you wish to paginate from the Canvas or Outline palette
  2. Below, choose from the options: First Page, Previous Page, Next Page or Last Page

Play Audio

This action allows you to add an audio file (.wav or .mp3).

To add this action:

play audio

  1. Choose a .wav or .mp3 audio file from your folder
  2. Click “Play” on the right of the “Test Audio” option to test your audio file

Transition effects

Add transition effects to your events so that they connect seamlessly and run smoothly. Here’s a list of the transition effects to choose from:

transition

  • Blind: This makes the element move as if blinking
  • Bounce: This makes the element bounces vertically or horizontally across the screen
  • Clip: This makes the element float upwards
  • Drop: This causes the element to drop
  • Explode: This makes the element explode into several pieces
  • Fade: This makes the element gradually increase in transparency and come out of view. You can define the length of the effect expressed in milliseconds.
  • Fold: This makes the element fold like a piece of paper
  • Highlight: This highlights the background with a defined color
  • Puff: This scales and fades out elements
  • Pulsate: This makes the element look as if they are vibrating
  • Shake: This shakes the element vertically or horizontally
  • Slide: This makes the element move along in a continuous contact with the screen. You can choose from Slide Up, Down, Left and Right effects