目的

ステージ進捗状況シェブロンコンポーネントは、トランザクションのステージ進捗状況を視覚的に表現したもので、通常は水平二重山かっこバーとして表示されます。静的または動的に定義でき、レイアウト JSON を使用して構成できます。

構成オプション

コンポーネントは、レイアウト JSON のルートレベル ( ヘッダー または tierDef と並んで) に配置されます。

静的定義

ステージのリストを手動で定義します。

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 は、各ステージの 値 と表示 ラベルを定義します。
• currentStage はアクティブなステージを強調表示します。

  currentStage を省略した場合、デフォルトは txn.stage になります。これにより、複数のステージで使用されるデフォルトのレイアウトで使用できます。

カスタムピックリストベースの定義

カスタムフィールドを使用して、二重山かっこを動的に入力します。

JSON:

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

YAML:

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

• stageListField は、利用可能なステージのリストをプルする場所を指定します。
• currentStageField は、現在のステージ値を含むフィールドを指定します。

このメソッドは以下をサポートしています。

• 特定のステージを非表示または無効にするための除外ルール。
• 現在のステージの値を設定するための決定ルール。

  決定ルールは、複数のステージを単一の二重山かっことして表示する必要がある場合に便利です。

併用

静的構成と動的構成を混在させることができます。

• 動的 currentStageField とともに静的 stageList を使用します。
• stageList も stageListField も定義されていない場合は、何も表示されません。
• currentStage も currentStageField も定義されていない場合は、デフォルトで txn.stage が使用されます。
• 静的バージョンと動的バージョンの両方が存在する場合は、動的バージョンが優先されます。

テーマ作成

このコンポーネントは、CSS カスタムプロパティを使用したテーマ設定をサポートしています。次の表は、関連する変数の簡単なリストを示しています。