Progress Indicator
The Avonni Progress Indicator visually displays a task or process's current and completed steps.
Overview
The Progress Indicator tracks a user's position in a multi-step process. It supports six visual layouts and connects to Manual, Variable, or Picklist data sources. Users can click steps to navigate, and the component exposes which step was clicked as an output variable.
Tutorials
Getting Started
Building Progress Indicators
Advanced Techniques
Configuration
To configure it, click the component on the Flow screen. The Edit Progress Indicator Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
Connect the Progress Indicator to its list of steps.
Data Mapping
When using Variable or Picklist, configure Data Mappings in the Properties tab to tell the component how to build each step from your data:
Value — The step identifier; matched against Current Step to determine which step is active.
Label — Display text for the step.
Icon Name — Icon displayed on the step indicator.
Content — HTML content shown beside the step (Vertical type only).
Sub Steps — Nested sub-steps under this step.
Actions — Action buttons displayed on the step.
Disabled — Marks the step as non-interactive.
Hidden — Hides the step from the indicator.
Properties
Type
The visual layout of the indicator: Horizontal (default), Vertical, Bar, Circle, Path, or Vertical Navigation.
Variant
Applies to Horizontal, Vertical, and Vertical Navigation types. Base (default) — standard appearance. Shaded — adds a light gray border to step indicators.
Format
Applies to Horizontal, Vertical, and Path types. Linear (default) — steps must be completed in order. Non-Linear — any step can be active regardless of prior completion.
Current Step
The value of the step that should be highlighted as active. Set this to a flow variable that updates as the user progresses (e.g., {!currentStep}).
Completed Steps
A list of step values to mark as completed. Supply a text collection variable that grows as the flow advances.
Error Steps
A list of step values to mark with an error indicator. Applies to Horizontal, Vertical, and Path types.
Show Step Number
When enabled, step indicators show a number instead of a dot (Horizontal and Vertical types only).
Show Step Label
When enabled, the step label is shown below each indicator (Horizontal and Bar types only).
Step Label Position
Where the label appears relative to the step — Top or Bottom (default). Applies to Horizontal type only.
Hide Bar Value
When enabled, hides the percentage value inside the Bar type progress track.
Mark as Complete
When enabled, all steps are immediately marked as completed.
Has Error
When enabled, the current step is shown in an error state. Applies to Horizontal, Vertical, and Path types.
Enable click for each steps
When enabled, all steps are clickable regardless of whether an interaction is configured. Applies to Horizontal, Vertical, Path, and Vertical Navigation types.
Horizontal
Shows progress through a left-to-right sequence, guiding users through tasks or stages efficiently.
Vertical
Designed to track the progression of tasks or processes in a top-to-bottom layout.
Bar
Shows task completion as a horizontal fill within a bar, increasing as progress towards the goal advances.
Circle
Visually tracks task completion in a circular path, filling or highlighting as progress is made.
Path
Each step is denoted by a distinct marker, reflecting the flow of the process.
Vertical Navigation
Marks progress through steps in a top-to-bottom layout, visually guiding users through stages or tasks.
Setting the Current Step
The progress indicator highlights whichever step matches the Current Step value. There are two approaches:
1. Manual value — ideal when steps are fixed and don't change based on user input. Enter the value of the step directly (e.g., "verification").
2. Flow variable — use this for dynamic flows where the current step changes based on user choices. Set Current Step to a text variable (e.g., {!currentStep}) and update that variable as the user advances through the flow.
Step Icon
The Step Icon group appears when Type is Horizontal or Vertical. It controls the appearance of the step bubbles.
Icon Alignment
Vertical type only. Aligns the icon and actions: Center (default) or Top (useful for multi-line step content).
Icon Size
Size of the step bubbles: Small (default), Medium, or Large. Medium and Large display the step number if no icon is set.
Error Icon Name
The icon to display on steps in error state (default: utility:error). Applies to Horizontal, Vertical, and Path types.
Error Image Source
An image URL to use instead of an icon for error steps.
Hide Error Icon
When enabled, suppresses the error icon on error steps. Applies to Horizontal, Vertical, and Path types.
Current Step Icon
The Current Step Icon group allows you to set a custom icon or image specifically for the active step (Horizontal and Vertical types only).
Icon Name
A Lightning Design System icon name to display on the active step.
Image Source
An image URL to display on the active step instead of an icon.
Interactions
Interactions define what happens when users interact with the Progress Indicator. Configure them from the Interactions tab of the Edit Progress Indicator panel.
Step Click
Fires when a user clicks a step. Use this to navigate to a corresponding screen or update the active step — the clicked step's record and value are available as output variables (clickedStep, clickedStepValue).
Step Action Click
Fires when a user clicks an action button on a step. The name of the clicked action and the record of its parent step are exposed as output variables (clickedStepActionName, clickedStepActionStep, clickedStepActionStepValue).
Styling
The available style options depend on the Type selected.
Margin: Controls the spacing around the outside of the entire progress indicator component.
Padding: Sets the space between the component's border and internal elements.
Border: Customize the border's appearance (style, width, color).
Container: Style the overall box that holds the progress indicator elements
Horizontal
Bar: Modifies the appearance of the progress bar itself.
Icon: Style the icons associated with each step (if used).
Step Label: Control the font, text size, color, etc., of step labels.
Vertical
Step Content: Style the area below a step label where additional descriptive text could be displayed.
Sub-Step Label: Control the appearance of labels for sub-steps (if applicable).
Bar
Label: Style the text labels for each segment of the bar.
Value: Style how the progress value is displayed (if applicable).
Circle
Circle: Adjust the circle elements' size, color, and outline.
Title: Style the step titles within or near the circle elements.
Path
Size: Adjust the size of the path graphic.
Vertical Navigation
Size: Set the overall width of the vertical navigation bar.
Important: Remember that not all types will have all attributes
Output Variables
The Progress Indicator exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Progress Indicator component, and pick the output variable you need.
Step Click
Available after a user clicks a step (requires an On Step Click interaction or Enable Click for Each Step to be on).
Clicked Step
Record (SObject)
The full record of the step the user clicked.
Clicked Step Value
Text (String)
The value identifier of the clicked step — use this to update a Current Step variable and advance the indicator.
Example: A five-screen flow uses a progress indicator as a navigation menu. When the user clicks the "Review" step, Clicked Step Value returns
"review". A Decision element checks that value and routes the flow to the correct screen.
Step Action Click
Available after a user clicks an action button on a step.
Clicked Step Action Name
Text (String)
The name of the action button that was clicked — use this to branch logic when multiple actions are on the same step.
Clicked Step Action Step
Record (SObject)
The full record of the step that contained the clicked action button.
Clicked Step Action Step Value
Text (String)
The value identifier of the step that contained the clicked action button.
Example: Each step has "Approve" and "Reject" action buttons. After a click, Clicked Step Action Name returns
"approve"or"reject"and Clicked Step Action Step Value returns the step's identifier, so a Decision element can route accordingly.
Flow Interaction Output Variables
Like all interactive Flow components, the Progress Indicator exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?