Tutorial: Tip calculator with JavaScript macro

You can execute code from within your flow, by using the Macro element in ManyWho.

The macro can be used for calculations (X times Y), logic (If X greater than Y Then…), as well as data validation (If (X == “”) then generate an alert that X can not be empty).

ManyWho macros support JavaScript.

Let us create a simple macro that calculates the tip of a restaurant meal, based on the meal cost entered by the end-user times 15 per cent, and outputs the meal cost, the tip, and the cost of the meal plus the tip.

You will need:

  1. ManyWho username/password. (If you do not have a ManyWho login, please click here to request one.)

Let’s get building!

  1. Click LOG IN to login to the ManyWho Drawing Tool.
  2. Create a new flow called Tip Calculator using the ManyWho Identity service.
  3. Drag a Page element from the sidebar to the canvas.
  4. In the Configuration Panel, copy-paste the text Meal amount in the Name field.
  5. Click New Page Layout.

    This opens a new page layout called New Page in a new tab.
  6. Click the gears icon on the right-hand-side.

    This opens the Settings screen for the page.
  7. Write Meal amount in the Name and Label fields and click Save.

    This saves the name and label of the page.
  8. We will now save the page. Click the Save icon the right-hand-side navigation.

    The page name changes to Meal amount.
  9. From the Input section in the sidebar, drag an Input component into Main container.

    This opens the Configuration Panel for the Page Component.
  10. Write Entering meal amount in the Name and Label fields.
  11. Check the box next to Required.
  12. Click Select or create a new value in the Save the selection made by the user to field.
  13. Click Create a new Value.
  14. Type Meal cost in the Name field.
  15. Select Number in the What kind of value is this field and click Save.
  16. Click Save Component.
  17. Click the Save icon the right-hand-side navigation to save the page. This is what the page looks like now:
  18. Click the Tip Calculator tab to go back to your flow.
  19. Click Save Page.

    This updates the name of the page. This is what the canvas looks like now:
  20. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  21. Drag an arrow from Start to Meal amount.
  22. In the Configuration Panel, type Go in the Name text field and click Save Outcome.

    This is what the canvas looks like now:
  23. We will now create a value that will hold the total cost of the meal (the cost of the meal entered by the user + the tip amount). Click Home and select Values.
  24. Click New Value.
  25. In the Name field type Total meal cost, select Number in the What kind of value is this field and click Save Value.
  26. Let us now create a value that will hold the tip amount. Click New Value again.
  27. Type Meal tip in the Name field, select Number as the kind of value, and click Save Value.
  28. We will now create a macro that will do the math for us, calculating the tip amount. Select Macros.
  29. We will create a new macro. Click New.
  30. Type Tip Calculator in the Name field and click Save.

    This updates the name of the macro.
  31. We will create a variable called tip that is 0.15 times (or 15 per cent) of the meal cost.  The Meal cost is a value we created in the flow – and it is the value that stores the cost of the meal as will be entered by the user of the app. Copy-paste this line in the editor:
    var tip = state.getNumberValue(“{![Meal cost]}”)*0.15;

    The line numbers are auto-generated.
  32. We will now calculate the total cost of the meal. Let’s create a variable called total, and assign it that the value of the meal cost plus tip. Copy-paste this code in the second line of the editor:
    var total = state.getNumberValue(“{![Meal cost]}”)+tip; 
  33. Now that we have calculated the total meal cost and the tip, we need to assign these numbers to values. We will then display the values to the end-user. Copy-paste this code in the third line of the editor:
    state.setNumberValue(“{![Meal tip]}”, tip);
  34. Copy-paste this code in the third line of the editor:
    state.setNumberValue(“{![Total meal cost]}”, total);
  35. Click Save.
  36. Click the Tip Calculator tab to come back to your flow and click Shared Elements.
  37. Click Macros.
  38. Click Import Existing. This shows a list of all macros available in the tenant.
  39. Click the Import button next to Tip Calculator to import the macro in your flow.
  40. Click Close.
  41. Drag an Operator element to the canvas.
  42. In the Name field, type Calculation.
  43. Click the + icon to expand the Advanced options.
  44. Click Add Macro.
  45. Select Tip Calculator as the macro you want to run from the drop-down menu and click Apply Macro.
  46. Click Save Operator.

    This is what the canvas looks like now:
  47. Hover your mouse on Meal amountThe mouse pointer changes from a crossbar to a hand.
  48. Drag an arrow from Meal amount to Calculation.
  49. In the Configuration Panel, type Go in the Name and Label text fields.
  50. Click Save Outcome.

    This is what the canvas looks like now:
  51. We will now create a Step to display the calculated values to the user. However, before we are able to use the values in a flow, we need to import the values. Let us do that first. Click Shared Elements.
  52. Click Import Existing. This lists the values available in your tenant.
  53. Click the Import button next to Meal tip.

    This imports the Meal tip value to the flow.
  54. Click Import Existing again.
  55. Click the Import button next to Total meal cost.

    This imports the Total meal cost value to the flow.
  56. Click Close.
  57. Drag a Step element from the sidebar to the canvas.
  58. In the Configuration Panel, copy-paste the text Your total is in the Name field.
  59. In the content editor, type The cost of your meal is
  60. Click Insert Value.

    This opens the Insert a Value dialog box.
  61. Select the Meal cost value from the list.
  62. Click Ok. This inserts the Meal cost value in the content editor. When the app is run, this value will display the meal cost entered by the user.
  63. Copy-paste the text Your tip is in the next line.
  64. Click Insert Value again.
  65. Select the Meal tip value from the list and click Ok.

    This inserts the Meal tip value in the content editor. When the app is run, this value will display the meal tip, as calculated by the macro.
  66. Copy-paste the text Your total amount is in the next line.
  67. Click Insert Value again.
  68. Select the Total meal cost value from the list and click Ok.

    This inserts the Total meal cost value in the content editor. When the app is run, this value will display the total meal cost, as calculated by the macro.
  69. Click Save Step.

    This is what the canvas looks like now:
  70. Hover your mouse on CalculationThe mouse pointer changes from a crossbar to a hand.
  71. Drag an arrow from Calculation to Your total is.
  72. In the Configuration Panel, type Go in the Name field.
  73. Click Save Outcome.

That was fast!

And… we are done building. This is what the canvas looks like now:

Let’s run the flow now, and see how easily it converts into an app.


Appchievement!

It took us around 20 minutes to create a JavaScript macro, and use that to calculate the tip from a meal amount entered by an user, and then display the tip amount to her.

This is what the first screen of the app looks like on a browser:

Let’s enter the bill amount here (say, 198.76), and click Go. Keep in mind, the bill amount is a number, so we will not be entering the $ currency sign – just the amount as a number.

This displays the total cost of the meal, the tip, and the total amount of the meal with the tip.


Check out the ManyWho glossary for a definition of terms and key concepts that appear in the ManyWho website, Drawing Tool, technical documentation, blogs, and marketing communications.

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.