Skip to main content

Stepper widget

The Stepper widget shows a sequence of steps for the current record and highlights which step the user is on. Use it for multi-step applications, onboarding, checklists, or any guided flow where progress should stay visible.

Typical scenarios:

  • a multi-step application or onboarding form;
  • a guided request that must be filled in a fixed order;
  • a workflow where users should see progress and optionally jump back to an earlier step.

The selected step is driven by Selected when conditions on a field of the page object (a status or progress field). Advancing usually means a form task updates that field and reloads.

tip

Prefer this Stepper widget over the deprecated form Display as → stepper setting.

Two canonical layouts​

There are two standard ways to build a stepper. Choose one and stick to it.

1. All steps on the same page (Navigate → Same page)​

Put the Stepper and every step’s widgets (usually forms) on one page. Use each widget’s visibility rules so only the widgets for the current step are shown.

On the Stepper:

  • set Destination to Navigate to the step page;
  • for each step’s redirect (when clickable), choose Same page.

After a form submit (or a clickable step task), follow-up should also reload the same page. The stepper re-evaluates Selected when, and visibility rules reveal the matching widgets.

This is the simplest layout when every step edits the same record and you want a side rail (for example Stepper at 25% next to forms at 75%).

2. One child page per step (Open under the stepper)​

Put only the Stepper on the parent page. Create a child page for each step (forms, detail, rich text, and so on), and point each step at that page.

On the Stepper:

  • set Destination to Open under the stepper (the step page is shown below the stepper on the parent page);
  • for each step, set Page under stepper to the matching child page — Same page is not allowed in this mode.

Only the current step’s page is embedded. A step page is reachable while that step’s Selected when condition matches the record. Use this when steps are large, reuse different layouts, or you want clear page boundaries per stage.

How to create a Stepper​

  1. Drag a Stepper widget onto a page that is bound to a record (for example a detail page opened from a grid).
  2. Add one step per stage and set a label (and optional icon) for each.
  3. On each step, set Selected when so that step becomes current for its stage (usually “status/progress equals this stage”).
  4. Choose Destination: Navigate to the step page or Open under the stepper (see above).
  5. Optionally set Width to 25% so the stepper sits beside content (especially for the same-page layout).

Same-page walkthrough​

Use one field on the page object to store the current stage — a Choice field (personal, address, review) or a number (1, 2, 3). Give it a default equal to the first step so new records start in the right place.

Set Destination to Navigate to the step page. Hidden forms do not take layout space, so a 25%/75% split stays intact as the user moves from step to step.

1. Stepper at 25% width​

Set the stepper Width to 25% (widget title tab). It stays on the left as a progress rail.

2. Forms at 75% width​

Add one update form per step for the same object, and set each form Width to 75%. Because only one form is visible at a time, that form sits beside the stepper instead of wrapping onto a new row.

3. Show only the current form​

On each form, open Visibility and set Show widget when so the form appears only for its stage — for example step equals personal on the first form, address on the second, and so on.

4. Advance on submit​

On each form (except the last):

  1. Add a task that updates this record and sets the status/progress field to the next step.
  2. In Follow-up, redirect to the current page / Same page (the default reload is enough).

After submit, the page reloads with the new value: the stepper selects the next step, and the matching form becomes the only one visible.

On the last form, skip the “next step” update, or set a final status such as completed, and follow up wherever the user should land (thank-you page, parent, or the same page).

5. Select the current step​

Back on the stepper, assign Selected when on each step so it matches the same status/progress values you used for form visibility.

The stepper does not change data by itself; it only reflects the field. The forms (and optional clickable tasks) are what move the user forward or back.

Child-page walkthrough (embed)​

  1. Create child pages under the parent — one per step — with the forms or other widgets for that stage.
  2. On the parent, place the Stepper and set Destination to Open under the stepper.
  3. For each step, set Selected when as usual, and Page under stepper to the matching child page.
  4. On forms inside each child page, advance the status/progress field on submit; follow-up should return to the parent page (so the stepper reloads and embeds the next child).

Only the current step’s child page appears under the stepper. Other step pages stay unreachable until their condition matches.

Clickable steps (go back)​

Set Mode to Clickable when users may reopen earlier steps. On each step you allow going back to, configure a task that updates the status/progress field so that step’s Selected when matches again.

  • Navigate + same-page layout: redirect to Same page after the task.
  • Open under the stepper: after the rewind task the parent page reloads and the panel shows that step’s child page again.

Attach tasks only to steps the user should be allowed to reopen. Read-only mode still highlights progress but does not run click tasks.

Width​

On the widget title tab, Width controls how much horizontal space the stepper occupies: 100%, 75%, 50%, 33%, 25%, or 16% (default 100%). Use 25% next to 75% forms for a side rail on the same-page layout; a full-width stepper works well above an embedded child page.