Comment on page
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.
To add a step, go to the
Data Sourcesection to add your steps.
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 Collectionaction
Among the Avonni Actions available, the Avonni
New Progress Popover Step Collectionis 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 ⬇️
Enter any valuable information under the Step section to configure information that needs to be displayed.
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
Popover set as a button
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.
Here are the available interactions for the List component:
Step Click: The event is fired when a user clicks on a step.
Step Button Click: The event is fired when a user clicks on a button.
Step Popover Click: The event is fired when a user clicks on a popover window.
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.
Last modified 1mo ago