Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Prototype with rich interactions: list of actions available in Justinmind

You can build fully functional prototypes with Justinmind, thanks to its wide set of user triggers and event actions, i.e. the processes that take place after a specific trigger by a user.

The following actions are available in Justinmind:

– 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

Link to

Select the ‘Link to’ action to create navigation to an internal screen or the previous shown screen of your prototype, or to an external URL (1). You can configure the navigation so the target page opens in a pop-up window or in a new tab. You can also select a transition effect to be shown as the navigation between the screens is performed (2).

1-app-wireframes-link-to-action

Change style

This action changes the style of a widget of the same screen. Several formatting attributes can be changed at once with this action.

(1) Select the widget you want to change the style of on the current screen displayed in the small canvas, or select it on the outline view. A set of styles will appear under the small canvas. You can zoom them in the top right part of the events dialog.

(2) Select the styles you want to change checking them in the Styles’ list.

(3) Configure the attributes of the selected style to match the desired look and feel.

2-app-wireframes-change-style

Show & Hide

These actions make a widget of the same screen appear (Show) or disappear (Hide). To create a Hide or Show action select the widget you want to hide or show on the current screen displayed in the small canvas or select it on the outline view (1). If you wish, you can enhance the actions with animations and effects (2).

3-app-wireframes-show-action

app wireframes hide

Set active panel

Use this action on Dynamic Panels to change between its tabs. Select the tab of the Dynamic Panel you want to set as active from the canvas or from the outline (1). If you wish, select a transition effect to be shown when the change between tabs is performed (2).

5-app-prototypes-set-active-panel

Set Value

This action sets a value to a particular widget in the current screen or to a variable. The value to assign can be either a simple text or an expression involving other widgets and variables.

To create an action that sets a value to a screen’s widget, select the ‘Components’ option below the drop-down menus (1), and select the widget you want to assign the value to on the current screen displayed in the small canvas or on the outline view (2).

Notice that only some widgets have the property to display a value:

  • Forms and inputs widgets: Input Texts, List Boxes, Check and radio buttons…
  • Static widgets containing text: Text, Paragraph, Button and Text Cell from Text Tables.

Finally, check the ‘Fixed’ option and select or type the value in the ‘Value’ text box, or check the ‘Calculate’ button to define a more complex value involving other elements of the prototype (3).

To create an action that sets a value to a variable, click on the ‘Variables’ option to indicate the target’s type, select the variable you want to assign the value to on the variables’ list that will appear in the canvas, and type the value in the ‘Value’ text box or click on the ‘Calculate’ button to define a more complex value involving other elements of the prototype.

6-app-prototypes-set-value

Select Value

This action selects a value or group of values from a selection widget in the current screen. The value or values to be selected can be defined either with a simple text or with an expression involving other widgets and variables.

To create an action that selects a value from a single selection widget, select a single selection widget on the current screen displayed in the small canvas or select it on the outline view (1), and indicate the value you want to select from the list of values drop-down or click on the ‘Calculate’ button to define a more complex value involving other elements of the prototype (2).

Note that only the following selection widgets have the property to be selected: List Box, Selection List, Radio Button List.

 

7-app-prototypes-select-value

To create an action that selects a set of values from a multi selection widget, select a multi selection widget (i.e. a Multi-selection List or a Check Box List) on the current screen displayed in the small canvas or select it on the outline view, and indicate the value(s) you want to select by clicking on the corresponding check boxes in the list of values or click on the ‘Calculate’ button to define a more complex value involving other elements of the prototype.

select value action

Pause

This action pauses the current event’s execution and delays the execution of forthcoming actions defined for the same user event.

Notice that it only pauses the execution of the current event for the current element, therefore already executing actions for other elements or newly triggered events will be carried on normally.

To create this action, just specify the time you want the event’s execution to be stopped in the Time input. Introduce the time in milliseconds (1s = 1000ms).

8-app-prototypes-pause

Move

This action moves a widget to a certain position in the screen, which you will select from the canvas or from the outline (1). The target position (2) can be defined independently for the x-position (left) and y-position (top) in the following ways:

  • Current: Use this option if you don’t want to move the element for the selected axis.
  • Fixed: Use this option if you want to move the selected widget to a certain known position. The new position will be taken as relative to the widget’s closest parent.
  • Offset: Use this option to move the selected widget by an offset defined in pixels.
  • Calculated: This option will set the left or top position of the element as a result of an expression.

The move action can have additional options when combined with drag events (Mouse>On Drag).

You can also animate the move action selecting the desired duration and easing function.

9-app-prototypes-animation-move

Resize

This action changes the width and height of an element dynamically. Used in combination with the event type ‘on window resize’ is a powerful tool to prototype Responsive and Adaptive websites or apps.

To create this action, select the component you want to resize from the canvas or from the outline (1), and choose the new width and height (2). The options are:

  • Current: Leaves the width or height of the element at the value it has at that moment of simulation.
  • Fixed: This option will set the width or height of the element as the value indicated.
  • Calculated: This option will set the width or height of the element as a result of an expression.
  • Relative to parent: This option will change the width or height of the element to a percentage of the element were it is contained.

You can also animate the resize action selecting the desired duration and easing function.

10-app-prototypes-resize

Rotate

This actions lets you rotate widgets such as images, texts, shapes, dynamic panels and groups of elements, which will rotate at the event trigger of your choice.

In the events dialog, select the component you want to rotate (1), select the angle value (it can be fixed, calculated, or an offset), and – if you wish – apply an easing effect (2).

11-app-prototypes-rotate

Insert Into

This action inserts a specific widget into another container widget. When a widget is inserted into a container, its absolute position will remain the same if the container has a free layout. Otherwise, the widget will be inserted according to the container’s layout positioning itself next to the closest container’s child.

Widgets that can be used as target containers for this action are panels from dynamic panels, table cells, canvas.

Note: If you select the canvas, you won’t see any selection feedback, and you will only be able to select it through the Outline.

There is only one restriction for this action: container widgets cannot be inserted into any of their children widgets.

12-app-prototypes-insert-into

Data Master action

This action is directly related to Data Masters. Select this action if you want to modify any Data Master by adding new records to it, modifying or deleting them.

To create any Data Master action, first click on the radio button to select the Data Master you want to be modified from the current Data Master list. Then click on one of the following buttons: New; Modify; Delete.

13-app-prototypes-data-master-action

Set Focus on

This action sets the focus on an input field or a selection component in the same screen.

To create this action, just select the target widget you want to focus on the current screen displayed in the small canvas or select it on the outline view (1).

Notice that this action will only work on input widgets and selection widgets.

14-app-prototypes-set-focus-on

Scroll to

This action is commonly used when we have a widget on the screen that is out of the user view and we want it to be seen. When this action is executed the canvas will scroll until the target widget can be seen.

To create this action, just select the target widget you want to scroll to on the current screen displayed in the small canvas or select it on the outline view (1).

You can also animate the scroll action selecting the desired duration and easing function (2).

 15-app-prototypes-scroll-to

 

Enable/Disable input

This action enables or disables an input or a selection widget, making possible that the user interacts with it or not. Notice you can only apply this action to input and selection widgets.

To create an enable/disable action, select the input or selection widget you want to enable/disable on (1), and select “enable” or “disable” clicking on the corresponding radio button (2).

16-app-prototypes-enable-disable-input

Paginate Data Grids

This action is directly related to Data Lists and Grids. Select this action if you want to navigate through the pages of a Data List or Grid.

Next tutorial > Add animations to your interactive wireframes