The Audit block (the Timeline block, shown as Audit in the block picker) renders a list of records along a vertical connector line. Each row has a marker on the line and a content area. It is ideal for showing chronological history, change logs and case activity.
Note: Block picker names differ from the block names. Search the picker for Audit to add this block. Searching for Timeline opens the Events Timeline block described below.
Timeline (Audit) Block
Content Properties
Bind the block's data to an array of records — each record becomes one row. Then pick a Type:
Type | Description |
|---|---|
Mapped (default) | Quick setup with predefined layout and field mapping. Map the Title, Description, Timestamp and User fields, and choose a date-time format for the timestamp. |
Custom | Full design control using slots. Add any components to the Timeline Item and Timeline Icon slots to create a fully custom timeline layout. |
Slots
Slot | Available in | Description |
|---|---|---|
Timeline Icon | Mapped and Custom | The marker drawn against each row on the connector line. Rendered once per row. |
Timeline Item | Custom only | The content of each row. Rendered once per row. |
Timeline Group Item | Custom only | The heading drawn above each group of rows. Used only when the Grouping add-on is on. |
Add-ons
Add-on | Available in | Description |
|---|---|---|
Audit | Mapped only | Shows a list of changes under each row — for each change, its title, description, operation, old value and new value. |
Grouping | Mapped and Custom | Groups rows under date headings. Group By Day (default), Month or Year, with a Format for the heading. |
Appearance Properties
Property | Description |
|---|---|
Connector Color | The color of the line that connects the rows. |
Visibility | Shows or hides the whole block. |
Styles | Width, height, flex layout, margin, padding, visibility and rotation. |
Events Timeline Block
The Events Timeline block (shown as Timeline in the block picker) is a calendar-style timeline. It places events with a start and end date on a time axis, so you can see how they overlap — for example, tasks, bookings or project phases. For an activity log or audit trail, use the Audit block above.
Content Properties
Property | Description |
|---|---|
Mapped Events | Map your event records: ID, Title, Start Date and End Date. |
Add-ons | Toolbar — controls above the timeline. Tooltip — details shown when hovering an event. |
Interactions | On Select Item — fires when the user selects an event. On Select Interval — fires when the user selects a time interval. |
Slots
Slot | Description |
|---|---|
Event Item | The card drawn on each event bar. A new block ships one with a title, tag and icon. Select it on the canvas to redesign it. |
Tooltip | The hover card shown when the Tooltip add-on is on. |
Inside either slot, bind to the event being rendered with {{ timeline1.context.item.* }}. Replace timeline1 with your block's ID. Each bar renders the card with its own record.
Appearance Properties
Property | Options | Description |
|---|---|---|
Default View | Week (default), Month, Year | The time scale the timeline opens in. |
Now Indicator | On (default), Off | Shows a marker at the current time. |
Styles | Style set | Width, height, layout, spacing, color, border and rotation. |
Stepper Block
The Stepper block renders a wizard-style step indicator. It shows a series of named steps, guiding users through a multi-step flow. It does not validate form fields itself. To show different content for each step, pair it with a Stepped Container.
Tip: Two blocks appear as Stepper in the block picker: the Stepper block and the Stepper V2 block. You can tell them apart in the Content panel — the Stepper shows Type and Initial Step; Stepper V2 shows Source, Default step and Slots.
Content Properties
Property | Description |
|---|---|
Type | Manual — you add each step under Steps. Mapped — steps come from a Data Source. |
Steps | Manual type only. Each step has a label, an optional description, a value and a Step Icon (Icon, Icon Color, Background Color). Add the Step Status add-on to show a status tag on a step. |
Data Source | Mapped type only. An array of step records. |
Step Mappings | Mapped type only. Map the Id, Label, Description and Icon fields. |
Initial Step | The step the stepper opens on, chosen by step value. |
In the Appearance panel, Allow Click Navigation lets users move between steps by clicking them. It is off by default, so only the methods move the stepper. Steps are always clickable on the builder canvas, so test this in preview.
Step States
Step states are worked out from the active step. You don't set them yourself:
State | Meaning |
|---|---|
completed | Steps before the active step. |
active | The current step. |
pending | Steps after the active step. |
Tip: To show a custom label such as "Needs review" on a step, use the Step Status add-on on that step.
Stepper Events & Methods
Event / Method | Description |
|---|---|
On Step Change | Event. Fires when the active step changes. |
Move to next step | Method. Moves to the next step. |
Move to previous step | Method. Moves to the previous step. |
Move to step | Method. Moves to the step whose value you enter in Value (a step value, not an index). |
Stepper Exposed State
State Property | Type | Description |
|---|---|---|
activeStepId | string | The value of the active step — never an index or a label. Use it in comparisons. |
currentStep | object | The whole active step: value, label, description and icon. Use it to show the step's label on the page. |
Stepper V2
Stepper V2 adds sub-steps built from mapped data, per-step icon mappings, slots and click navigation. The original Stepper also supports manual sub-steps, one level deep. For the full reference, see Stepper V2.
Key Differences from Stepper
Feature | Stepper | Stepper V2 |
|---|---|---|
Step source | Type: Manual or Mapped | Source: Manual or Mapped |
Mapped fields | Id, Label, Description, Icon | Step mappings (Id, Label, Description, Sub steps) and Step icon mappings (Icon, Icon color, Background color) |
Sub-steps | Manual only, one level deep | Manual or from mapped data, with their own mappings |
Clicking a step | Allow Click Navigation in Appearance (off by default) | Allow click navigation in Interactions |
Step status | Worked out from the active step | Worked out from the active step |
Event | On Step Change | On step change |
Behavior & Gotchas
⚠ Stepper does not validate steps
The Stepper block doesn't validate form fields on a step. Check your fields in the Next button's Click event before you call Move to next step. To swap the content for each step automatically, use a Stepped Container linked to the Stepper.
⚠ Audit data row order determines display order
The Audit block renders rows in the order records appear in its data. To show events chronologically, sort your data source by the date field before binding. The block doesn't sort on its own.
Common Patterns
Case Activity Log (Audit)
Fetch activity events: Query your data source for activity records filtered to the current case ID. Include the action taken, its timestamp and the actor.
Bind to the Audit block: Keep Type as Mapped. Set Title to the action, Timestamp to the created date and User to the actor name. Add the Audit add-on to list field changes.
Sort descending: Sort the data source by timestamp descending so the most recent activity appears at the top.
Multi-Step Wizard (Stepper + Stepped Container)
Create the steps: Add a Stepper with steps such as "Basic Info", "Permissions" and "Review".
Add a Stepped Container: Set its Stepper property to the Stepper. It creates one panel per step and shows the panel of the active step.
Build each step's content: Add the blocks for each step into its panel.
Wire Next / Previous buttons: On "Next", call the Stepper's Move to next step method. On "Previous", call Move to previous step.
See Tabs & Stepped Container for the Stepped Container reference.