Calculated Fields — Editor — Data

Overview

Calculated fields let you perform computations directly in your template without needing to pre-compute values in your backend. They're ideal for showing totals, tax amounts, discounts, and other derived values.

Creating a Calculated Field

Add a Field element to the canvas
In the inspector, switch the field type from Data to Calculated
Enter your formula in the expression editor

Basic Expressions

Calculated fields use a simple expression syntax that references other field keys:

text

# Basic arithmetic
subtotal + tax
price * quantity
total - discount
amount / 12

# Parentheses for order of operations
(subtotal + tax) * (1 - discount_rate)

# Fixed values
subtotal * 0.1    # 10% tax
total + 5.99      # Fixed shipping

Common Formulas

Tax Calculation

text

# Tax amount (8.5% tax rate)
subtotal * 0.085

# Total with tax
subtotal + (subtotal * 0.085)

# Or using a dynamic tax rate from your data
subtotal * tax_rate

Discount

text

# Flat discount
subtotal - discount_amount

# Percentage discount
subtotal * (1 - discount_percent / 100)

# Discount amount from percentage
subtotal * discount_percent / 100

Grand Total

text

subtotal - discount + tax + shipping

Pre-compute Complex Values

For complex business logic (tiered pricing, conditional discounts), it's usually better to compute the values in your backend and pass them as regular fields. Use calculated fields for simple arithmetic.

Number Formatting

Calculated fields produce numbers. To display them as currency or formatted numbers, set the format option in the inspector:

Number — Shows as-is (e.g., 1234.56)
Currency (USD) — Prefixed with $ and 2 decimal places ($1,234.56)
Currency (EUR) — Prefixed with € (€1.234,56)
Percentage — Multiplied by 100 with % suffix (12.5%)
Custom — Define your own prefix, suffix, and decimal places

Referencing Table Data

You can reference aggregate values from table columns in calculated fields:

text

# Sum of all line item amounts
SUM(items.amount)

# Count of items
COUNT(items)

# Average price
AVG(items.unit_price)

Table aggregate functions work with the items array you pass in your API data. The column name after the dot must match the key in each item object.

Error Handling

If a calculated field references a field key that doesn't exist in the data, or if the expression results in a math error:

Missing fields are treated as 0
Division by zero shows —
Invalid expressions fall back to the default value if set

Next Steps

Date & Number Formatting — Format values for display
Tables — Dynamic table data binding
Data Binding — Pass data to your templates