Calculated FieldsPRO

The #calc calculated fields function in WS Form PRO makes it easy to create calculate field values that are updated in realtime. It can handle everything from simple addition to more complex trigonometric functions.

Demo

Features

• Works with all fields that can accept a numeric input (including rating and progress).
• Calculates from any field or variable that can output a numeric output (including dates).
• Works with repeatable sections.
• Full logging to the debug console.

How To Create A Calculated Field

Common field types you might use a calculated field in include:

• Number
• Price
• Text
• Text Area
• Text Editor
• HTML

You can put calculated values in the following settings of a field:

• Label
• Default value
• Content (Text Editor / HTML fields)
• Placeholder
• Help
• Minimum
• Maximum

To create a calculated field value for the default value of a field, click the field settings icon and then enter a #calc(...) variable in the Default Value setting.

Anything within the brackets will be calculated in realtime on your form and used as the value of your field.

You can create calculations such as:

#calc(1 + 2)

You can include values from other fields on your form, for example, multiplying field ID 123 value by 5:

#calc(#field(123) * 5)

You can use WS Form math variables (listed at the end of this document) to perform more complex calculations, for example, rounding the previous example to two decimal places:

#calc(#round(#field(123) * 5, 2))

You could even create a calculated field that works out the sum of all values of a field in a repeatable section. The syntax is easy:

#calc(#field(123))

… where field ID 123 is a field in a repeatable section. WS Form PRO automatically sums the values together.  The #section_row_count(456) function (where 456 is the section ID) can be used to calculate the average value of those values:

#calc(#field(123) / #section_row_count(456))

There is an easier way of creating these calculations … the calculator!

Calculator

WS Form PRO includes a calculator feature that helps creating calculated values for fields.

1. Click the field settings icon.
2. Click the calculator icon. On most fields this is found on the Default Value setting.

The calculator will then appear directly below:

The cursor will automatically position itself within the #calc() function. In addition to the normal numeric and arithmetic buttons, the calculator has the following additional buttons:

Insert Field – Click this to insert a #field() variable into your calculated field. It lists all of the fields on your form that are compatible with the calculated field feature.

del – Deletes a character

AC (All Clear) – Deletes the entire calculation

f – Inserts a math variable into your calculation such as #pi, #cos(...) or #sin(...) (See below)

Note that whilst the calculator will do its best to maintain a suitable cursor position, you can always click on the default value itself to reposition the cursor.

Source Field Rules

If a field used in a calculation is an e-commerce type (e.g. price, price select etc), the input value is assumed to be a currency and WS Form will therefore correctly interpret the price according to your currency symbol, decimal and thousand separator settings and will convert that to a floating point number.

If a field used in a calculation is not an e-commerce type (e.g. number, text, select etc), the input value should follow standard conventions used for evaluating numbers in JavaScript, i.e.

• Period for decimal separator
• No thousand separators

For example: 123.45

Display Calculations as Prices

If you wish to show a calculation as a price using your currency settings, you can use the ecommerce_price variable, for example:

#ecommerce_price(#calc(#field(1) + #field(2)))

JavaScript Floating Point Rounding

WS Form calculations are assessed using standard JavaScript. In some cases this can result in floating point numbers such as:

123.40000000000001 instead of 123.4

This is actually perfectly normal in the computing world! If you’re interested here is an explanation.

In order to get a neater looking number, simply use the #round variable, for example:

#round(#calc(#field(1) + #field(2)), 1)

The last parameter is the number of decimal places you would like to use.

Variables

In addition to #field(...), the following variables can be used inside with #calc(...).