Wizard

The Wizard page layout is designed to guide users through a multi-step process in a clear, structured, and intuitive way. It breaks down complex tasks into manageable steps, ensuring users can progress smoothly while keeping track of where they are in the workflow.

Usage

The Wizard layout is designed to guide users through a multi-step process in a clear, structured, and intuitive way. It breaks down complex tasks into manageable steps, ensuring users can progress smoothly while keeping track of where they are in the workflow.

When to Use This Page Layout

The Wizard page layout is appropriate when a task must be completed through a defined sequence of steps. It is ideal for workflows that require user confirmation, data input, or verification at multiple points, ensuring the user clearly understands what to do next and how far along they are in the process.

Use this pattern when:

• The user needs to complete a multi-step process that cannot be done in a single screen.
• The task involves dependent steps, where one action must be completed before the next can begin.
• The goal is to guide users through a process with minimal error risk and high clarity.
• The process focuses on working with a single item or entity (e.g., a work order, a container, a document) across multiple steps.
• The primary interaction involves editing, confirming, or processing data, rather than browsing or analyzing large sets of information.
• The system needs to enforce a structured workflow with a clear beginning and end.
• The overall process remains linear, even if one step contains a smaller sub-process with its own detailed progression.
• The user may benefit from supplementary information or related actions presented alongside the main task without leaving the current step.

When Not to Use This Page Layout

Avoid using a wizard when:

• The user must work with many items at once, compare multiple entries, or switch frequently between different records.
• The workflow is non-linear—where the user should be free to jump around or perform tasks in any order.
• A task can be completed easily on a single page without breaking it into steps.
• The user needs to monitor, filter, or analyze large datasets or dashboards.
• The process requires exploratory interaction, where users must navigate freely instead of following a strict sequence.

Limitations

• Not suitable for workflows that require parallel actions or working on multiple items simultaneously.
• Navigation is usually linear, so users may not be able to easily skip ahead or revisit earlier steps unless explicitly allowed.
• Nested progress bars should be used sparingly, as a second level of progress can increase cognitive load.
• Split main content should only be used when a step genuinely requires multiple coordinated content areas.

Anatomy

The Wizard maintains a consistent dashboard layout throughout a multi-step process.

Its core structure consists of a Progress Indicator and a Main Content area. Depending on the needs of the workflow, the layout may also include other elements. These elements should stay aligned with the dashboard grid and support the primary flow without changing the overall structure of the Wizard.

Progress Indicator

The Progress Indicator sits at the very top of the main content area and spans its full available width. In the standard layout, it extends across the full width of the dashboard. When sidebars are present, it remains aligned with the main content area and next to the sidebar.

It is displayed as a ghost boardlet without a header or footer and uses the Progress States component. The stages remain consistent throughout the process and should not change between steps, except for completion marks that reflect progress.

Each stage has a descriptive title so users can clearly understand their current position in the process and the sequence of steps.

Main Content

The Main Content is displayed in a default boardlet positioned directly below the Progress Indicator and extending to the bottom of the dashboard. Its overall size should remain consistent across steps to create a stable layout throughout the process.

This area contains the content required for the current step, such as forms, details, instructions, scanning components, input fields, or confirmation modules.

When no separate Button Boardlet is used, the Main Content boardlet includes the step actions at the bottom. It should provide at least two buttons: a primary action on the right to advance to the next step, and a secondary action on the left to return to the previous step. A cancel action may also be included on the left when needed. The placement and behavior of these actions should remain consistent throughout the process.

Split Main Content

In some steps, the Main Content may be divided into multiple sections, such as a table paired with an expanded search boardlet. This split layout does not need to appear on every step. However, the combined area of all sections should remain comparable to the Main Content area used in steps without a split layout.

A split layout should use no more than three content sections. Sections may be arranged vertically or horizontally, but both orientations should not be combined within the same step unless there is a clear need.

When the Main Content is split, step actions should be placed in a separate Button Boardlet for next, back, and optional cancel actions.

Optional Button Boardlet

The optional Button Boardlet is used when step actions are separated from the Main Content, typically in split layouts. It is displayed as a default boardlet without a title or footer and is only one row high.

The primary next action is placed on the right. Back actions appear on the left, with an optional cancel action when needed. The placement of these actions should remain consistent with the rest of the Wizard.

For more details, see button boardlet.

Optional Sidebar

An optional Sidebar may appear on the right side of the Wizard and typically spans from the top to the bottom of the dashboard. It usually occupies two to three columns, reducing the horizontal space available to the Progress Indicator and Main Content.

