# AX - Indicateur de progression

## Vue d’ensemble

**AX - Indicateur de progression** est un composant Experience Cloud qui affiche les étapes d’un processus sous forme de suivi visuel, basé sur les valeurs d’un champ 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 candidature, les étapes d’intégration ou les processus d’approbation. Les utilisateurs peuvent voir la progression actuelle et les étapes terminées. Choisissez entre des dispositions horizontales, verticales ou de type chemin, et configurez-le dans Experience Builder.

Parfait pour le suivi des commandes, l’affichage du statut des demandes, la progression de l’intégration, les workflows d’approbation ou tout autre cas où les utilisateurs du portail ont besoin d’une clarté visuelle sur le statut d’un processus à plusieurs étapes.

{% hint style="warning" %}

#### Remarque

Ce composant est **en affichage uniquement** — 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 distinct ou à une solution personnalisée qui gère la mise à jour de l’enregistrement (voir la section FAQ ci-dessous)
{% endhint %}

***

## Démarrage

Utilisez ce tutoriel simple pour apprendre les bases du composant Indicateur de progression et commencer à créer vos cas d’utilisation.

{% @arcade/embed flowId="ZU4p8JnowZCmgWi7FUKf" url="<https://app.arcade.software/share/ZU4p8JnowZCmgWi7FUKf>" %}

***

## Paramètres

{% tabs %}
{% tab title="🎛️ Propriétés" %}

| Nom                                 | Description                                                                                                                                                                                                                          |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Type**                            | Choisissez parmi **`Base`**, **`Vertical`**, **`Barre`**, **`Cercle`**, **`Chemin`**, ou **`Vertical`** styles de navigation.                                                                                                        |
| **Format**                          | <ul><li><strong>Linéaire</strong>: Flux de progression standard.</li><li><strong>Non linéaire</strong>: La progression ne suit pas un ordre séquentiel</li></ul>                                                                     |
| **Ombré**                           | Appliquer un effet d’ombrage au composant                                                                                                                                                                                            |
| **Étape actuelle**                  | Définir l’étape actuelle dans le flux de progression.                                                                                                                                                                                |
| **Alignement de l’icône**           | <ul><li><strong>Centre</strong>: Centrer l’icône dans l’étape.</li><li><strong>Haut</strong>: Aligner l’icône en haut de l’étape</li></ul>                                                                                           |
| **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 l’étiquette 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**               | <ul><li><strong>Manuelle</strong>: Saisissez manuellement les données de progression.</li><li><strong>Valeurs de la liste de sélection</strong>: Utilisez les valeurs d’une liste de sélection pour définir la progression</li></ul> |
| {% endtab %}                        |                                                                                                                                                                                                                                      |

{% tab title="🎨 Style" %}

| Nom                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Barre**              | Personnalisez la couleur et la couleur des éléments terminés.                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Icône**              | <p>Offre une vaste personnalisation des couleurs, notamment :</p><ul><li><strong><code>Focus</code></strong>, <strong><code>Normal</code></strong>, <strong><code>Remplissage</code></strong>, <strong><code>Bordure</code></strong>, <strong><code>Actif</code></strong>, <strong><code>Terminé</code></strong>, et <strong><code>Couleurs d’erreur</code></strong> (ainsi que leurs variantes Remplissage et Bordure).</li></ul>                                                                                            |
| **Libellé de l’étape** | <ul><li><strong>Couleur du texte</strong>: Définissez la couleur du texte du libellé.</li><li><strong>Taille de police</strong>: Définissez la taille de la police.</li><li><strong>Famille de police</strong>: Choisissez la police du libellé.</li><li><strong>Graisse de police</strong>: Sélectionnez le poids/l’épaisseur de la police.</li><li><strong>Ombre du texte</strong>: Ajoutez un effet d’ombre au texte.</li><li><strong>Limite de lignes</strong>: Limitez le nombre de lignes du texte du libellé</li></ul> |
| {% endtab %}           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| {% endtabs %}          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |

***

## Exemples de cas d’utilisation

### Exemple 1 : Chemin du processus de vente

{% @arcade/embed flowId="WPNsAX5UXy9v9pc0SGSp" url="<https://app.arcade.software/share/WPNsAX5UXy9v9pc0SGSp>" %}

Guidez vos utilisateurs partenaires à travers chaque étape du parcours commercial avec un chemin visuel et intuitif qui favorise l’adoption et permet aux opportunités d’avancer.

***

#### **Ce que vous obtiendrez**

* **Expérience de vente guidée :** Offrez 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 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 – Indicateur de progression dans Experience Builder sur la page souhaitée
  {% endstep %}

{% step %}

#### **Configurez la source de données**

* Sélectionnez **Vérifier les valeurs de la liste de sélection** comme type de source de données
* Définissez le **Nom d’API de l’objet** sur `Opportunity`
* Définissez le **Champ de liste de sélection** sur `Stage`
* 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="ax-details-de-lenregistrement" %}
[ax-details-de-lenregistrement](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-details-de-lenregistrement)
{% endcontent-ref %}

***

### Exemple 2 : Statut de commande client

{% @arcade/embed flowId="MQbhk3KEUgyVjAfo4zfb" url="<https://app.arcade.software/share/MQbhk3KEUgyVjAfo4zfb>" %}

Donnez à vos clients une clarté instantanée sur l’état de leur commande, de la commande à la livraison, grâce à un indicateur de progression vertical, propre et facile à suivre.

***

#### **Ce que vous obtiendrez**

* **Visibilité des commandes en temps réel :** Affichez directement dans le portail client des informations de statut de commande à jour
* **Réduction des demandes d’assistance :** Permettez aux clients de suivre eux-mêmes leurs commandes, réduisant ainsi le besoin de contacter l’assistance

***

#### **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érifier les valeurs de la liste de sélection** comme type de source de données
* Définissez le **Nom d’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 `Vertical`
* 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 liste de sélection, mais n’écrit pas dans Salesforce lorsqu’un utilisateur clique sur une étape. L’Indicateur de progression lui-même n’expose pas d’interactions ni d’actions dans la version Experience Cloud.

**Astuce :** Si vous développez sur une page Lightning (et non sur un site Experience), [la version Avonni Dynamic Components](https://app.gitbook.com/o/9SPYZVrIHB81fz19OpSr/s/ODPvvv7Cx9Z9RECLn3oV/) de [l’Indicateur de progression](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/progress-indicator) prend bien en charge [les interactions](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/component-builder/interactions) avec des actions de mise à jour d’enregistrement via son onglet Interaction

***

## **Liens**

{% content-ref url="ax-carte-1" %}
[ax-carte-1](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-carte-1)
{% endcontent-ref %}