> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-progress-indicator.md). # AX - Indicateur de progression ## Aperçu **AX - Indicateur de progression** est un composant Experience Cloud qui affiche les étapes d’un processus sous forme de suivi visuel des étapes, basé sur les valeurs d’un champ de liste de sélection sur les pages des sites Experience. Utilisez-le pour montrer aux utilisateurs du portail où en sont les enregistrements dans un flux de travail — comme les statuts de commande, les étapes de demande, les étapes d’intégration ou les processus d’approbation. Les utilisateurs peuvent voir la progression actuelle et les étapes terminées. Choisissez parmi des dispositions horizontales, verticales ou de type chemin, et configurez-les dans Experience Builder. Idéal pour le suivi des commandes, l’affichage du statut des demandes, la progression d’intégration, les flux de travail d’approbation, ou partout où les utilisateurs du portail ont besoin d’une clarté visuelle sur le statut d’un processus en plusieurs étapes. {% hint style="warning" %} #### Remarque Ce composant est **uniquement en lecture** — il lit la valeur actuelle de la liste de sélection et affiche visuellement l’étape correspondante, mais il ne met pas à jour l’enregistrement lorsqu’un utilisateur clique sur une étape. Pour permettre aux utilisateurs de modifier le statut d’un enregistrement, vous devez l’associer à un composant séparé ou à une solution personnalisée qui gère la mise à jour de l’enregistrement (voir la section FAQ ci-dessous) {% endhint %} *** ## Premiers pas Utilisez ce tutoriel simple pour apprendre les bases du composant Indicateur de progression et commencer à créer vos cas d’utilisation. {% @arcade/embed url="" flowId="ZU4p8JnowZCmgWi7FUKf" %} *** ## Paramètres {% tabs %} {% tab title="🎛️ Propriétés" %} | Nom | Description | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Type** | Choisissez parmi **`Base`**, **`Verticale`**, **`Barre`**, **`Cercle`**, **`Chemin`**, ou **`Verticale`** Styles de navigation. | | **Format** | | | **Ombré** | Appliquer un effet d’ombrage au composant | | **Étape actuelle** | Définissez l’étape actuelle dans le flux de progression. | | **Alignement de l’icône** | | | **Taille de l’icône** | Sélectionnez Petite, Moyenne ou Grande. | | **Afficher le numéro de l’étape** | Afficher le numéro de chaque étape. | | **Afficher le libellé de l’étape** | Afficher les libellés de chaque étape. | | **Masquer la valeur de la barre** | Masquer la valeur/le pourcentage sur la barre de progression. | | **Source de données** | | | {% endtab %} | | {% tab title="🎨 Style" %} | Nom | Description | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Barre** | Personnalisez la couleur et la couleur des éléments terminés. | | **Icône** |

Offre une vaste personnalisation des couleurs, notamment :

