> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/progress-popover.md).

# Progress Popover

The Avonni Progress Popover displays a series of steps, each with a popover containing progress indicators and contextual information.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-b2116e3447893a1028617a216b1ced4f1c15bdac%2Fimage%20(46).avif?alt=media" alt="" width="375"><figcaption></figcaption></figure>

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.

{% hint style="info" %}
**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** ⬇️
{% endhint %}

{% @arcade/embed url="<https://app.arcade.software/share/e8QS5MmPeA5BZNKI4k5n>" flowId="e8QS5MmPeA5BZNKI4k5n" %}

***

## 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.

| Data Source                                                      | Best For                              |
| ---------------------------------------------------------------- | ------------------------------------- |
| [**Manual**](/flow/component-builder/data-sources/manual.md)     | Fixed steps you define in the builder |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | Steps from a Flow collection variable |

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.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-eee25ff8d63c2c3f62fd620671b092178c73dc4a%2F2022-12-01_16-11-51.png?alt=media" alt="" width="115"><figcaption></figcaption></figure>

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-97556d6479c01b4e914a078520c20cab779d8630%2F2022-12-01_16-13-06.png?alt=media" alt="" width="176"><figcaption></figcaption></figure>

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-aec1e55768e90b1d429073c646ecde523767e4f1%2F2022-12-01_16-18-29.png?alt=media" alt="" width="107"><figcaption><p>Popover set as a button</p></figcaption></figure>

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-2ed4b0d61d29d1c28bb007af7b03fd0ffd5a2829%2F2022-12-01_16-24-47.png?alt=media" alt="" width="173"><figcaption></figcaption></figure>

### 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

| Setting             | What It Does                                                                                                  |
| ------------------- | ------------------------------------------------------------------------------------------------------------- |
| **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](/flow/component-builder/interactions-panel.md) 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

{% tabs %}
{% tab title="Margin" %}
Controls the outer spacing around the Progress Popover.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the inner spacing within the Popover.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Border" %}
Customizes the border around the Popover.

* **Color / Size / Style / Radius:** Set the border color, thickness, line style, and corner rounding.
  {% endtab %}

{% tab title="Bar" %}
Styles the progress bar connecting the steps.

* **Color:** The bar color.
* **Completed Color:** The bar color for completed progress.
  {% endtab %}

{% tab title="Label" %}
Styles each step's label text.

* **Color / Font Size / Font Style / Font Weight:** Label text color and typography.
  {% endtab %}

{% tab title="Description" %}
Styles each step's description text.

* **Color / Font Size / Font Style / Font Weight:** Description text color and typography.
  {% endtab %}

{% tab title="Icon" %}
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.
  {% endtab %}

{% tab title="Popover" %}
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.
  {% endtab %}

{% tab title="Flow Dialog" %}
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**.
{% endtab %}
{% endtabs %}

***

## 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).

| Output variable        | Type             | What it returns                              |
| ---------------------- | ---------------- | -------------------------------------------- |
| **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).

| Output variable                    | Type             | What it returns                                      |
| ---------------------------------- | ---------------- | ---------------------------------------------------- |
| **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).

| Output variable                     | Type             | What it returns                                       |
| ----------------------------------- | ---------------- | ----------------------------------------------------- |
| **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](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/progress-popover.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.