# 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="/pages/tZIFwakLsMzdOlpBGQ4X" %}
[AX - Record Detail](/experience-cloud/experience-components/ax-record-detail.md)
{% 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://docs.avonnicomponents.com/dynamic-components/) of the [Progress Indicator](/dynamic-components/components/progress-indicator.md) does support [interactions](/dynamic-components/component-builder/interactions.md) with record update actions through its Interaction tab

***

## **Links**

{% content-ref url="/pages/tqFjuRgqy4hMoEhdSzf7" %}
[AX - Map](/experience-cloud/experience-components/ax-map.md)
{% endcontent-ref %}


---

# Agent Instructions: 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:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-progress-indicator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.