---
sourceDocument: Australie Gestion de la relation client pour les ventes
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/order-management

 Release :

    - australia

ft:locale :

    - fr-FR

ft:publication_title :

    - Australie Gestion de la relation client pour les ventes

ft:clusterId :

    - omgmt

bundleId :

    - omgmt

workflow :

    - Customer and Industry


---

# Gestionnaire de transaction : mises en page : chevron de progression des étapes

# Gestionnaire de transaction : mises en page : chevron de progression des étapes {#ariaid-title1}

* Rversion finale: Australia
* 
* Mis à jour 12 mars 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes de lecture

Vous pouvez configurer une barre de progression à l'aide de la mise en page JSON ou YAML et la définir statiquement ou dynamiquement. Voir les extraits de code.

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

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 {#transaction-manager-layouts-the-stages-progress-chevron__Configuration-Options}

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

## Définition statique {#transaction-manager-layouts-the-stages-progress-chevron__Static-Definition}

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.
{#transaction-manager-layouts-the-stages-progress-chevron__ul_nyl_dtl_hhc}

## Définition personnalisée basée sur la liste déroulante {#transaction-manager-layouts-the-stages-progress-chevron__Custom-Picklist-Based-Definition}

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.

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

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.

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

## Utilisation combinée {#transaction-manager-layouts-the-stages-progress-chevron__Combination-Use}

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é.
{#transaction-manager-layouts-the-stages-progress-chevron__ul_syl_dtl_hhc}

## Thématisation {#transaction-manager-layouts-the-stages-progress-chevron__Theming}

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.
{#transaction-manager-layouts-the-stages-progress-chevron__table_wyl_dtl_hhc__entry__2}

| Variable | Description |
|-|-|
| `--lgk-ProgressStep-chevron-size` | Taille globale du chevron |
| `--lgk-ProgressStep-chevron-width` | Largeur fixe pour les chevrons |
| `--lgk-ProgressStep-chevron-minWidth` | Largeur minimale par chevron |
| `--lgk-ProgressStep-chevron-padding` | Remplissage à l'intérieur de chaque chevron |
| `--lgk-ProgressStep-chevron-disabled-opacity` | Opacité pour les chevrons désactivés/inactifs |
| `--lgk-ProgressStep-incomplete-backgroundColor` | Arrière-plan pour les étapes incomplètes |
| `--lgk-ProgressStep-incomplete-chevron-color` | Couleur de l'icône de chevron pour les étapes incomplètes |
| `--lgk-ProgressStep-current-backgroundColor` | Arrière-plan pour l'étape actuelle |
| `--lgk-ProgressStep-current-chevron-color` | Couleur de l'icône de chevron pour l'étape actuelle |
| `--lgk-ProgressStep-chevron-label-fontSize` | Taille de police pour les étiquettes d'étape |
| `--lgk-ProgressStep-chevron-label-fontWeight` | Poids de police pour les étiquettes d'étape |
[ ]

{#transaction-manager-layouts-the-stages-progress-chevron__table_wyl_dtl_hhc}  
Conseil :  
Vous pouvez inspecter l'élément dans votre navigateur pour explorer d'autres propriétés personnalisées.