> 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 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="" 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.

Popover set as a button

### Data Mapping When using Variable, configure **Data Mappings** in the Properties tab to tell the component how to build each step from your data: * **Value** — The step identifier; matched against **Current Step** to determine which step is active. * **Label** — Display text for the step. * **Label Position** — Where the label appears relative to the step indicator. * **Description** — Secondary text for the step. * **Popover Label** — Title shown in the step's popover. * **Popover Description** — Body text of the popover. * **Popover Icon Name** — Icon displayed in the popover. ### 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="Layout and Spacing" %} * **Margin:** Control the spacing around the entire Progress Popover element, ensuring it's well-positioned within its surrounding content. * **Padding:** Adjust the inner spacing within the Popover to fine-tune the layout and readability of its content. * **Border:** Add a border around the Popover to provide visual definition. You can customize the border's style, color, and thickness {% endtab %} {% tab title="Step Content Styling" %} * **Bar:** Customize the appearance of the progress bar that connects the steps. You can modify: * **Bar color:** Set the color of the line connecting the steps. * **Background color:** Set a background color for the progress bar. * **Label:** Style the label text that identifies each step in the process. Adjust the font, size, color, and weight. * **Description:** If you include a more detailed description within each step, you can customize its text properties (font, size, color) to provide clear and concise instructions. * **Icon:** Customize the appearance of any icons used within the steps of the Progress Popover, including their size, color, and background {% endtab %} {% tab title="Popover Styling" %} **Popover:** Style the overall appearance of the popover container itself. This includes options for background color, border, shadow, and more {% 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=&goal= ``` `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.