| | **Libellé de l’étape** | | | {% endtab %} | | | {% endtabs %} | | *** ## Exemples de cas d’utilisation ### Exemple 1 : Chemin du processus de vente {% @arcade/embed url="" flowId="WPNsAX5UXy9v9pc0SGSp" %} Guidez vos utilisateurs partenaires à travers chaque étape du parcours commercial avec un chemin visuel et intuitif qui favorise l’adoption et fait avancer les opportunités. *** #### **Ce que vous obtiendrez** * **Expérience commerciale guidée :** Donnez aux utilisateurs partenaires une représentation visuelle claire de la position de chaque opportunité dans le processus de vente * **Adoption accrue :** Réduisez la confusion et améliorez l’engagement en affichant directement dans le site Experience les informations pertinentes sur l’étape * **Visibilité du pipeline :** Aidez les partenaires à rester alignés sur les prochaines étapes sans quitter le portail *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant à votre page** * Faites glisser le composant AX – Indicateur de progression dans Experience Builder sur la page souhaitée {% endstep %} {% step %} #### **Configurez la source de données** * Sélectionnez **Vérifiez les valeurs de la liste de sélection** comme type de source de données * Définissez le **Nom API de l’objet** sur `Opportunity` * Définissez le **Champ de liste de sélection** sur `Étape` * Définissez le **Type d’enregistrement** sur `Master` * Définissez le **Ordre de tri** sur `Par défaut` {% endstep %} {% step %} #### **Personnalisez l’affichage** * Définissez le **Type** sur `Chemin` * Définissez le **Étape actuelle** sur `{!Item.Stage}` pour refléter dynamiquement l’étape active de chaque opportunité {% endstep %} {% step %} #### **Prévisualisez votre travail** * Utilisez l’aperçu d’Experience Builder pour vérifier que le chemin s’affiche correctement pour les différentes étapes de l’opportunité {% endstep %} {% endstepper %} *** #### **Liens** {% content-ref url="/pages/8e893d46776ae1dc01aa1b4b539eaf364fc8f2f9" %} [AX - Détail de l’enregistrement](/experience-cloud/experience-cloud-fr/experience-components/ax-record-detail.md) {% endcontent-ref %} *** ### Exemple 2 : Statut de commande client {% @arcade/embed url="" flowId="MQbhk3KEUgyVjAfo4zfb" %} Donnez à vos clients une visibilité immédiate sur l’état de leur commande, de la passation à l’exécution, avec un indicateur de progression vertical clair et facile à suivre. *** #### **Ce que vous obtiendrez** * **Visibilité des commandes en temps réel :** Affichez directement dans le portail client les informations de statut de commande les plus récentes * **Réduction des demandes d’assistance :** Permettez aux clients de suivre eux-mêmes leur commande, réduisant ainsi le besoin de contacter le support *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant à votre page** * Faites glisser le composant AX – Indicateur de progression dans Experience Builder sur la page souhaitée {% endstep %} {% step %} #### **Configurez la source de données** * Sélectionnez **Vérifiez les valeurs de la liste de sélection** comme type de source de données * Définissez le **Nom API de l’objet** sur `Commande` * Définissez le **Champ de liste de sélection** sur `Statut` * Définissez le **Type d’enregistrement** sur `Master` * Définissez le **Ordre de tri** sur `Par défaut` {% endstep %} {% step %} #### **Personnalisez l’affichage** * Définissez le **Type** sur `Verticale` * Définissez le **Étape actuelle** sur `{!Item.Status}` pour refléter dynamiquement le statut actif de chaque commande {% endstep %} {% step %} #### **Prévisualisez votre travail** * Utilisez l’aperçu d’Experience Builder pour confirmer que l’indicateur vertical s’affiche correctement pour toute la gamme des statuts de commande {% endstep %} {% endstepper %} *** ## FAQ **Les utilisateurs peuvent-ils cliquer sur une étape pour mettre à jour le statut de l’enregistrement ?** Non. AX - Indicateur de progression est un composant d’affichage en lecture seule. Il reflète la valeur actuelle d’un champ de liste de sélection, mais n’écrit pas dans Salesforce lorsqu’un utilisateur clique sur une étape. Le composant Indicateur de progression lui-même n’expose pas d’interactions ni d’actions dans la version Experience Cloud. **Conseil :** Si vous développez sur une page Lightning (et non sur un site Experience), [la version Avonni Dynamic Components](https://docs.avonnicomponents.com/dynamic-components/) du [Indicateur de progression](/dynamic-components/components/progress-indicator.md) prend en charge [les interactions](/dynamic-components/component-builder/interactions.md) avec des actions de mise à jour d’enregistrement via son onglet Interaction *** ## **Liens** {% content-ref url="/pages/2d2cb554a4ead8b9ae1296854c8a976b3c36f239" %} [AX - Carte](/experience-cloud/experience-cloud-fr/experience-components/ax-map.md) {% endcontent-ref %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-progress-indicator.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.