--- sourceDocument: Australia Sales Customer Relationship Management sourceDocumentLink: https://www.servicenow.com/docs/r/australia/order-management Release : - australia ft:locale : - en-US ft:publication_title : - Australia Sales Customer Relationship Management ft:clusterId : - omgmt bundleId : - omgmt workflow : - Customer and Industry --- # Stage progress chevron # Stage progress chevron {#ariaid-title1} Release version: Australia Updated May 7, 2026 ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read Summarize ![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete. ## Summary of Stage progress chevron The Stage Progress Chevron component in ServiceNow CPQ visually represents the progression of a transaction through its quote lifecycle stages using a horizontal chevron bar. It is configured within Quote Experience layouts at the root level of the layout YAML or JSON, alongside elements like header or tierDef. The component supports static, dynamic, or combined configuration methods to define stages and indicate the current stage. Show full answer Show less ## Configuration Options * **Static Configuration:** Define a fixed list of stages with their values and display labels directly in YAML. The `stageList` specifies the stages, and `currentStage` highlights the active stage. If `currentStage` is omitted, it defaults to `txn.stage`, allowing reuse of the layout across stages. * **Dynamic Configuration:** Populate stages from custom transaction fields using `stageListField` (list of stages) and `currentStageField` (current stage value). This supports exclusion rules to hide or disable stages and determination rules to merge multiple stages into one chevron step. * **Combination and Fallback Rules:** Static and dynamic configurations can be mixed. For example, a static `stageList` can be combined with a dynamic `currentStageField`. If neither stage list is defined, the chevron displays nothing. If neither current stage is defined, it defaults to `txn.stage`. When both static and dynamic versions of the same property exist, dynamic takes precedence. ## Theming with CSS Custom Properties The component supports styling via CSS custom properties, enabling customization of size, width, padding, opacity, background colors, chevron icon colors, and label font styles. Key variables include: * `--lgk-ProgressStep-chevron-size` and `--lgk-ProgressStep-chevron-width` for chevron dimensions * `--lgk-ProgressStep-chevron-disabled-opacity` for inactive step opacity * Background and icon colors for incomplete and current steps * Font size and weight for stage labels Additional custom properties can be inspected in the browser for further theming control. ## Practical Benefits for ServiceNow Customers By configuring the Stage Progress Chevron, customers can provide clear, visual feedback on quote transaction status, enhancing user experience and clarity in the Quote Experience. The flexible configuration options allow adaptation to various business processes and UI requirements, while CSS theming ensures alignment with branding and style guidelines. Reference for configuring the Stages Progress Chevron component in ServiceNow Quote Experience layouts, including static and dynamic configuration options, combination rules, and CSS custom property theming in ServiceNow CPQ. ## Purpose {#quote-tm-stage-progress-chevron__overview} The Stages Progress Chevron component displays a horizontal chevron bar that visually represents a transaction's progression through its quote lifecycle stages. The component is placed at the root level of the layout YAML or JSON, alongside `header` or `tierDef`. It can be defined statically, dynamically, or as a combination of both methods. ## Static configuration {#quote-tm-stage-progress-chevron__static-configuration} Use static configuration to define a fixed list of stages for the chevron. Each stage requires a `value` and a display `label`. YAML: stageProgress: stageList: - value: draft label: Draft - value: stage2 label: Stage 2 # add more stages as needed currentStage: draft `stageList` : Defines each stage's value and display label in the chevron. `currentStage` : Highlights the active stage in the chevron. If omitted, defaults to `txn.stage`, which allows the same layout to be used across multiple stages. ## Dynamic configuration {#quote-tm-stage-progress-chevron__dynamic-configuration} Use dynamic (picklist-based) configuration to populate the chevron from custom transaction fields. This method supports exclusion rules to hide or disable specific stages and determination rules to set the current stage value. YAML: stageProgress: stageListField: txn.custom.stageList currentStageField: txn.custom.stageList `stageListField` : Specifies the custom field that provides the list of available stages. `currentStageField` : Specifies the custom field that contains the current stage value. Determination rules are useful when multiple stages should display as a single chevron step. ## Combination and fallback rules {#quote-tm-stage-progress-chevron__combination-rules} Static and dynamic configurations can be mixed. The following rules apply when both are present or when values are omitted. * A static `stageList` can be combined with a dynamic `currentStageField`. * If neither `stageList` nor `stageListField` is defined, nothing displays in the chevron. * If neither `currentStage` nor `currentStageField` is defined, `txn.stage` is used by default. * If both a static and a dynamic version of the same property are present, the dynamic version takes precedence. ## CSS custom property theming {#quote-tm-stage-progress-chevron__css-theming} The stage progress chevron supports theming using CSS custom properties. The following table lists the relevant variables. Inspect the element in your browser to explore additional custom properties. {#quote-tm-stage-progress-chevron__css-theming__entry__2} | Variable | Description | |-|-| | `--lgk-ProgressStep-chevron-size` | Overall chevron size. | | `--lgk-ProgressStep-chevron-width` | Fixed width for each chevron. | | `--lgk-ProgressStep-chevron-minWidth` | Minimum width per chevron. | | `--lgk-ProgressStep-chevron-padding` | Padding inside each chevron. | | `--lgk-ProgressStep-chevron-disabled-opacity` | Opacity for disabled or inactive chevrons. | | `--lgk-ProgressStep-incomplete-backgroundColor` | Background color for incomplete steps. | | `--lgk-ProgressStep-incomplete-chevron-color` | Chevron icon color for incomplete steps. | | `--lgk-ProgressStep-current-backgroundColor` | Background color for the current step. | | `--lgk-ProgressStep-current-chevron-color` | Chevron icon color for the current step. | | `--lgk-ProgressStep-chevron-label-fontSize` | Font size for stage labels in the chevron. | | `--lgk-ProgressStep-chevron-label-fontWeight` | Font weight for stage labels in the chevron. | [Table 1. CSS custom properties for the stage progress chevron] **Related concepts** * [Quote transaction layouts](https://www.servicenow.com/docs/Lw416qa_lBBm7jF66xiaKA "Layouts define the quote user interface in ServiceNow Quote Experience, controlling which fields, events, and UI effects are visible and how the quote is organized for users in ServiceNow CPQ.") **Related tasks** * [Create a quote transaction layout](https://www.servicenow.com/docs/itTjqjoZi~gQ_chAbMquUg "Create a layout in ServiceNow Quote Experience to define the quote interface for a stage in ServiceNow CPQ.") **Related reference** * [ServiceNow Quote Experience layout UI effects](https://www.servicenow.com/docs/NeBJtAkqb4AY_LhWLY1FBw "Reference for UI effect types, parameters, access conditions, and YAML and JSON code examples for configuring button behavior in ServiceNow Quote Experience layouts in ServiceNow CPQ.")