> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-progress-indicator.md). # 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 url="" flowId="MnAVl4sqqk4wjam08NeW" %} ### 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 ### Properties | Label | Type | Default | Required | Description | | ------------------- | ------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Object API Name | String | — | Yes | API name of the Salesforce object used to retrieve records. | | Picklist Field Name | String | — | Yes | API name of the picklist field used to generate the steps in the progress indicator. | | Record Id | String | — | | The record ID to use. Leave this empty to use the current record page. | | Completed Values | String | — | | Comma-separated list of picklist values that should be shown as completed in the progress indicator, regardless of the current value. | | Hidden Values | String | — | | Comma-separated list of picklist values that should be excluded from the progress indicator and not displayed to the user. | | Type | String | `path` | | Defines the display layout of the progress indicator. Valid values include horizontal, vertical, and path. Default is horizontal. Options: `horizontal`, `vertical`, `path`. | | Format | String | `linear` | | Defines the visual behavior of completed steps. linear shows previous steps as completed, while non-linear highlights only the current step. Default is linear. Options: `linear`, `non-linear`. | | Display as Card | Boolean | `true` | | If true, displays the image inside a styled card container for better presentation in dashboards or record pages. | | Clickable | Boolean | `false` | | If true, makes each step clickable and updates the record's picklist field value upon selection. | | Header - Title | String | — | | Text displayed as the main title in the component's header. Example: “Open Opportunities” or “Top Accounts.” | | Header - Caption | String | — | | Subheading text displayed below the header title to provide extra context. Example: “Sorted by Stage” or “Filtered by Priority.” | | Header - Icon Name | String | — | | SLDS icon name (e.g., standard:account) displayed next to the header title. Example: standard:contact for a contact list. | *** ## Use Case Examples ### Example 1: Case Resolution Workflow {% @arcade/embed url="" flowId="RZ289eoU71NlK7WS15jB" %} **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 url="" flowId="N7XH2c9lJt84tf1cFr2V" %} **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 %} *** ## Key Considerations * **Process Design:** Choose picklist fields that represent clear, sequential steps, set meaningful completed values, and hide irrelevant or negative outcomes. * **Visual Layout:** Use Path type for sales processes, vertical layout for sidebars or narrow containers, and horizontal layout for main content areas. * **User Interaction:** Enable clickable functionality to let users update stages; use linear format for sequential processes and non-linear when only the current step matters. * **Performance:** Keep picklist value lists short for visual clarity, test responsive behavior, and mind frequent field updates when clickable is enabled. *** ## Troubleshooting Common Issues * **Progress Indicator Not Appearing:** Verify the Object API Name and Picklist Field Name exist and are accessible, and that the record holds valid picklist values. * **Steps Showing Incorrectly:** Confirm completed and hidden value lists are comma-separated and match the picklist values exactly (case-sensitive). * **Clicking Not Working:** Enable Clickable, confirm edit permission on the picklist field, and ensure the record is not locked or read-only. * **Layout Issues:** Try different Type settings, check that header text length suits the layout, and use Display as Card for separation; test on mobile. * **Format Behavior Problems:** Understand linear (progressive) vs. non-linear (current only) formats and align your completed-values configuration with the chosen format. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-progress-indicator.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.