Timeline Block

The Timeline block renders a list of events along a vertical or horizontal axis. Each node on the timeline has a marker, a date/label, and a content area. It is ideal for showing chronological history, project milestones, or case activity logs.

Content Properties

Appearance Properties

Events Timeline Block

The Events Timeline block is a scrollable activity-feed style list. Unlike the Timeline block, it does not render a connector line — instead it shows a compact stacked list of events with icons, timestamps, and descriptions. Common use cases: audit trails, activity logs, comment histories, notification feeds.

Content Properties

Stepper Block

The Stepper block renders a wizard-style step indicator. It shows a series of named steps with status indicators, guiding users through a multi-step flow. It is primarily a navigation and status display component — it does not manage page routing or form validation itself.

Tip: Stepper provides a fixed, pre-designed step indicator. Stepper V2 exposes composable slot-based steps, giving you full control over each step's icon, label, and content area. Use Stepper for quick setup; use Stepper V2 for custom step designs.

Content Properties

Step Statuses

Each step in the Stepper has a Status that controls its visual state:

Tip: Bind the Steps array to a computed value or data source that returns step objects with a status field. Use expressions to map your domain states (e.g., "submitted" → "complete") to the four Stepper status values.

Stepper Events & Methods

Stepper Exposed State

Stepper V2 (Composable Slots)

Stepper V2 allows you to define steps using composable slots rather than a configuration array. Each step is a slot inside the Stepper V2 block. This gives you full design control over individual step indicators — you can drop in custom icons, styled labels, and content sections per step.

Key Differences from Stepper V1

Behavior & Gotchas

⚠ Stepper does not validate or route automatically

The Stepper block is a display and navigation indicator only. It does not validate form fields on a step, prevent navigation to future steps, or manage which "page content" is shown for each step. You must implement those behaviors yourself using page variables, conditional visibility, and event actions on the Next/Previous buttons.

⚠ Timeline data row order determines display order

Timeline and Events Timeline blocks render nodes in the order records appear in the data source. To show events chronologically, sort your data source by the date field before binding. The blocks do not auto-sort.

⚠ Events Timeline is not paginated

The Events Timeline block renders all records from the bound data source without pagination. For large activity logs, limit the data source query (e.g., return only the last 50 events), or implement a "Load More" pattern using a variable-driven offset.

Common Patterns

Case Activity Log (Events Timeline)

1. Fetch activity events: Query your data source for activity records filtered to the current case ID. Include title (action taken), timestamp, and actor (agent name).

2. Bind to Events Timeline: Set Title Field = action label, Timestamp Field = created_at, and Description Field = actor name. Use Icon Field to show different icons by action type.

3. Sort descending: Sort the data source by timestamp descending so the most recent activity appears at the top.

Multi-Step Wizard (Stepper + Conditional Content)

1. Create step definitions: Configure the Steps array with labels like "Basic Info", "Permissions", "Review". Set all initial statuses to pending except the first which is active.

2. Add a page variable for current step: Create a page variable currentStepIndex initialized to 0. Bind the Stepper's Current Step to this variable.

3. Show step content conditionally: Create three Container blocks — one per step. Set each Container's visibility condition to currentStepIndex == 0, == 1, etc.

4. Wire Next / Previous buttons: On each "Next" button's Click event, increment currentStepIndex and update the step's status to complete. On "Previous", decrement the index.

Frequently Asked Questions

What is the difference between Timeline and Events Timeline?

The Timeline block renders events along a visual axis line (vertical or horizontal) with connectors between nodes — it emphasizes the progression from one event to the next. The Events Timeline is a compact stacked list (activity feed style) without connector lines — it emphasizes the event content and is better for dense activity logs. Use Timeline for milestone-style displays; use Events Timeline for audit trails or notification feeds.

Can the Stepper block prevent users from skipping steps?

Not natively. The Stepper block fires On Step Click when a user clicks a step, but it does not block navigation on its own. To prevent skipping, handle On Step Click with an event action that checks whether the preceding steps are complete (using your page variable state) and only calls goToStep if validation passes.

How do I programmatically advance the Stepper when the user submits a form?

On your "Next" button's Click event (or after a successful API call action), add a Call Block Method action targeting the Stepper block and call nextStep(). Also update the Steps array's statuses — mark the just-completed step as complete and the new step as active — by updating the page variable holding the steps configuration.

How do I show the most recent event at the top of an Events Timeline?

Sort your data source query by the timestamp field in descending order before binding it to the Events Timeline block. The block renders records in the order they appear in the array — it does not sort independently.

When should I use Stepper V2 instead of Stepper?

Use Stepper V2 when you need fully custom step indicator designs — different icons, colors, or layouts per individual step — that cannot be achieved with the Stepper's configuration options. Use the original Stepper for standard wizard flows where the default status-driven step indicator design is acceptable, as it requires far less setup.