Stepper

Use the Stepper widget to guide users through a multi-step workflow. The widget displays the sequence of steps, shows which steps are complete, and highlights the active step.

Configuration options

You can configure the following options on the Widget setup tab of the widget configuration panel:

• Type
  • Linear: Linear restricts which steps users can select based on the configured completion variables. If no step has an Is completed variable, users can select any step. Otherwise, users can select any step up to and including the step after the furthest completed step, and steps without an Is completed variable count as incomplete. For example, if step 3 is the furthest completed step, users can select steps 1 through 4. If no step is complete, users can select only step 1.
  • Non-linear: Users can navigate between steps and complete them in any order.
• Steps: Select Add Step to add a step for each stage of your workflow. Configure the following options for each step:
  • Label: Set the text displayed for the step.
  • On click: Add one or more Workshop events to trigger when a user selects the step. If no step has an On click event, users cannot select any step. To display the step in the Active color while a specific tab is selected, add the Switch to {tab name} event for that tab. To display the step in the Active color while a specific page is open, add the Switch to {page name} event for that page. For more information, see active step.
  • Is completed: Set a Boolean variable that indicates whether the step is complete. When the variable is true, the step displays a check mark instead of its number or icon and uses the Completed color, or the Active color if the step is active.
  • Icon: Set the icon to display for the step when you select Use icons for Template. The default is Symbol circle.
• Style
  • Classic: Displays each step as a circular marker. Linear steppers connect the markers with a line.
    • Direction: Select Horizontal or Vertical.
    • Template: Select Text only to display a number for each step, or select Use icons to display the Icon configured for each step. In a Linear stepper, Use icons also displays a caption, such as STEP 1, above each step label.
  • Prominent: Displays the steps as filled segments. Linear steppers display chevron-shaped segments, and Non-linear steppers display flat segments.
    • Template: Select Text only to display a number for each step, or select Use icons to display the Icon configured for each step.
    • Show step number: Toggle on to display a caption, such as STEP 1, above each step label. This option applies to Linear steppers that use the Use icons template.
• Completed color: Set the color of completed steps. The default is Green 3.
• Active color: Set the color of the active step. The default is Blue 3. A step can display this color only if its On click setting includes a Switch to {tab name} or Switch to {page name} event. For more information, see active step.

Active step

The Stepper widget determines its active step the same way that the Tabs widget determines its selected tab. A step can be active only if its On click setting includes a Switch to {tab name} event for the selected tab. A Switch to {page name} event for the current page also qualifies. Selecting a step does not, by itself, make the step active. If no step has a matching event, the widget does not display the Active color. For more information, including how the widget chooses between steps with matching events, see selection state and its limitations.

If the active step is also complete, the step displays a check mark and uses the Active color instead of the Completed color.

The Stepper widget does not output the active step as a variable.

Set up steps that switch tabs

To show users which step of a tabbed workflow they are on:

1. Make sure that your page has at least two sections. For example, choose Set layout on an empty section and select Columns. For more information, see section layouts.
2. In one empty section, choose Set layout and select Tabs. Add a tab for each step of your workflow.
3. In a different section, choose Add widget and add a Stepper widget. Placing the widget outside the tabbed section keeps it visible when the selected tab changes.
4. Select Add Step to add a step for each tab. In the On click setting of each step, select Add event and choose the Switch to {tab name} event for the matching tab. For example, for a tab named Tab 1, choose Switch to Tab 1.
5. Optionally, in the Is completed setting of each step, set a Boolean variable that is true when the user completes the step. In a Linear stepper, users can select only steps up to and including the step after the furthest completed step.

When the module loads, the step for the default tab displays in the Active color. When a user selects another step, the module switches to that step's tab, and the widget highlights that step.