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.