📌 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

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

✅ 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 currentStage is omitted, it defaults to txn.stage. This allows you to use in a default layout used by multiple stages.

🔄 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.

This method supports:

• Exclusion rules to hide or disable specific stages.
• Determination rules to set the value of the current stage.

  Determination rules are useful when multiple stages should display as a single 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, the dynamic version takes precedence.

🎨 Theming

The component supports theming using CSS custom properties. The following table shows a non-exhaustive list of relevant variables.