Stage progress chevron

  • Release version: Australia
  • Updated May 7, 2026
  • 2 minutes to read
    • Summarize
    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 at the root level of Quote Experience layouts in YAML or JSON format and can be set up using static, dynamic, or combined methods. This visual aid helps users quickly identify the current stage in the quote process, enhancing clarity and workflow management.

    Show full answer Show less

    Configuration Options

    • Static Configuration: Define a fixed list of stages with specified values and labels. Set the active stage using currentStage. If omitted, it defaults to the transaction’s stage (txn.stage), enabling reuse of layouts across different stages.
    • Dynamic Configuration: Populate the stages and current stage dynamically from custom transaction fields using stageListField and currentStageField. This supports advanced features like exclusion rules to hide stages and determination rules to consolidate multiple stages into a single chevron step.
    • Combination and Fallback Rules: Static and dynamic configurations can be combined. Dynamic properties take precedence if both static and dynamic versions exist. If stage lists are missing, the chevron will not display. If current stage is not specified, the default is txn.stage.

    CSS Custom Property Theming

    The component supports theming through CSS custom properties, allowing customization of size, width, padding, opacity, colors for different step states (incomplete, current), and label font styling. This flexibility enables branding and UI consistency within the ServiceNow environment.

    Practical Benefits for ServiceNow Customers

    • Provides a clear, intuitive visual indicator of quote lifecycle stages to users.
    • Supports flexible configuration methods to fit various business needs and data models.
    • Enables dynamic stage management tied to custom transaction fields, improving adaptability.
    • Allows consistent styling aligned with corporate branding and user interface standards.
    • Enhances the Quote Experience by making transaction progress transparent and easier to track.

    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

    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

    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

    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

    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

    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.

    Table 1. CSS custom properties for the stage progress chevron
    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.