# AX - Progress Indicator

## Overview

**AX - Progress Indicator** is an Experience Cloud component that displays process stages as a visual step tracker based on picklist field values on Experience Sites pages.

Use it to show portal users where records are in a workflow—like order statuses, application stages, onboarding steps, or approval processes. Users can see current progress and completed steps. Choose from horizontal, vertical, or path-style layouts and configure in Experience Builder.

Perfect for order tracking, application status displays, onboarding progress, approval workflows, or anywhere portal users need visual clarity on multi-step process status.

{% hint style="warning" %}

#### Note

This component is **display-only** — it reads the current picklist value and renders the corresponding step visually, but it does not update the record when a user clicks on a step. To let users change a record's status, you need to pair it with a separate component or custom solution that handles the record update (see the FAQ section below)
{% endhint %}

***

## Getting Started

Use this simple tutorial to learn the basics of the Progress Indicator component and start building your use cases.

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

***

## Settings

{% tabs %}
{% tab title="🎛️ Properties" %}

| Name                 | Description                                                                                                                                                      |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Type**             | Choose from **`Base`**, **`Vertical`**, **`Bar`**, **`Circle`**, **`Path`**, or **`Vertical`** Navigation styles.                                                |
| **Format**           | <ul><li><strong>Linear</strong>: Standard progress flow.</li><li><strong>Non-linear</strong>: Progress does not follow a sequential order</li></ul>              |
| **Shaded**           | Apply shading effect to the component                                                                                                                            |
| **Current Step**     | Define the current step in the progress flow.                                                                                                                    |
| **Icon Alignment**   | <ul><li><strong>Center</strong>: Center the icon in the step.</li><li><strong>Top</strong>: Align the icon at the top of the step</li></ul>                      |
| **Icon Size**        | Select from Small, Medium, or Large.                                                                                                                             |
| **Show Step Number** | Display the number of each step.                                                                                                                                 |
| **Show Step Label**  | Display labels for each step.                                                                                                                                    |
| **Hide Bar Value**   | Hide the value/percentage on the progress bar.                                                                                                                   |
| **Data Source**      | <ul><li><strong>Manual</strong>: Manually input progress data.</li><li><strong>Picklist Values</strong>: Use values from a picklist to define progress</li></ul> |
| {% endtab %}         |                                                                                                                                                                  |

{% tab title="🎨 Styling" %}

| Name           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Bar**        | Customize color and completed color.                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Icon**       | <p>Offers extensive color customization, including:</p><ul><li><strong><code>Focus</code></strong>, <strong><code>Regular</code></strong>, <strong><code>Fill</code></strong>, <strong><code>Border</code></strong>, <strong><code>Active</code></strong>, <strong><code>Completed</code></strong>, and <strong><code>Error Colors</code></strong> (and their Fill and Border variants).</li></ul>                                                              |
| **Step Label** | <ul><li><strong>Text Color</strong>: Set the color of the label text.</li><li><strong>Font Size</strong>: Define the size of the font.</li><li><strong>Font Family</strong>: Choose the typeface for the label.</li><li><strong>Font Weight</strong>: Select the weight/thickness of the font.</li><li><strong>Text Shadow</strong>: Add shadow effect to the text.</li><li><strong>Line Clamp</strong>: Limit the number of lines for the label text</li></ul> |
| {% endtab %}   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| {% endtabs %}  |                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

***

## Use Case Examples

### Example 1: Sales Process Path

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

Guide your partner users through every stage of the sales journey with a visual, intuitive path that drives adoption and keeps deals moving forward.

***

#### **What You'll Achieve**

* **Guided sales experience:** Give partner users a clear, visual representation of where each opportunity stands in the sales process
* **Increased adoption:** Reduce confusion and improve engagement by surfacing the right stage information directly in the Experience site
* **Pipeline visibility:** Help partners stay aligned on next steps without leaving the portal

***

#### **How to Set It Up**

{% stepper %}
{% step %}

#### **Add the component to your page**

* Drag the AX – Progress Indicator component into Experience Builder on your desired page
  {% endstep %}

{% step %}

#### **Configure the data source**

* Select **Check Picklist Values** as your data source type
* Set the **Object API Name** to `Opportunity`
* Set the **Picklist Field** to `Stage`
* Set the **Record Type** to `Master`
* Set the **Sort Order** to `Default`
  {% endstep %}

{% step %}

#### **Customize the display**

* Set the **Type** to `Path`
* Set the **Current Step** to `{!Item.Stage}` to dynamically reflect each opportunity's active stage
  {% endstep %}

{% step %}

#### **Preview your work**

* Use the Experience Builder preview to verify the path renders correctly across different opportunity stages
  {% endstep %}
  {% endstepper %}

***

#### **Links**

{% content-ref url="ax-record-detail" %}
[ax-record-detail](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-record-detail)
{% endcontent-ref %}

***

### Example 2: Customer Order Status

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

Give your customers instant clarity on where their order stands, from placement to fulfillment, with a clean, easy-to-follow vertical progress indicator.

***

#### **What You'll Achieve**

* **Real-time order visibility:** Surface up-to-date order status information directly within the customer portal
* **Reduced support inquiries:** Empower customers to self-serve order tracking, decreasing the need to contact support

***

#### **How to Set It Up**

{% stepper %}
{% step %}

#### **Add the component to your page**

* Drag the AX – Progress Indicator component into Experience Builder on your desired page
  {% endstep %}

{% step %}

#### **Configure the data source**

* Select **Check Picklist Values** as your data source type
* Set the **Object API Name** to `Order`
* Set the **Picklist Field** to `Status`
* Set the **Record Type** to `Master`
* Set the **Sort Order** to `Default`
  {% endstep %}

{% step %}

#### **Customize the display**

* Set the **Type** to `Vertical`
* Set the **Current Step** to `{!Item.Status}` to dynamically reflect each order's active status
  {% endstep %}

{% step %}

#### **Preview your work**

* Use the Experience Builder preview to confirm the vertical indicator displays correctly across the full range of order statuses
  {% endstep %}
  {% endstepper %}

***

## FAQ

**Can users click a step to update the record status?**

No. The AX - Progress Indicator is a read-only display component. It reflects the current value of a picklist field but does not write back to Salesforce when a user clicks on a step. The Progress Indicator itself does not expose interactions or actions in the Experience Cloud version.

**Tip:** If you are building on a Lightning Page (not an Experience Site), [the Avonni Dynamic Components version](https://app.gitbook.com/o/9SPYZVrIHB81fz19OpSr/s/ODPvvv7Cx9Z9RECLn3oV/) of the [Progress Indicator](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/progress-indicator) does support [interactions](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/component-builder/interactions) with record update actions through its Interaction tab

***

## **Links**

{% content-ref url="ax-map" %}
[ax-map](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-map)
{% endcontent-ref %}