# 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. {% @arcade/embed flowId="MnAVl4sqqk4wjam08NeW" url="" %} ### 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`\
`{{Record.Name}} Status` | | **Header Caption** | Text | No | Subtitle displayed below the header title. Supports `{{Record.FieldName}}` syntax | `Current stage: {{Record.StageName}}`\
`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 {% @arcade/embed flowId="RZ289eoU71NlK7WS15jB" url="" %} **Scenario**: Track case status progression with vertical layout and non-linear completion tracking for service agent workflow management. **Steps** {% stepper %} {% step %} #### Open Lightning App Builder Edit your Case record page {% endstep %} {% step %} #### Add the **AX - Progress Indicator** component to your sidebar section {% endstep %} {% step %} #### **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) {% endstep %} {% step %} #### **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 {% endstep %} {% step %} #### **Set Display Options** Check **Display as Card** for sidebar prominence (wraps in styled container) {% endstep %} {% step %} #### Save and verify status updates work correctly {% endstep %} {% endstepper %} **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 {% @arcade/embed flowId="N7XH2c9lJt84tf1cFr2V" url="" %} **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** {% stepper %} {% step %} #### Open Lightning App Builder Edit your Opportunity record page {% endstep %} {% step %} #### Add the **AX - Progress Indicator** component to your sidebar section {% endstep %} {% step %} #### **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) {% endstep %} {% step %} #### **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 {% endstep %} {% step %} #### **Set Display Options** Check **Display as Card** for sidebar prominence (wraps in styled container) {% endstep %} {% step %} #### **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 {% endstep %} {% step %} #### **Save & review** {% endstep %} {% endstepper %} *** ## 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. --- # 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/app-builder-components/app-builder-components/ax-progress-indicator.md?ask= ``` 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.