Progress Popover
The Avonni Progress Popover displays a series of steps, each with a popover containing progress indicators and contextual information.
The Progress Popover displays a horizontal sequence of steps, where each step can open a popover with additional context and an optional action button. It is well-suited for summarizing process status at a glance and allowing users to take targeted actions without leaving the screen.
Overview
Each step in the Progress Popover can carry four pieces of information: basic step details, a popover with richer content, a button for direct action, and status flags (completed, disabled, error, or warning). Steps can be defined manually or loaded from a flow variable.
Tips and Tricks: Using the Avonni New Progress Popover Step Collection action
Among the Avonni Actions available, the Avonni New Progress Popover Step Collection is a great way to define steps as a variable. Once specified, this variable can be applied wherever you use the progress popover component within your flow. The advantage is that you no longer need to manage step values individually for each instance of a progress popover component.
Watch the tutorial below ⬇️
Configuration
To configure it, click the component on the Flow screen. The Edit Progress Popover Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
The Data Source setting determines where the steps come from.
When adding steps manually, each step has three sub-sections:
Step: Basic step information (label, value, icon, etc.).
Popover: Content shown in the step's popover when clicked. Set the Variant to Button to display the popover as a button instead.
Button: A direct-action button displayed on the step.
Data Mapping
When using Variable, configure Data Mappings in the Properties tab to tell the component how to build each step from your data. The mapping fields mirror the three manual sub-sections:
Step
Label — Display text for the step.
Value — The step identifier; matched against Current Step to determine which step is active (defaults to the record Id).
Label Position — Where the step label appears: Top or Bottom (default).
Description — Secondary text for the step.
Description Position — Where the description appears: Top or Bottom (default).
Popover
Popover Label — Title shown in the step's popover.
Popover Description — Body text of the popover.
Popover Icon Name — Icon displayed in the popover.
Popover Icon Name When Hover — Icon shown in the popover on hover.
Popover Variant — Base (default) or Button (renders the popover as a button).
Popover Size — Small, Medium (default), or Large.
Popover Ratio — Aspect ratio of the popover: 1-by-1 (default), 4-by-3, or 16-by-9.
Popover Hidden — Hides the popover for the step.
Button
Button Label — Text on the step's direct-action button.
Button Variant — Button style: Neutral (default), Base, Brand, Brand Outline, Destructive, Destructive Text, Inverse, or Success.
Button Icon Name — Icon displayed on the button.
Button Icon Position — Left (default) or Right of the button label.
Properties
Current Step
The value of the step to highlight as the active step. Set this to a flow variable to update dynamically.
Variant
Appearance of the step indicators: Base (default) or Shaded (adds a light gray border to indicators).
Completed Steps
A list of step values to mark as completed.
Disabled Steps
A list of step values to mark as disabled (non-interactive).
Error Steps
A list of step values to mark with an error indicator.
Warning Steps
A list of step values to mark with a warning indicator.
Interactions
Interactions define what happens when users interact with the Progress Popover. Configure them from the Interactions tab of the Edit Progress Popover panel.
Step Click
Fires when a user clicks a step. Sets the clickedStep and clickedStepValue output variables to the record and value of the clicked step.
Step Button Click
Fires when a user clicks the action button on a step. Sets the clickedStepButtonStep and clickedStepButtonStepValue output variables to the record and value of the step whose button was clicked.
Step Popover Click
Fires when a user clicks on a step's popover. Sets the clickedStepPopoverStep and clickedStepPopoverStepValue output variables to the record and value of the step whose popover was clicked.
Styling
Controls the outer spacing around the Progress Popover.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing within the Popover.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border around the Popover.
Color / Size / Style / Radius: Set the border color, thickness, line style, and corner rounding.
Styles the progress bar connecting the steps.
Color: The bar color.
Completed Color: The bar color for completed progress.
Styles each step's label text.
Color / Font Size / Font Style / Font Weight: Label text color and typography.
Styles each step's description text.
Color / Font Size / Font Style / Font Weight: Description text color and typography.
Styles the step icons per state (Active, Completed, Error, Warning).
Active Background / Active Foreground: Active-step icon colors.
Completed Background / Completed Foreground / Completed Border: Completed-step icon colors.
Error Background / Error Foreground / Error Border: Error-step icon colors.
Warning Background / Warning Foreground / Warning Border: Warning-step icon colors.
Styles the popover container.
Background Color / Text Color: Popover background and text colors.
Completed Background Color / Completed Text Color: Popover colors for a completed step.
Adjusts display when the Progress Popover is opened as a modal dialog inside a Flow screen. Set the dialog's Width, Height, and Background Color.
Output Variables
The Progress Popover 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 Popover component, and pick the output variable you need.
Step Click
Populated when a user clicks a step (requires a Step Click interaction to be configured).
Clicked Step
Record (SObject)
The record behind the step the user clicked.
Clicked Step Value
Text (String)
The value of the step the user clicked.
Example: After a user clicks a step, store Clicked Step Value in a flow variable and use it to filter records or navigate to the next screen.
Step Button Click
Populated when a user clicks the action button on a step (requires a Step Button Click interaction to be configured).
Clicked Step Button Step
Record (SObject)
The record behind the step whose button was clicked.
Clicked Step Button Step Value
Text (String)
The value of the step whose button was clicked.
Example: Use Clicked Step Button Step Value to identify which step's action was triggered and branch your flow accordingly.
Step Popover Click
Populated when a user clicks a step's popover (requires a Step Popover Click interaction to be configured).
Clicked Step Popover Step
Record (SObject)
The record behind the step whose popover was clicked.
Clicked Step Popover Step Value
Text (String)
The value of the step whose popover was clicked.
Example: Use Clicked Step Popover Step Value to open a detail screen for the popover's associated step.
Flow Interaction Output Variables
Like all interactive Flow components, the Progress Popover 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?