Value calculations for your prototypes

Add mathematical expressions to your prototypes. In our example, the total of three numerical values you enter are calculated when you press the “Calculate” button.Add mathematical expressions to UI prototypes
To add mathematical calculations to your prototypes, follow these steps:

  1. In a new prototype, drag four Input text Fields, four Text widgets and a Button to the Canvas, and align them as you can see in the example.
  2. Select the Button, go to the Events palette and add an “On Click” + “Set Value” event, selecting the Input Text Field where the total will be displayed as the target of the action. For the value, select the ‘Calculated’ radio button and the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.
  3. In the builder, drag the first three Input Text Fields and the ‘+’ function into the expression, as shown in the image below:Add math expressions to UI prototypes

Click “Simulate” to interact with your prototype.

You can download our example here.