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.

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)

Getting Started

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

Settings

Name

Description

Type

Choose from Base, Vertical, Bar, Circle, Path, or Vertical Navigation styles.

Format

Linear: Standard progress flow.
Non-linear: Progress does not follow a sequential order

Shaded

Apply shading effect to the component

Current Step

Define the current step in the progress flow.

Icon Alignment

Center: Center the icon in the step.
Top: Align the icon at the top of the step

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

Manual: Manually input progress data.
Picklist Values: Use values from a picklist to define progress

Name

Description

Bar

Customize color and completed color.

Icon

Offers extensive color customization, including:

Focus, Regular, Fill, Border, Active, Completed, and Error Colors (and their Fill and Border variants).

Step Label

Text Color: Set the color of the label text.
Font Size: Define the size of the font.
Font Family: Choose the typeface for the label.
Font Weight: Select the weight/thickness of the font.
Text Shadow: Add shadow effect to the text.
Line Clamp: Limit the number of lines for the label text

Use Case Examples

Example 1: Sales Process Path

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

Add the component to your page

Drag the AX – Progress Indicator component into Experience Builder on your desired page

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

Customize the display

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

Preview your work

Use the Experience Builder preview to verify the path renders correctly across different opportunity stages

Links

AX - Record Detail

Example 2: Customer Order Status

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

Add the component to your page

Drag the AX – Progress Indicator component into Experience Builder on your desired page

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

Customize the display

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

Preview your work

Use the Experience Builder preview to confirm the vertical indicator displays correctly across the full range of order statuses

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 of the Progress Indicator does support interactions with record update actions through its Interaction tab

Links

AX - Map

Mis à jour il y a 2 mois

Ce contenu vous a-t-il été utile ?