Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to change the quantity format in your interactive prototypes

Change the quantity format in your interactive prototypes with the help of this tutorial.

If you need to format your numbers as money, you can see a very handy example below. It uses the ‘substring‘ function in the expression builder to split the number in three Text widgets, and joins the sections together again with a custom separator, using the ‘concat‘ function.

You can download an example here.

To reproduce this example, follow the next steps:

1) In a new prototype, drag all the 5 Text widgets you see in the example. In one of them, write the number 1234567.

2) Select anyone of those widgets, go to the Events tab and add an ‘On page load’ + ‘Set value’ event.

3) Select the first of the three Text widgets where we’ll store the number in sections. Press the ‘calculated’ button in the ‘value is’ input field and build this expression, which will return the first part of the number (1):

format-quantity-interactive-prototype

 

4) Press OK twice.

5) Now press the gear icon next to the word ‘do’ and select ‘add action’.

6) Add an ‘On page load’ + ‘Set value’ event, and select the second Text widget.

7) Press the ‘calculated’ button and build this expression, which will return the 3 digits in the middle of the number we want to format (i.e. if the number we want to format is 1234567, this expression will return 234):

substring-format-quantity-interactive-prototype

8) Press OK twice.

9) Press the ‘add action’ option again, and add another ‘On page load’ + ‘Set value’  event, selecting now the third label.

10) Select the ‘calculated’ button and build this expression, which will return the last three digits of the number:

substring-format-quantity-interactive-prototypes

11) Press OK twice.

12) Select the ‘add action’ option once again. We are going to build the final expression that will format the number adding commas.

13) Add an ‘On page load’ + ‘Set value’ event, and select the Text widget that contains the full number.

14) Press the calculator button and build this expression:

concat-format-quantity-interactive-prototypes

That’s all! You can click on Simulate and enjoy!

Next tutorial > Change the date format in your interactive prototypes