How to use Calculation and Summary Fields in the Advanced Form Builder

GoCanvas forms can do the math for you. We have two key field types available within the Advanced Form Builder that allow you to do complex mathematical functions as well as pull forward summary numbers from previous screens. These two field are called Calculation and Summary.

Let's build a simple sales order form, where a sales person could sell a product and have GoCanvas break out the subtotals, calculate the tax, and provide the bottom line price.

Create a Loop Screen

1. Edit an existing form or Create New from the Forms page.

2. Name your form, i.e. "Sales Order," and add a new screen.

3. Hover over the screen in the Form Outline and click the circling arrow icon to loop the screen. Let's call this screen "Materials."

Add a Calculation Field

1. On the Materials screen, add a Drop Down field and label it "Product Description." This field can be powered by Reference Data to make it easier for users to fill out the form with accurate product descriptions.

2. Add a Number field to the internal screen of the loop. You can label this "Cost." Select the field to open the Field Settings and select Currency in the Style drop down.

3. Add another Number field to your form. You can label this "Quantity."

4. Now add a Calculation field and label it "Subtotal." Open the Field Settings and look for the Calculation section.

5. Select Create Calculation. Leave the Cost field as Operator 1 and Quantity as Operator 2. Hover over the Addition icon in the center and the four operator options will expand. Select Multiplication. 

Note: You will use New Operator when creating mathematical functions with fields in your form. Use a Constant to calculate a function with a constant (static) number. You can use multiple fields and constants in a single calculation field.

Add a Summary Field

Summary fields are used exclusively to summarize number or calculation fields located in loop screens. Regardless of the amount of rows in the loop screen, this field will add every value together to give a total on a later screen.

1. Add a new screen to your form and name it "Order Summary."

2. Drag a Summary field from the palette into the form. Label this "Product Total." Select the field to open field settings.

3. Expand the Summary Screen drop down. This is the screen where the field is located that needs o be summarized. The outer part of the loop screen is named after the key field, whereas the inner part of the loop screen is labelled "Materials." Therefore, the summary screen will be named "Product Description," not "Materials" for this example.

4. Expand Summary Field. This is the field that the summary field will summarize. In this example, the summary field is "Subtotal."

Calculations on Mobile

Here is how the example above looks on mobile.

Note: the loop screen above is in the style of Grid and this option can be found in the Loop Screen Settings.

Decimal Settings

In a number field, users have the option to set the number of decimal places available in the field. If the style is set to currency, the decimal will automatically be set to 2 decimal places. If the style is set to number, however, you can choose how many decimal places will be allowed by opening the More tab in the palette and changing the decimal places field. Your options are no limit, or from 0-6.