Calculation Tab

The Calculation tab lets you react to conditions and change almost anything about a component — not just its visibility. Use it when the Conditional tab (show/hide) is not enough.

The Calculation tab is available on all standard input components. It is not available on layout containers (Panel, Columns, Fieldset, Table, Tabs, Well), display-only components (HTML Element, Signature), or on Textarea and File.

How It Works

Every logic rule has two parts:

Part	What you configure
Trigger	When should this rule fire?
Action	What should happen when it fires?

When the trigger condition is met, the action is applied. When it stops being met, the component automatically resets to its original state — no second "undo" rule is needed.

Trigger Types

Type	Use when
Simple	Field X equals a specific value — no code needed
JavaScript	More complex condition using `data.` syntax — assign `true` or `false` to `result`
Event	Fire when a named event is emitted — for button-triggered or externally-triggered events only, not for standard field changes
JSON Logic	JSON Logic expression — rarely needed; JavaScript is usually easier

Simple trigger — pick a source component and a stored value. No code.

JavaScript trigger — same data.fieldKey syntax as Advanced conditions in the Conditional tab, but assign to result instead of show:

result = data.leaveType === 'medical' && data.days > 3;

Event trigger — enter the name of a custom event. Use this only when a button or another configured action emits that specific event. Do not use it for ordinary field changes like typing, clicking, or selecting.

Action Types

Type	What it does
Property	Flip a component property: `required`, `disabled`, `hidden`, `label`, `placeholder`
Value	Set the component's value via a JavaScript expression
Custom Action	Run arbitrary JavaScript — most flexible, but use only when Property or Value is not enough
Merge Component Schema	Merge raw JSON into the component configuration — advanced use only

tip

For most cases, Simple or JavaScript triggers combined with Property or Value actions cover what you need. Event, JSON Logic, Custom Action, and Merge Component Schema are advanced options.

Worked Examples

Example 1 — Conditionally required

Scenario: Medical Certificate Number is always visible but only required when Leave Type is Medical.

The Conditional tab cannot do this — it can only show or hide, and hiding clears the value. The Calculation tab lets the field stay visible while changing only its required state.

On medCertNumber → Calculation tab → Add Logic:

Logic Name: Require if Medical
Trigger: JavaScript
```
result = data.leaveType === 'medical';
```
Action: Property → Required (required) → true

Select Medical → the asterisk appears. Select Annual → it disappears.

Example 2 — Conditionally disabled

Scenario: A "Confirmed Amount" field is editable until the submitter ticks a confirmation checkbox. Once ticked, the field locks — visible but not editable.

On confirmedAmount → Calculation tab → Add Logic:

Logic Name: Lock when confirmed
Trigger: Simple → amountConfirmed equals true
Action: Property → Disabled (disabled) → true

Tick the checkbox — the field greys out. Untick — it becomes editable again.

Example 3 — Dynamic label

Scenario: A single "ID Number" field should be labelled "IC Number" for citizens and "Passport Number" for non-citizens.

Rather than two separate fields with conditional visibility, keep one field and change its label.

On idNumber → Calculation tab → Add Logic:

Rule 1:

Logic Name: Label for citizen

Trigger: JavaScript

result = data.applicantType === 'citizen';

Action: Property → Label (label) → IC Number

Rule 2:

Logic Name: Label for non-citizen

Trigger: JavaScript

result = data.applicantType === 'non-citizen';

Action: Property → Label (label) → Passport Number

Two rules are needed here because the label changes to two different values. Each rule handles one case.

Example 4 — Auto-clear a dependent field

Scenario: Department and Approver are linked — the approver list depends on the department. When the submitter changes their department, the previously selected approver should clear automatically so they are forced to pick again.

On approver → Calculation tab → Add Logic:

Logic Name: Clear on department change
Trigger: JavaScript
```
result = data.department !== '';
```
Action: Value
```
value = '';
```

This keeps the approver field empty whenever a department is selected, forcing a fresh selection. An alternative approach is to set a Calculated Value on the approver field in the Data tab — use whichever is clearer when you come back to it later.

What the Calculation Tab is NOT For

Values that always update automatically — use Calculated Value in the Data tab instead (see Calculated Fields). It re-evaluates on every form change without needing a trigger.
Show/hide — use the Conditional tab. The hidden property action in the Calculation tab works, but the Conditional tab is the expected place for this and is clearer to other builders.

Merge Component Schema: Finding the Schema Shape

The Merge Component Schema action merges a raw JSON object into the component's configuration. To find the correct JSON structure for a property:

Open the form builder menu
Use Export Form Schema to download the current schema as form-schema.txt
Find the component in the JSON and inspect its properties

Examples of valid merge objects:

{ "placeholder": "Enter IT asset tag" }

{ "validate": { "maxLength": 10 } }

How It Works​

Trigger Types​

Action Types​

Worked Examples​

Example 1 — Conditionally required​

Example 2 — Conditionally disabled​

Example 3 — Dynamic label​

Example 4 — Auto-clear a dependent field​

What the Calculation Tab is NOT For​

Merge Component Schema: Finding the Schema Shape​