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.

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

---

Examples

Example 1: Opportunity Sales Process

Scenario: Display opportunity sales stages with interactive updates and linear progression tracking for sales team workflow management.

Steps

1

Navigate to Lightning App Builder

Edit your Opportunity record page

2

Drag the AX - Progress Indicator component onto your page layout

3

Configure Data Source

• Set Object API Name to Opportunity

• Set Picklist Field Name to StageName

• Leave Record ID empty (use current record)

• Set Completed Values to Prospecting,Qualification,Needs Analysis (always show these as completed once passed)

• Set Hidden Values to Closed Lost (exclude negative outcomes from display)

4

Configure Visual Display

• Set Type to path (Salesforce Path style layout)

• Set Format to linear (show previous stages as completed)

• Check Clickable to enable stage updates through clicking

5

Configure Header Information

• Set Header Title to Sales Process

• Set Header Caption to {{Record.Name}} - {{Record.StageName}} (dynamic opportunity and stage display)

• Set Header Icon Name to standard:opportunity

6

Set Display Options

Check Display as Card for prominent styling (wraps in styled container)

7

Save and test stage progression functionality

Save and test stage progression functionality

Result: An interactive sales process tracker with Path-style visual design that allows sales reps to update opportunity stages directly while providing clear visual feedback on progression through the sales pipeline.

Example 2: 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

• Leave Record ID empty (current case record)

• Set Completed Values to New,Working (always show these as completed when past them)

• 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 non-linear (highlight only current status, don't show progression)

• Check Clickable to enable status updates through clicking

5

Configure Case Header

• Set Header Title to Case Progress

• Set Header Caption to Status: {{Record.Status}} (displays current case status)

• Set Header Icon Name to standard:case

6

Set Display Options

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

7

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

---

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 track and manage workflow progression efficiently. The component's integration with Salesforce picklist fields ensures consistency with existing process definitions while offering enhanced visual clarity and user experience.