Process Stepper

Process stepper displaying workflow steps and the item's current status.

Widget description: `stepper`

The process stepper shows the stages of a process (for example Draft, Pending approval, Approved, Completed) and highlights which step the item is currently in. The current step is determined by the value of a single column, most commonly a choice field. The widget is display-only: it does not change the status. Status changes are made by the user in the field or via a custom button. It is a virtual widget and is not saved to the item.

Process Indicator widget settings: status source field, orientation, title, and list of steps with label and value

Adding to the form

On the Widgets tab, select Process Indicator and drag it into a section.
In the inspector, select the Status source field.
Click Load steps from choices to generate steps from the column's choices, or add them manually with the + Step button.

A new widget contains four sample steps (Draft, Pending approval, Approved, Completed) and spans the full width of the section.

Inspector settings

Option	Property	Description	Default
Status source field	`stepperConfig.sourceField`	Internal name of the field whose value determines the current step. Text, choice, lookup, number, and metadata fields are offered (no widgets).	not selected
Load steps from choices (n)	`stepperConfig.steps`	Button that replaces all steps with the choices of the selected field (both label and value = choice text). Shown when the field has choices.
Indicator orientation	`stepperConfig.orientation`	`horizontal` (Horizontal) or `vertical` (Vertical).	`horizontal`
Title above indicator	`stepperConfig.title`	Optional heading; supports placeholders such as `Progress: [Title]`.	empty
Steps	`stepperConfig.steps[]`	List of steps. Each has a Label (`label`, text next to the node) and a Value (`value`, column value matching the step). An empty value means the label is matched. Steps can be removed, or added with + Step.	4 sample steps
Clickable steps	`stepperConfig.interactive`	In Edit and New mode, clicking a step writes its value (`value`, otherwise `label`) into the source column and marks the form as changed. The change is not saved automatically; save it with the regular Save button. In display mode, when the source column is read-only (`setReadOnly` rule, permissions, unloaded field) or when the stepper itself is read-only, steps are not clickable. Steps are keyboard-operable buttons (Tab, Enter, Space); the current step has `aria-current`.	off
Require confirmation	`stepperConfig.confirmStepChange`, `stepperConfig.confirmMessage`	A dialog with Confirm and Cancel is shown before the step changes. The text can be set (`{step}` is replaced by the target step label; the text is translatable), otherwise the default "Change the status to ..." is used.	off
Width in section, Visible	`colSpan`, `defaultVisible`	Common options shared by all widgets.	12, yes

Runtime behavior

The current step is the one whose value (or label when value is empty) matches the value of the source field. Comparison is case-insensitive and trims leading/trailing whitespace.
Completed steps (before the current one) are green, the current step is highlighted with a blue ring, and upcoming steps are gray. Connectors between completed steps are green.
For a choice field, the selected choice text is compared; for lookup and metadata fields, their label (or ID) is compared.
When the value does not match any step or the field is empty, all steps are gray.
The stepper updates live: changing the field in the form switches it immediately without saving. It behaves identically in all modes (New, Edit, Display).
With no steps defined, the widget displays a hint that steps should be added in settings.

Text translations

You can translate customLabel, stepperTitle, and step labels in stepperSteps (keyed by step id, with a string or an object containing label). Step values (value) are not translated because they are matched against data. See Translations and Multilingual Forms.

Rules and scripts

setVisible: shows or hides the stepper.
Advance the status by changing the source field's value: with a setValue rule, a button with a setValue action, or a script. The stepper updates automatically.

Two steppers side by side, horizontal and vertical, with the third step active. Completed steps are green, current is blue, others are gray

Configuration example (JSON)

{
  "internalName": "widget_stepper_stav",
  "customLabel": "Approval progress",
  "fieldType": "stepper",
  "colSpan": 12,
  "defaultVisible": true,
  "stepperConfig": {
    "sourceField": "Stav",
    "title": "Request: [Title]",
    "orientation": "horizontal",
    "steps": [
      { "id": "step_1", "label": "Draft", "value": "Draft" },
      { "id": "step_2", "label": "Pending approval", "value": "Pending approval" },
      { "id": "step_3", "label": "Approved", "value": "Approved" },
      { "id": "step_4", "label": "Completed", "value": "Completed" }
    ]
  }
}

Here, the Stav field is a standard choice field with the same values.

Limitations and tips

Steps are strictly linear: the widget does not support branching or backward transitions. Represent a rejected item with a status that has no step, or with a separate banner.
By default the stepper is not an input control: clicking a step does not change the status. Turn on Clickable steps if users should advance the status directly in the stepper.
Clickable steps work only when the source column is editable on the form (since 1.32.0): the column must be in the layout of the current mode (mode layouts respected; a hidden column is fine), must not have Read-only turned on in the field settings (unless a rule unlocks it) and must not be read-only in SharePoint (calculated, system or unsupported column). Otherwise the steps are shown read-only. The designer warns about it in the stepper settings.
After renaming a choice in the list column, update the step's value as well. Otherwise the step will no longer match. Clicking Load steps from choices recreates the steps (overwriting manual edits).
In vertical orientation a narrower section works well; in horizontal orientation, keep labels short when using more than six steps.