---
sourceDocument: Zurich Sales Customer Relationship Management
sourceDocumentLink: https://www.servicenow.com/docs/r/zurich/order-management

 Release :

    - zurich

ft:locale :

    - en-US

ft:publication_title :

    - Zurich Sales Customer Relationship Management

ft:clusterId :

    - omgmt

bundleId :

    - omgmt

workflow :

    - Customer and Industry


---

# Transaction Manager: Layouts - the stages progress chevron

# Transaction Manager: Layouts - the stages progress chevron {#ariaid-title1}

* Release version: Zurich
* 
* Updated November 13, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

You can configure a progress bar using layout JSON or YAML and define it either statically or dynamically. See code snippets.

## Purpose {#transaction-manager-layouts-the-stages-progress-chevron__Purpose}

The Stages Progress Chevron component is a visual representation of a transaction's stage progression, typically displayed as a horizontal chevron bar. It can be defined statically or dynamically and is configurable through layout
JSON.

## Configuration options {#transaction-manager-layouts-the-stages-progress-chevron__Configuration-Options}

The component is placed at the root level of the layout JSON (alongside `header` or `tierDef`).

## Static definition {#transaction-manager-layouts-the-stages-progress-chevron__Static-Definition}

Define a list of stages manually.

JSON:

    "stageProgress": {
      "stageList": [
        { "value": "draft", "label": "Draft" },
        { "value": "stage2", "label": "Stage 2" },
        ...
      ],
      "currentStage": "draft"
    }

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`.
* `currentStage`: Highlights the active stage.

  If omitted, defaults to `txn.stage`. This allows you to use in a default layout used by multiple stages.
{#transaction-manager-layouts-the-stages-progress-chevron__ul_nyl_dtl_hhc}

## Custom picklist-based definition {#transaction-manager-layouts-the-stages-progress-chevron__Custom-Picklist-Based-Definition}

Use custom fields to dynamically populate the chevron.

JSON:

    "stageProgress": {
      "stageListField": "txn.custom.stageList",
      "currentStageField": "txn.custom.stageList"
    }

YAML:

    stageProgress:
      stageListField: txn.custom.stageList
      currentStageField: txn.custom.stageList

* `stageListField`: Specifies where to pull the list of available stages.
* `currentStageField`: Specifies the field that contains the current stage value.

{#transaction-manager-layouts-the-stages-progress-chevron__ul_pyl_dtl_hhc}

This method supports:

* Exclusion Rules: To hide or disable specific stages.
* Determination Rules: To set the value of the current stage.Useful if you have multiple stages that should display as a single chevron.

{#transaction-manager-layouts-the-stages-progress-chevron__ul_qyl_dtl_hhc}

## Combination use {#transaction-manager-layouts-the-stages-progress-chevron__Combination-Use}

You can mix static and dynamic configurations:

* Use a static `stageList` with a dynamic `currentStageField`.
* If neither `stageList` nor `stageListField` is defined → nothing displays.
* If neither `currentStage` nor `currentStageField` is defined `txn.stage` is used by default.
* If both static and dynamic versions are present,dynamic takes precedence.
{#transaction-manager-layouts-the-stages-progress-chevron__ul_syl_dtl_hhc}

## Theming {#transaction-manager-layouts-the-stages-progress-chevron__Theming}

The component supports theming using CSS custom properties. The following table shows a non-exhaustive list of relevant variables.
{#transaction-manager-layouts-the-stages-progress-chevron__table_wyl_dtl_hhc__entry__2}

| Variable | Description |
|-|-|
| `--lgk-ProgressStep-chevron-size` | Overall chevron size |
| `--lgk-ProgressStep-chevron-width` | Fixed width for chevrons |
| `--lgk-ProgressStep-chevron-minWidth` | Minimum width per chevron |
| `--lgk-ProgressStep-chevron-padding` | Padding inside each chevron |
| `--lgk-ProgressStep-chevron-disabled-opacity` | Opacity for disabled/inactive chevrons |
| `--lgk-ProgressStep-incomplete-backgroundColor` | Background for incomplete steps |
| `--lgk-ProgressStep-incomplete-chevron-color` | Chevron icon color for incomplete steps |
| `--lgk-ProgressStep-current-backgroundColor` | Background for current step |
| `--lgk-ProgressStep-current-chevron-color` | Chevron icon color for current step |
| `--lgk-ProgressStep-chevron-label-fontSize` | Font size for stage labels |
| `--lgk-ProgressStep-chevron-label-fontWeight` | Font weight for stage labels |
[ ]

{#transaction-manager-layouts-the-stages-progress-chevron__table_wyl_dtl_hhc}  
Tip:  
You can inspect the element in your browser to explore more custom properties.