Logic & Dynamic Binding

The editor provides a powerful expression and binding engine that lets you connect canvas elements directly to dynamic dataset fields, apply conditional display rules, transform text and numbers, and loop over collections.

---

1. Working with Variables

Variables insert dynamic text or numerical values into your document output at render time.

Inserting Variables

You can insert variables into your canvas through two methods:

1. Drag-and-Drop: Drag a Variable ({}) block directly from the Block Manager onto the canvas.
2. Slash Command (/): Type / inside any active text block to open the cascading path selector dropdown and choose a payload field.

Editing Variables

To configure an existing variable, click the Edit Logic button in the Style Manager or click the Data icon (🗄️) on the floating component toolbar. This opens the Edit Variable modal where you can configure:

• Variable Path: Select or edit the JSON key path mapping to your payload data.
• Default Value: Define fallback text to display if the resolved variable path is null, undefined, or empty (e.g., Guest).
• Segment Selection Index (atIndex): Specify an index number to extract a single item from an array path.

---

2. Formatting & Aggregation Reference

Depending on the variable type and path, you can apply custom data formatting options and mathematical aggregations directly inside the variable settings modal.

Aggregation Configuration (AggregationConfig)

When binding a variable to an array or list of values, you can aggregate the data using the following calculation methods:

---

Formatting Options (FormatOptions)

Apply display transformations for numbers, currency, dates, strings, and charts:

Number & Currency Formatting

• Decimals (decimals): Controls the number of decimal places to display.
• Separators: Customize thousandsSeparator (e.g., ,) and decimalSeparator (e.g., .).
• Number Abbreviation (abbreviate): Compacts large numbers using custom suffix labels (abbreviationThousands, abbreviationMillions, abbreviationBillions, abbreviationTrillions).
• Currency Symbol: Define currencySymbol (e.g., $, €) and set currencyPosition to "before" or "after".
• Percentage (percentage): Formats numbers as percentages (e.g., 0.15 renders as 15%).

Date & Duration Formatting

• Date Formats: Select standard presets via dateFormat or specify custom syntax using customDateFormat (e.g., YYYY-MM-DD).
• Durations: Convert numerical values into time durations using durationUnit (seconds, minutes, hours, days) and durationFormat (short vs. long).

Text Transformations

• Transform: Modify text case using uppercase, lowercase, capitalize, truncate, or render inline markdown.
• Truncate Length (truncateLength): Specifies character limits when transform is set to truncate.
• Encoding (encode): Enables URL or string encoding.

---

3. Dynamic Component Attributes & Images

Component settings inside the Right Inspector Panel featuring a Data icon (🗄️) can be bound dynamically to payload data paths instead of static values.

Setting Up Dynamic Images

To render dynamic images (such as user avatars, generated charts, or dynamic product photos):

1. Select an Image component on the canvas.
2. Locate the src field in the Right Inspector Panel.
3. Click the Data icon (🗄️) next to the src input field.
4. Select the variable path containing your hosted image URL string (e.g., {{user.avatar_url}} or data:image/svg+xml;...).

---

4. Conditional Logic

Conditional components allow you to show or hide document sections dynamically based on logical rules.

Adding Conditions

• Context Menu Wrapping: Click the More Options (...) menu on any supported canvas element and choose Wrap in Condition. This wraps the selected block in a conditional statement and keeps the False / Else branch hidden by default.
• Direct Block Insertion: Drag a Condition block directly from the Block Manager. Direct insertion keeps both the True and False / Else content blocks visible on the canvas by default.

Editing Conditions

Click the Edit Logic button or Data icon (🗄️) on a condition block to open the Edit Condition modal:

• Logical Operators: Toggle between AND, OR, and XOR logic for combining multiple rules.
• Adding Rules (+ Rule): Define single comparisons (e.g., name -> startsWith -> B).
• Adding Groups (+ Group): Create nested sub-conditions for complex multi-level logic operations.

---

5. Dynamic Collections & Tables

Collection blocks allow you to repeat visual layouts, list items, or table rows across dynamic data arrays.

Configuring Collections

Click the Edit Logic button or Data icon (🗄️) on a collection container or table block to configure iteration parameters:

• Variable Path: Select the array payload path to iterate over (e.g., items or invoice.line_items).
• Sorting (+ Sorting): Add sort criteria to arrange items by specific fields in ascending or descending order.
• Filters (Filter): Build item filter rules using the integrated condition builder (AND/OR/XOR rules and groups) to suppress specific array items from rendering.

Dynamic Tables

Applying a collection to a Table component automatically creates dynamic repeating rows that expand based on the length of the bound dataset.