> 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 par étapes, basé sur les valeurs d’un champ de liste de sélection sur les pages Experience Sites. Utilisez-le pour montrer aux utilisateurs du portail où en sont les enregistrements dans un workflow — 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 mises en page 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 de l’onboarding, les workflows d’approbation ou partout où les utilisateurs du portail ont besoin d’une clarté visuelle sur l’état d’un processus en plusieurs étapes. {% hint style="warning" %} #### Remarque Ce composant est **en lecture seule** — 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 changer 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 %} ## Prise en main Utilisez ce tutoriel simple pour apprendre les bases du composant Progress Indicator et commencer à créer vos cas d’utilisation. {% @arcade/embed url="" flowId="ZU4p8JnowZCmgWi7FUKf" %} ## Configuration ### Propriétés **Type** choisit le style : **Base**, **Verticale**, **Barre**, **Cercle**, **Chemin**, ou **Navigation verticale**. **Format** contrôle le flux : **Linéaire** (flux de progression standard) ou **Non linéaire** (la progression ne suit pas un ordre séquentiel). **Ombré** applique un effet d’ombrage au composant. **Étape actuelle** définit l’étape actuelle dans le flux de progression. **Alignement de l’icône** place l’icône de l’étape : **Centre** (dans l’étape) ou **Haut** (en haut de l’étape). **Taille de l’icône** sélectionne Petit, Moyen ou Grand. **Afficher le numéro de l’étape** affiche le numéro de chaque étape. **Afficher le libellé de l’étape** affiche les libellés de chaque étape. **Masquer la valeur de la barre** masque la valeur/le pourcentage sur la barre de progression. **Source de données** définit les étapes : **Manuel** (saisissez manuellement les données de progression) ou **Valeurs de liste de sélection** (utilisez les valeurs d’une liste de sélection pour définir la progression). **Texte alternatif** fournit un texte accessible décrivant l’indicateur de progression pour les lecteurs d’écran. ## Style {% tabs %} {% tab title="Barre" %} Personnalisez la couleur et la couleur des éléments terminés. {% endtab %} {% tab title="Icône" %} Offre une personnalisation avancée des couleurs, notamment : * **`Focus`**, **`Normal`**, **`Remplissage`**, **`Bordure`**, **`Actif`**, **`Terminé`**, et **`Couleurs d’erreur`** (ainsi que leurs variantes de remplissage et de bordure). {% endtab %} {% tab title="Libellé de l’étape" %} * **Couleur du texte**: Définissez la couleur du texte du libellé. * **Taille de police**: Définissez la taille de la police. * **Famille de polices**: Choisissez la police du libellé. * **Graisse de police**: Sélectionnez le poids/l’épaisseur de la police. * **Ombre du texte**: Ajoutez un effet d’ombre au texte. * **Limite de lignes**: Limitez le nombre de lignes du texte du libellé {% endtab %} {% endtabs %} ## Cas d'utilisation ### Exemple 1 : Chemin du processus de vente {% @arcade/embed url="" flowId="WPNsAX5UXy9v9pc0SGSp" %} Guidez vos utilisateurs partenaires à travers chaque étape du parcours de vente grâce à un chemin visuel et intuitif qui favorise l’adoption et fait avancer les opportunités. *** #### **Ce que vous allez accomplir** * **Expérience de vente guidée :** Offrez aux utilisateurs partenaires une représentation claire et visuelle de la position de chaque opportunité dans le processus de vente * **Adoption accrue :** Réduisez la confusion et améliorez l’engagement en affichant les bonnes informations d’étape directement dans le site Experience * **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 – Progress Indicator dans Experience Builder sur la page souhaitée {% endstep %} {% step %} #### **Configurez la source de données** * Sélectionnez **Vérifier les valeurs de 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 %} #### **Aperçu de votre travail** * Utilisez l’aperçu d’Experience Builder pour vérifier que le chemin s’affiche correctement pour différentes étapes d’opportunité {% endstep %} {% endstepper %} *** #### **Liens** {% content-ref url="/pages/8e893d46776ae1dc01aa1b4b539eaf364fc8f2f9" %} [AX - Détail d'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" %} Offrez à vos clients une visibilité immédiate sur l’état de leur commande, de la passation à l’exécution, grâce à un indicateur de progression vertical clair et facile à suivre. *** #### **Ce que vous allez accomplir** * **Visibilité des commandes en temps réel :** Affichez des informations de statut de commande à jour directement dans le portail client * **Réduction des demandes au support :** Permettez aux clients de suivre eux-mêmes leur commande, ce qui réduit le besoin de contacter le support *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant à votre page** * Faites glisser le composant AX – Progress Indicator dans Experience Builder sur la page souhaitée {% endstep %} {% step %} #### **Configurez la source de données** * Sélectionnez **Vérifier les valeurs de 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 %} #### **Aperçu de 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 - Progress Indicator est un composant d’affichage en lecture seule. Il reflète la valeur actuelle d’un champ de liste de sélection, mais ne renvoie pas la mise à jour vers Salesforce lorsqu’un utilisateur clique sur une étape. Le Progress Indicator lui-même n’expose ni interactions ni 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/) de [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, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-progress-indicator.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.