AX - Progress Indicator

Overview

AX - Progress Indicator is a Lightning App Builder component that displays process stages as a visual step tracker based on picklist field values on record, app, and home pages.

Use it to show users where records are in a workflow—like sales stages, case statuses, project phases, or approval processes. Users can click steps to update the record's status, with options for linear progression (steps must be completed in order) or non-linear (jump to any step). Choose from horizontal, vertical, or Salesforce Path-style layouts.

Perfect for guided workflows, status tracking, onboarding processes, or anywhere users need visual clarity on where a record stands in a multi-step process.

Getting Started

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

Use Cases

Sales Process Management

• Track opportunity progression through sales stages on Opportunity pages

• Display lead qualification steps with interactive stage updates

• Show quote approval processes with visual milestone tracking

Service & Case Management

• Visualize case resolution stages from creation to closure

• Track service request workflows with interactive status updates

• Display escalation processes with clear progression indicators

Project & Task Management

• Show project phase progression with milestone completion tracking

• Display task workflows from assignment to completion

• Track approval processes with visual stage indicators

---

Configuration

Property	Type	Required	Description	Example
Object API Name	Text	Yes	API name of the Salesforce object containing the picklist field	Opportunity, Case, Custom_Process__c
Picklist Field Name	Text	Yes	API name of the picklist field used to generate the progress steps	StageName, Status, Approval_Stage__c
Record ID	Text	No	Specific record ID to use. Leave empty to use the current record page's ID	006XXXXXXXXXXXX (leave blank for current record)
Completed Values	Text	No	Comma-separated list of picklist values that should be marked as completed regardless of current value	Prospecting,Qualification,Needs Analysis
Hidden Values	Text	No	Comma-separated list of picklist values to exclude from the progress indicator display	Closed Lost,Cancelled,On Hold
Type	Picklist	No	Display layout of the progress indicator. Options: horizontal, vertical, path	horizontal (default), vertical, path
Format	Picklist	No	Visual behavior of completed steps. Linear: previous steps shown as completed. Non-linear: only current step highlighted	linear (default), non-linear
Display as Card	Checkbox	No	Wraps the progress indicator in a styled card container for better visual presentation	Checked for dashboard sections
Clickable	Checkbox	No	Makes steps clickable to update the picklist field value when selected	Checked for interactive workflows
Header Title	Text	No	Main heading displayed above the progress indicator. Supports {{Record.FieldName}} syntax	Sales Process<br>{{Record.Name}} Status
Header Caption	Text	No	Subtitle displayed below the header title. Supports {{Record.FieldName}} syntax	Current stage: {{Record.StageName}}<br>Last updated: {{Record.LastModifiedDate}}
Header Icon Name	Text	No	Salesforce Lightning Design System (SLDS) icon name in format category:icon_name	standard:opportunity, utility:steps, custom:process

---

Use Case Examples

Example 1: Case Resolution Workflow

Scenario: Track case status progression with vertical layout and non-linear completion tracking for service agent workflow management.

Steps

1

Open Lightning App Builder

Edit your Case record page

2

Add the AX - Progress Indicator component to your sidebar section

3

Configure Process Tracking

• Set Object API Name to Case

• Set Picklist Field Name to Status

• Set Record Id to {{Record.Id}}

• Leave Completed Values empty

• Leave Hidden Values empty (show all case statuses)

4

Configure Vertical Display

• Set Type to vertical (stack steps vertically for sidebar placement)

• Set Format to linear (to show progression)

• Check Clickable to enable status updates through clicking

5

Set Display Options

Check Display as Card for sidebar prominence (wraps in styled container)

6

Save and verify status updates work correctly

Result: A vertical case status tracker positioned in the sidebar with non-linear progression highlighting, perfect for service agent workflows where only the current status needs emphasis

Example 2: Track an opportunity approval process

Scenario: Track an ongoing approval process for high value opportunities

Prerequisite

• Create an Approval_Status__c custom picklist on the Opportunity object to track approval with values None / Pending / Approved / Rejected

Steps

1

Open Lightning App Builder

Edit your Opportunity record page

2

Add the AX - Progress Indicator component to your sidebar section

3

Configure Process Tracking

• Set Object API Name to Opportunity

• Set Picklist Field Name to Approval_Status__c

• Set Record Id to {{Record.Id}}

• Leave Completed Values empty

• Leave Hidden Values empty (show all case statuses)

4

Configure Vertical Display

• Set Type to horizontal (stack steps horizontally for path-like display)

• Set Format to linear (to show progression)

• Uncheck Clickable to prevent status updates through clicking

5

Set Display Options

Check Display as Card for sidebar prominence (wraps in styled container)

6

Add a component visibility rule

• Set the Component visibility to Approval Status ≠ None to only display the component if an opportunity has an ongoing approval process

7

Save & review

---

Best Practices

Process Design

• Choose picklist fields that represent clear, sequential process steps

• Use meaningful completed values to show natural progression milestones

• Hide irrelevant or negative outcome values to maintain focus on forward progress

Visual Layout

• Use Path type for sales processes to match Salesforce Path styling

• Choose vertical layout for sidebar placements or narrow containers

• Select horizontal layout for main content areas or dashboard widgets

User Interaction

• Enable clickable functionality when users should be able to update process stages

• Use linear format for sequential processes where previous steps indicate progress

• Choose non-linear format when only the current step status matters

Performance Considerations

• Keep picklist value lists reasonable in length to maintain visual clarity

• Test responsive behavior across different screen sizes and orientations

• Consider the impact of frequent field updates when using clickable functionality

---

Troubleshooting

Progress Indicator Not Appearing

• Verify the Object API Name is correct and accessible to users

• Check that the Picklist Field Name exists on the specified object

• Ensure users have permission to view the specified object and field

• Confirm the record ID (current record) contains valid picklist values

Steps Showing Incorrectly

• Verify the picklist field contains the expected values and labels

• Check that completed values and hidden values lists are formatted correctly (comma-separated)

• Ensure picklist values match exactly (case-sensitive)

• Confirm the current record has a valid value in the picklist field

Clicking Not Working

• Ensure Clickable is enabled in the component configuration

• Verify users have edit permission on the specified picklist field

• Check that the target picklist values are valid options for the field

• Confirm the record is not locked or in a read-only state

Layout Issues

• Test different Type settings (horizontal, vertical, path) for your layout needs

• Verify header text length works well with your chosen layout type

• Check responsive behavior on mobile devices and different screen sizes

• Consider Display as Card setting for better visual separation

Format Behavior Problems

• Understand the difference between linear (progressive) and non-linear (current only) formats

• Verify that completed values configuration aligns with your format choice

• Test the visual behavior with records at different process stages

• Ensure the format choice matches your business process logic

---

Summary

The Progress Indicator component provides an intuitive way to visualize and interact with Salesforce process stages directly on Lightning pages. With support for multiple layout types, interactive updates, and flexible configuration options, it enables users to efficiently track and manage workflow progression. The component's integration with Salesforce picklist fields ensures consistency with existing process definitions while enhancing visual clarity and the user experience.