Calculator Page Type Toturial    
This topic is assigned to Victor Robu

Oct 27, 2011 02:50 AM
Hello, Seattle Clouds users!

Our team is happy to present you a new page type called Calculator. The Calculator page type is designed in order to help you and indeed the users of your app to solve predefined mathematical problems. There are many situations when you might want to use a predefined formula calculator. Some of the most popular are body fat percentage calculation, ingredient amount calculation for recipes, etc.

So, get started by adding a Calculator page to the list of all pages of your app. Go to app’s DashboardEdit Pages → + Add New Page. In the menu of all our page types select Calculator and click Create.

A page looking like this will appear:

Calculator page type stands out from the list of our other page types because it has the strongest emphasis on editing the code. To take most out of calculator page type you will have to have at least basic HTML skills, but don't worry - the default template source code is designed and formatted to be easily understood and edited.

By default Calculator page type has three input fields values of which are summed when you tap Calculate button. If your formula has more (or less) parameters than three go into HTML editor by clicking </>HTML to add more of them.

Locate the following entry:
<input id="p1" type="number" style="text-align:right; width:60%; font-family:monospace; font-size:100%; font-weight:bold;">

This is a code for one input field of your formula. Copy and paste it as many times as many parameters you have. Please note that each input field has a different ID — the first attribute of the element. The IDs are assigned to the input fields sequentially. Edit each id attribute so that its value would represent a p followed by its number in the list of the input fields. Numeration of input fields is done in natural numbers and starts from one (1).

After you have created all the input fields for formula parameters you have, it’s time to go into editing the JavaScript function that does the calculation.

Locate the following entry:
var param1=parseFloat(document.getElementById("p1").value);

This is a JavaScript code that assigns value of input field p1 to param1 variable. Copy and paste this code as many times as many input fields you have changing the numeration respectively.

Now its time to go into the formula itself. Locate the following entry:
var result = param1 + param2 + param3;

This is another JavaScript assignment. You should only take an interest in the part right to the equality sign (=). Here are all the mathematics done. Use plus sign (+), asterisk (*), hyphen (-) and forward slash (/) for adding, multiplying, subtracting and dividing parameters. You can also introduce coefficients to the parameters in case you need them.

This is it, Calculator page type needs no further editing. In case of a wrong input the Calculator will come up with the invalid input result.

Please feel free to create a support ticked or a forum post in case you need some help with our Calculator page type.

Feb 15, 2013 03:52 PM
I have successfully constructed a (very simple) formula to divide restaurant tabs using the new calculator app.

Two questions:

1) how do I have the result displayed with a dollar sign?
2) how do I truncate the result after two decimal places?


Feb 20, 2013 08:13 AM
Hello Douglas,

For the dollar sign try

document.getElementById('result').innerHTML = '&#36;' + result;

For two digits float precision try

result = result.toFixed(2);

SeattleClouds team

Jul 26, 2014 03:41 AM
Hello Vladimir,

It's a really nice feature you've made, and it could become handy in several situations for any one with a little fantasy.

Therefor I have a question, since my experience seems to be less than yours.

I'm trying to calculate "estimated production needed" where my variables are: p1: production made, p2: production pr. 24hr. And e: Optional selection.

Now the calculation is pretty simple, but my problem lies in the optional selection, where I want to have 2 options included in the calculation.
Both options relate to a "table with content" numbers of results for the production.

Can I add two tables in an extern document or in this document?
- The two tables will have about 30 different results for an calculation.


Yes, Jim. Sounds like its feasible if you can import the tables you have mentioned directly into JavaScript and take them into consideration while doing your calculations. If data in the tables doesn't change them I suggest you should fetch it dynamically from an external document. Please open a support ticket and describe your use-case so we could consult you further.

Oct 15, 2015 05:54 AM
Great feature.

I have found that when I add extra input fields that I get an error unless all of the fields have a value put into them.  Sometimes, you need to put plenty of fields into the calculator so that users can choose how many items to add up.  

How can we amend the code so that users may leave some input fields blank, if they wish?