Links

Progress Popover

Overview

The Progress Popover component displays a series of steps that can show a popover with additional content information. It typically consists of a popover window containing a progress bar or circle, along with a label or title providing context for the progress. Actions can be performed in a step. The Progress Popover component is often used to provide visual feedback to the user on the status of a task or process in a compact and visual way.

Changing the properties

Adding steps

To add a step, go to the Data Source section to add your steps.

Data source

Adding steps is possible using the Data Source section. Steps can be added:
  • Manual: To add steps by hand, fill out the required address information.
  • Variable: You can dynamically add 'Steps' by connecting them to a data collection from your flow. You'll need to map the data once linked to a variable data source.
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 ⬇️

Step information

Enter any valuable information under the Step section to configure information that needs to be displayed.

Popover information

If you want to display a popover, enter any valuable information under the Popover section to configure the information that needs to be displayed in the popover.
Popover can be configured as a button by setting the Variant to Button.
Popover set as a button

Button information

If you want to display a button, enter any valuable information under the Button section to configure the information that needs to be displayed in the popover.

Adding Interactions

Interactions define what will happen when users interact with the Progress Popover component. You can find a list of interactions available here.
Here are the available interactions for the List component:
  • On Step Click: The event is fired when a user clicks on a step.
  • On Step Button Click: The event is fired when a user clicks on a button.
  • On Step Popover Click: The event is fired when a user clicks on a popover window.

Styling the Progress Popover

From the Styles panel, you can customize styling attributes for the Progress Circle:
  • Bar: to customize the bar color and background color.
  • Label: to customize styling for the label text located in the step.
  • Description: to customize styling for the Description text located in the step.
  • Popover: to customize styling for the popover.
You can find the instructions for styling here.

Examples

​

Specifications

Attributes

Name
Type
Description
currentStep
String
Set current-step to match the value attribute of one of progress-step components.
variant
String
Changes the appearance of the progress indicator for the base type only.
Completed Steps
String
To add values that need to be marked as completed.
Disabled Steps
String
To add values that need to be marked as disabled.
Error Steps
String
To add values that need to be marked as error.
Warning Steps
String
To add values that need to be marked as warning.
Last modified 4mo ago