top of page

Moji5 Knowledgebase

Creating client-side calculation

Problem

You need to apply client-side (javascript) computation on two or more fields on the form.

In this example, you have a form with these fields:

  • Revenue

  • Costs


You need to calculate the amount of donation to charity, which is equivalent to 15% of the Gross Profit (Revenue - costs), and display this charity amount to the user.


Solution

Setting up the sample:

1. Create a new form called "Sample Calculation".

2. Create three fields:

  • Revenue (money field)

  • Costs (money field)

  • Donation to charity (money field)


The solution:

1. Click the "Advanced settings" icon next to the "Donation to charity" field.


2. In the next page, in the Dynamic value (browser-side) field, click the "Pick fields" link (shown below).


3. In the popup window, click the "Revenue" item.







This will place the tag for "Revenue" in the "Dynamic value" box (as shown below).

4. Manually type in the "minus" symbol after the [$Revenue] tag.

5. After doing so, click "Pick fields" again, and choose the "Costs" field.

6. You should now have the following in the box (If you do not have this, you can simply edit the value in the box directly):

7. So far that would give you the gross profit, but the value we need to display is 15% of this amount. To calculate this, place round brackets around the formula, and multiply the amount by 15/100 (as follows):

([$Revenue] - [$Costs]) * 15/100

8. Click "Save changes".


9. Publish your form by click "Publish and return".











10. Click "Generate now".


Testing your solution:

1. Run the application & launch the form.

2. You will notice that as you type in the values for revenue and cost, the value in "Donation to charity" will immediately reflect the result after calculation.


You can create formulas of any complexity. The minus, addition, division and multiplication symbols (+, - , /, *) are all supported. The formula you write here is directly converted into javascript intact. Hence, you can even place javascript function calls in this area.


Comments


bottom of page