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
|
|
| Name | Beschreibung |
|---|---|
| Output format | By 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 unit | Sets 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 places | Number 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 separator | Optional 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 separator | Character 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: , |
| Unit | Optional 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 change | Selecting 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 colour | A 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 colour | A 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.
|
|
| Name | Beschreibung |
|---|---|
| Calculation field | A 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 fields | Here 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 order | This 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
| Formel | Erklä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%].length | Number 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
Feedback sent
We appreciate your effort and will try to fix the article
