Data privacy notice

 

When this content is loaded, usage information is transmitted to Vimeo and may be processed there.

 

             

Form widget: calculation field

Modified on Thu, 20 Jul, 2023 at 10:28 AM

Overview

The plug-in provides a new widget in the designer, which allows mathematical calculations to be carried out in a simple way. The widget creates a locked input field that is used to output the result. In the properties of this input field, a formula can be created with field placeholders such as
([%tf1%] + [%tf2%]) / 1.19
can be entered. In addition, the font colour and output format for the result can be specified.


Installation

The plugin can be installed as a client plugin or system plugin.


Configuration

The following properties can be configured on widgets of this type:


Style

Possible properties and their default values after the output format option has been selected and the result of this configuration in the form.

Configuration options for the font colour after the colour change option has been selected.

NameBeschreibung
Output formatBy selecting this option, the output (if it is a number) can be formatted with properties from the Autonumeric javascript library. When this option is selected, the unit alignment, decimal places, thousands separator, decimal separator and unit properties become configurable.
Alignment of the unitSets the position of the unit. You can choose between right of the value and left of the value. Only visible if the output format option has been selected.
Decimal placesNumber of decimal places that are always visible. If this field is visible, it must be filled in, otherwise the calculation widget will not function. Only visible if the option Output format has been selected. Default value: 2
Thousands separatorOptional character that is inserted between thousand digits when outputting the numerical values. Only visible if the output format option has been selected. Default value: .
Decimal separatorCharacter that is inserted between the places before and after the decimal point when the numerical values are output. If this field is visible, it must be filled in, otherwise the calculation widget will not function. Only visible if the option Output format has been selected. Default value: ,
UnitOptional character or optional intermediate string that is displayed in addition to the value in the field. The position can be set with the property Unit alignment. Only visible if the output format option has been selected.
Colour changeSelecting this option allows you to set the font colour for positive and negative numbers. When this option is selected, the Positive Colour and Negative Colour properties become configurable. No colour change is made for numerical values that correspond to zero and texts.
Positive colourA predefined selection of colours or a colour picker can be used to determine the colour with which the value visible in the field is to be displayed if it is a positive number. Only visible if the colour change option has been selected.
Negative colourA predefined selection of colours or a colour picker can be used to determine the colour with which the value visible in the field is to be displayed if it is a negative number. Only visible if the colour change option has been selected.


Calculation

The properties available in this area are used to define the type of calculation and the formula to be used for the calculation.

Example of the calculation formula for a concatenation of strings of the input fields tf1 and tf2 and the result in the form.

Example of a calculation of a field that is further up in the form than the calculation fields whose value it accesses. By assigning a value to the order index on the calculation widget of the subtotals, these are calculated first and only then is the total calculated.

NameBeschreibung
Calculation fieldA calculation formula can be entered in this field, which is not named with a label, and which is executed again each time the value of one of the input elements used in the calculation formula changes.
JavaScript is used as the syntax. In addition to jQuery selectors, FORMCYCLE placeholders can also be used to determine the values to be used from other input elements.
Blank fieldsHere you can select what should happen if a form element has no value. Either it is treated like the number 0 or like empty text. For numerical calculations, the value should usually be treated like the number 0.
Index orderThis option is only necessary in exceptional cases. By default, the fields are automatically processed in the order specified by the formulas. If the automatically recognised sequence is not correct, an index number can be assigned. If an index is set in at least one formula field, the order of processing is as follows: First, all calculation fields with an index are processed, proceeding from the lowest index value to the highest index value. Then, all calculations without an index are executed according to the normal rules (from top to bottom and from left to right).


Print image in Word/PDF export

When a form is exported via Word/PDF export, the widget looks like a normal input field set to readonly.


Formula examples

FormelErklärung
[%tf1%] - [%tf2%]
 
$('[name=tf1]').val() - $('[name=tf2]').val()
Subtraction of the values in the input fields tf1 and tf2 once using passwords and once using jQuery selectors
[%tf2%] * (1 + ([%tf1%] / 100))If, for example, the tax rate is entered in tf1 and the net amount in tf2, the gross amount is calculated
[%tf1%] + " " + [%tf2%]String concatenation from the inputs in the input fields tf1 and tf2
[%tf1%].lengthNumber of characters entered in the input field tf1
([%tf1%]<2) ? "Genehmigt" : "Abgelehnt"If the value in tf1 is less than 2, "Approved" shall be output. Otherwise "Rejected".
$('[org_name=tf1]').sum()

$('[data-org-name=tf1]').sum()

(neue Schreibweise bei W3C konformen Modus)
Example for calculating the sum of repeated elements with the name tf1. For repeated elements and elements within repeated containers and fieldsets, a normal JavaScript selector or, as in this example, a jQuery selector must be used.


Possible CSS adjustments

To format the output, adjustments can be made using CSS. For example, if the output is to look like text instead of a locked input field, the following CSS code can be used:

.CXFormula .label-top{
    display: none;
}
.XFormula{
    border: none !important;
    background: none !important;
    padding: 0;
}

Version history


2.2.0

  •     Requires at least FORMCYCLE version 7.2.0.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article