Learn how to prototype web and mobile apps

Add mathematical expressions to your interactive prototypes

Add mathematical expressions in your interactive prototypes with the help of this tutorial.

Add mathematical expressions to UI prototypes

You can operate with data from any data source on your prototype like input widgets, text widgets, Data Grids, Data Masters etc. The most basic and common operations are the arithmetic ones which apply only to numbers. You will be able to operate with either integer or decimal numbers.

In the example below, when you enter 3 numerical values and press the Calculate button, the total will be calculated. 

We’ll reproduce this example to help you understand its functioning.

You can download an example here.

  1. In a new prototype, drag four Input text fields, four Text widgets and a Button, and lay them out as you can see in the example above.
  2. Select the Button, go to the Events tab and add an ‘On click’‘Set value’ event
  3. Select the Input text widget where the total will be displayed, and click on the “Calculated” button located next to the ‘value is‘ input, at the bottom of the Events dialog.
  4. Drag the first three Input text widgets and the + function onto the Expressions builder, as shown in the image below:

Add math expressions to UI prototypes


Then press OK twice. And that’s all. Pretty easy huh? Simulate and enjoy!

Next tutorial > Change the quantity format in your interactive prototypes