Justinmind

SUPPORT

Learn how to prototype web and mobile apps

The expression builder


Build complex interactive prototypes with the help of the expression builder, a comprehensive front end to define expressions used to evaluate results of input data.

It is mainly used for two purposes:

  1. To build the conditions that an interaction must meet in order to be executed. In this case the expression must be built with Boolean operators (true/false, yes/no).
  2. To specify a value in a ‘Set Value’ or ‘Set Selection’ event action.

expression-builder-UI-prototypes-conditional-navigation

The editing area is very interactive and you can move elements around by drag and drop, and delete them by clicking on the X icon that appears at the top right-hand corner when the mouse is hovering over an item.

Every condition and expression in Justinmind is a combination of Functions and Data sources.

To create your own condition or expression, just drag the functions/constant you need from the tabs and drop them into the editing area.

Do the same with the Data sources, found in the Data panel.

We call ‘Data sources‘ the data elements we can use and manipulate in the expression builder to create expressions and calculations. These elements act as parameters of the expressions:

1) Screen’s Widgets: Some widget properties can be used as parameters in your expression. To use them, drag the widgets from the ‘Screen’ tab of the Expression Builder and drop them into the editing area. Then you may choose one of the following properties:

o Value: the value displayed by a widget on the current screen. Any widget with text (eg. button) will have this property.

expression-builder-UI-wireframes-conditional-navigation
o Selected value: the current selected value of a selection component (eg. select list).
o Pos.X relative: the X coordinate of the current widget’s position relative to its closest parent container.
o Pos.X absolute: the X coordinate of the current widget’s position relative to the page.
o Pos.Y relative: the Y coordinate of the current widget’s position relative to its closest parent container.
o Pos.Y absolute: the Y coordinate of the current widget’s position relative to the page.
o Width: the width of the widget in pixels.
o Height: the height of the widget in pixels.
o Angle: the rotation angle of the widget in degrees.
o Is visible: will be true when the widget is visible and false otherwise.

Note: both the X and Y positions, absolute or not, refer to the top-most and left-most positions of the widget respectively.

2) Variables: Variables act as generic containers for data which can be used in expressions.

3) Data Masters: Use a Data Master in an expression to operate with all its records. You can also use the Data Masters’ attributes in order to filter a Data Master among other functions.

Next tutorial > Define complex interactions in your prototypes with the help of conditions

2 Comments

  1. Tonya

    January 8, 2016 at 1:12 am

    Does the Pos.Y coordinate, for either absolute or relative, refer to the top-most value of the widget position or the middle of the widget position? Same for Pos.X – does it refer to the left-most value of widget position or the middle of the widget position?

    • admin

      January 8, 2016 at 9:21 am

      Hello, both the X and Y positions, absolute or not, refer to the top-most and left-most positions of the widget respectively.