The Sidebar does not need to be a direct part of the process. It can provide supplementary information, contextual details, or navigation actions related to the process or its subject. When needed, it may be divided into multiple boardlets.

Nested Progress Bars

Nested Progress Bars are used when a step within the Wizard contains its own sub-process. In this case, the secondary progress indicator appears within the Main Content boardlet and can be separated from the rest of the content by a Vertical Divider.

The nested progress area is positioned on the left side of the Main Content. It includes its own progress indicator and can extend vertically across the full height of the boardlet, continuing alongside both the content area and the actions at the bottom. In some cases, the secondary progress indicator may appear below essential information related to the subject of that sub-process.

This pattern does not need to appear in every step of the main process. Where it is used, the secondary steps are typically more detailed than the steps shown in the main Progress Indicator. Triggering the next-step action advances the secondary progress for as long as the nested process is active.

Completion of the nested process usually triggers a simple Modal Notification indicating whether the process was successful.

Behavior and Interaction

Main Flow

1. The Wizard opens with the current step highlighted in the Progress Indicator.
2. The user reviews or completes the content for the current step.
3. The primary action remains unavailable until the current step meets its required conditions.
4. Once the step is valid, the user selects the primary action to continue.
5. The Wizard advances to the next step.
6. The Progress Indicator updates to show the previous step as completed and the next step as active.
7. This sequence repeats until the final step is reached.

Back Flow

1. The user selects Back to return to the previous step.
2. If step selection is enabled, the user may also return by selecting an earlier step in the Progress Indicator.
3. The Wizard reopens the selected earlier step.
4. The Progress Indicator updates to show that step as active.
5. The user reviews or changes earlier input before moving forward again.

Cancel Flow

1. The user selects Cancel to leave the process before completion.
2. If leaving the process would discard progress, the Wizard shows a confirmation dialog.
3. The user either confirms the exit or returns to the current step.
4. If the exit is confirmed, the Wizard closes the process without continuing to the next step.

Nested Flow

1. A step may open with a secondary progress indicator when that step contains its own sub-process.
2. The user completes the current sub-step within that nested flow.
3. When the user selects the next-step action, the Wizard advances the secondary progress instead of the main step sequence.
4. The nested progress indicator updates as each sub-step is completed.
5. When the nested process is finished, the Wizard returns the user to the main flow of the current step.
6. The user can then continue to the next main step in the Wizard.
7. Completing the nested process may trigger a simple Modal Notification indicating whether the sub-process was successful.

Feedback Flow

1. While the user interacts with a step, the Wizard may show loading feedback while data is retrieved, validated, or processed.
2. When an action succeeds, the Wizard updates the current state and reflects progress in the Progress Indicator.
3. When an action fails or requires attention, the Wizard shows error feedback so the user can correct the issue.
4. When the overall process is completed, the Wizard shows a final confirmation or success message.

Guidelines

Structure

Keep the step model stable throughout the process. The number, order, and titles of steps should remain consistent. Do not change steps during the process unless the workflow explicitly requires it and the impact is clear to users.

Maintain a predictable layout across steps. Keep the Progress Indicator at the top and preserve a comparable Main Content footprint throughout the process. Avoid major layout shifts that force users to reorient on every step.

Steps

Keep each step focused on one clear objective. A step should support a single decision, input task, or confirmation task. Break up dense or unrelated content rather than combining too much into one screen.

Show one clear primary action per step. The primary action should always represent the next logical move forward, and its label should clearly reflect the result of the action.

Keep step actions in a consistent location. Actions may appear in the Main Content or in a separate Button Boardlet, but their placement should remain consistent throughout the Wizard whenever possible.

Variants

Use split layouts only when the step genuinely requires them. Split Main Content should support closely related tasks within the same step and should not exceed three coordinated sections. Avoid combining horizontal and vertical splits within the same step unless there is a clear need.

Treat the Sidebar as supporting content. A Sidebar may provide context, reference information, or related actions, but it should not compete with the main task or introduce a second primary workflow.

Use nested progress bars sparingly. Only introduce nested progress when a single step contains a clearly bounded sub-process. If the secondary sequence is central to the overall flow, represent it as regular Wizard steps instead.

Feedback

Make progression rules clear. Users should understand when they can continue, why an action may be disabled, and what is required to complete the current step.

Protect user progress. Back and Cancel behavior should be predictable. When users may lose work, provide a confirmation step or warning before exiting.

Provide clear feedback at key moments. Show validation, loading, success, and error states where needed, and make completion visible in the Progress Indicator and final confirmation messaging.