Calculation

The Calculation element automatically computes a numeric result from a formula that references other form elements. The result is read-only and updates in real time as the referenced values change.

Example

The screenshots below show a simple A + B setup: two Number elements are referenced in the formula, and the Calculation element displays the live result.

Formula

The formula is a standard math expression that can reference other numeric elements using the ${elementId} placeholder syntax.

Supported operators: +, -, *, /, and parentheses ( ).

Examples:

Formula	Description
${lengthId} * ${widthId}	Area from two Number elements
(${toleranceId} / ${nominalId}) * 100	Tolerance as percentage of nominal
${priceId} * ${quantityId} * 1.19	Price including 19% VAT

Tip: Use the Insert reference dropdown in the element settings to insert ${elementId} tokens without having to type them manually. Each entry shows the element icon and label.

Tip: Chips above the formula textarea show each referenced element by name. Click a chip to copy its reference token to the clipboard.

Settings

Setting	Description
Show label	If checked, the element label is displayed above the result field.
Show formula	If checked, a chevron (▾) button appears next to the result at runtime. The end user can click it to expand a panel showing the formula expression — with element IDs replaced by their human-readable labels. If all referenced values are filled in, a resolved line (e.g. = 1 * 22) is shown below the formula.
Formula	The math expression using ${elementId} references. Required.
Decimal places	If set, the result is rounded and displayed with the specified number of decimal places (e.g. 2 → 3.14).
Unit	Optional unit label displayed next to the result (e.g. mm, kg, EUR).

Color Conditions

Color conditions allow the result to be highlighted in a specific color depending on its value. Rules are evaluated in order and the first matching rule is applied.

Each rule consists of: - Color — the color to apply to the result text (hex color picker). - Operator — one of <, ≤, =, ≠, >, ≥. - Value — the numeric threshold to compare against.

Example: Add a rule result < 0 → red to signal a negative outcome.

If-then Conditions

Like other input elements, the Calculation element supports if-then conditions: child elements (labels, alerts, etc.) that are shown or hidden depending on the computed result.

Add a condition with an operator and threshold value. Then drag any UI elements into the drop zone that appears beneath the condition — they will be rendered at runtime only when the condition is met.

Example: Condition result < 10 → show an Alert element warning the user the value is too low.

Referenceable element types

The following element types can be referenced inside a formula:

• Number
• Tolerance
• Calculation (chain calculations — result of one Calculation used in another)

Notes

• The Calculation element value is read-only at runtime — it cannot be manually edited by the user.
• If any referenced element has no value yet, the result displays as –.
• The formula is evaluated client-side in real time; no server round-trip is required.
• Works correctly inside Repeat Groups — each repetition resolves its own sibling values independently.

See also UI Designer