Objectif

Le composant Chevron de progression des étapes est une représentation visuelle de la progression des étapes d’une transaction, généralement affichée sous la forme d’une barre horizontale en chevron. Il peut être défini statiquement ou dynamiquement et est configurable via la mise en page JSON.

Options de configuration

Le composant est placé au niveau racine du JSON de mise en page (avec l’en-tête ou tierDef).

Définition statique

Définissez manuellement une liste d’étapes.

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 définit la valeur et l’étiquette d’affichage de chaque étape.
• currentStage met en évidence l’étape active.

  Si currentStage est omis, la valeur par défaut est txn.stage. Cela vous permet d’utiliser dans une mise en page par défaut utilisée par plusieurs étapes.

Définition personnalisée basée sur la liste déroulante

Utilisez des champs personnalisés pour renseigner dynamiquement le chevron.

JSON :

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

YAML :

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

• stageListField spécifie où extraire la liste des étapes disponibles.
• currentStageField spécifie le champ qui contient la valeur d’étape actuelle.

Cette méthode prend en charge :

• Règles d’exclusion pour masquer ou désactiver des étapes spécifiques.
• Règles de détermination servant à définir la valeur de l’étape actuelle.

  Les règles de détermination sont utiles lorsque plusieurs étapes doivent s’afficher sous la forme d’un chevron unique.

Utilisation combinée

Vous pouvez mélanger les configurations statiques et dynamiques :

• Utilisez une stageList statique avec un currentStageField dynamique.
• Si ni stageList ni stageListField ne sont définis, rien ne s’affiche.
• Si ni currentStage ni currentStageField ne sont définis, txn.stage est utilisé par défaut.
• Si des versions statique et dynamique sont présentes, la version dynamique a priorité.

Thématisation

Le composant prend en charge la thématisation à l’aide de propriétés personnalisées CSS. Le tableau suivant présente une liste non exhaustive de variables pertinentes.