Stage progress chevron

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.

Related topics

Quote transaction layouts

Create a quote transaction layout

ServiceNow Quote Experience layout UI effects