First steps:Simple Calculator

  • Font size: Larger Smaller
  • Hits: 34403
  • Print

In order to build a calculator, you need to follow these simple steps:
- Configure your input fields
- Create your input form
- Write down your calculations
- Create your output/result section
- Publish your calculator

1. Configure your input fields

After filling the first tab of your calculator configuration, with the calculator name, description and a free section of html content if you want to show it on top of your form, you can switch to the 'Fields' tab, where you will configure the input fields you want for your form.

Clicking in Add field button we add fields to our form. For our example we'll create 2 number fields. For each field you must introduce at least it's label, the variable name(this is an 'alias' you will use for placing this field at the layouts and using it at the calculations), and the field type. A valid variable name starts with a letter or underscore, followed by any number of letters, numbers, or underscores.
You can set more parameters like number of decimal places allowed, or up/down limits for the number introduced, required fields...all these settings will be transformed to form validations when users fill in the form and press 'Calculate'. You also have available a css input to add any class to your field.

2. Create your input form

The form layout is set using the 'Form layout' option of the top toolbar. You will find an html editor for you to configure your preferred input view. You can freely add any html here, and you can use ##yourfield## syntax (using the variable name) for placing an input field at the form. The available variable names are shown at the left section of the page. You have some helper buttons at the top that you can use to generate automatically an input form with labels and fields in 1,2 or 3 columns.
At the left side you can configure where the result section will be placed.

3. Write down your calculations

Returning to the main configuration page you can write down the formulas needed to get your results. You must configure the operations needed following PHP sintax. Basic rules are the result of the expression is written on the left, each variable must be preceeded by the $ sign, and each calculation must end with a ; .
So, in order to sum variables 'num1' and 'num2', and store the result in a new variable called 'sum', you must enter: $sum=$num1+$num2;
You have available a big set of operations and functions, here a link with more valid math operators:
Also any valid php expression will be executed by the calculator, like conditional blocks, loops...
You have at the left side some code tips to help you with some common functions, and also the code panel has some helper buttons that can help you to introduce your math expressions.

And if you don't want to write code?
For Calbuilder extended, you can replace this code section with an spreadsheet able to perform the calculations, please check the Calcbuilder extended tutorial and video in order to get more information.
This code area will be executed everytime frontend users click 'Calculate' button. Input variables, and any other variable created at this section can be used afterwards at the output section.

4. Create your output section

Once you have ready all your results, you only need to show them at the output section. If you go to 'exit layout' you will find again a html editor where you can introduce your output content. In order to print To print variables created at code section, use ##variablename##. In our code we've written:
so we can write at the exit layout: I've added your two numbers, ##num1## and ##num2## and the result is : ##sum##
Any valid html content or format can be used here.

5. Publish your calculator

We can use our calculators in two ways: using a default module standard position or insert one or more modules inside an article.
You can use more than one calculator in one page. Calculators are code independent.
At 'module manager' you will find CalcBuilder module. You can create as many calculator modules as you need.

Just select the calculator you want to publish at this module, and if the result section should appear with any visual effect among the set of effects available. Rest of configuration is the same you would enter for any other module (title, menu assignment, module permissions...).
The position can be set choosing one existing position of your template, or typing a new custom position. You can insert the calculator inside an article content using the {loadposition XXX} syntax, where XXX is the custom position name you have created.


If you publish this simple calculator example you will get the following result:

You can follow this first steps video, you will see how to get your calculator working at your site in a matter of minutes!


Last modified on

Our clients' feedback