> 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-metric.md). # AX - Indicateur ## Aperçu **AX - Metric** est un composant Experience Cloud qui affiche des valeurs calculées à partir des enregistrements Salesforce — comme des totaux, des moyennes, des comptes et d’autres agrégations — sur les pages des sites Experience. Utilisez-le pour afficher en un coup d’œil aux utilisateurs du portail des indicateurs clés, tels que leur total de commandes, le temps moyen de résolution des cas, le nombre de tickets ouverts ou tout calcul personnalisé dérivé de leurs données. Configurez le libellé de la métrique, l’icône, le format et la source de données dans Experience Builder, sans code. Parfait pour les tableaux de bord de portail, les résumés de comptes, les tableaux de performance ou partout où les utilisateurs du portail ont besoin de voir des chiffres clés sur leurs enregistrements sans exécuter de rapports. {% hint style="info" %} **Découvrez-le dans un projet réel** [Panneau de mise en avant du compte](https://docs.avonnicomponents.com/projects/use-cases/record-pages/account-highlight-panel): Un panneau de mise en avant personnalisé avec des métriques, des badges et une jauge. {% endhint %} ## Premiers pas Utilisez ce tutoriel simple pour apprendre les bases du composant Metric et commencer à créer vos cas d’utilisation. {% @arcade/embed url="" flowId="SXruKm5NX2h4AYOxH2EQ" %} ## Configuration ### **Libellé** Indiquez un libellé descriptif pour votre métrique (par ex. « Total des ventes », « Utilisateurs actifs »). Cela sert de titre et donne du contexte à la valeur affichée.
### **Description** Fournissez un contexte supplémentaire ou des informations liées à la métrique. Il peut s’agir d’une brève explication, d’une description de tendance ou d’informations complémentaires pour faciliter la compréhension. ### **Valeur** Saisissez la valeur numérique principale de la métrique. Vous avez deux options : #### **Saisie manuelle** Saisissez directement la valeur si elle est facilement disponible. #### **Requête** Exploitez la puissance de Salesforce Object Query Language pour récupérer dynamiquement la valeur à partir de vos données Salesforce. Par exemple, vous pouvez calculer le nombre total de comptes créés cette année à l’aide d’une requête sur l’objet Account.

Exemple : compter les nouveaux comptes créés cette année

La valeur peut également être rendue cliquable, afin que les utilisateurs puissent agir sur le nombre qu’ils voient — configurez-la sous [Interactions](#interactions). ### **Valeur secondaire** Affichez une métrique supplémentaire pour comparaison ou pour fournir davantage de contexte. Il peut s’agir de la valeur d’une période précédente, d’une valeur cible ou de tout point de données secondaire pertinent. ### **Préfixe et suffixe** Ajoutez des symboles ou des abréviations pour fournir du contexte. Par exemple, utilisez « $ » pour la devise, « # » pour les quantités ou « K » pour les milliers. La valeur secondaire a son propre **Préfixe secondaire** et **Suffixe secondaire**. ### **Info-bulle** Fournissez plus de détails au survol. Expliquez brièvement la métrique ou fournissez des informations supplémentaires. ### **Avatar** Représentez visuellement la métrique avec une image, des initiales ou une icône. Cela rend la métrique plus reconnaissable et plus attrayante. * **Image :** L’image à afficher. Accepte `.apng`, `.avif`, `.gif`, `.jpg`, `.jpeg`, `.png`, `.svg`, et `.webp` fichiers. * **Nom de l’icône de repli :** L’icône Lightning Design System utilisée comme solution de repli lorsque l’image ne se charge pas. * **Initiales :** Lettres à afficher à la place d’une image. Si le nom de l’enregistrement contient deux mots, comme un prénom et un nom, utilisez la première lettre majuscule de chacun. * **Position :** Emplacement de l’avatar par rapport à la valeur — Gauche (par défaut), Droite, Bas ou Haut. * **Texte alternatif :** Texte décrivant l’avatar, affiché comme texte au survol sur l’image et lu par les technologies d’assistance. * **Taille :** X-Small, Small, Medium (par défaut), Large, X-Large ou Xx-Large. * **Variante :** Cercle ou Carré (par défaut). ### **Mise en forme des métriques principale et secondaire** Affinez l’affichage des valeurs de vos métriques. Chacun de ces paramètres apparaît dans les deux **éditeur de métrique principale** et **éditeur de métrique secondaire** afin que les deux valeurs puissent être formatées indépendamment : * **Style de format :** Décimal (par défaut), Pourcentage, Pourcentage fixe ou Devise — choisissez le format le plus adapté à vos données. * **Code de devise :** Le code ISO 4217 de la devise à afficher, comme `USD` pour le dollar américain. S’applique uniquement lorsque **Style de format** est défini sur `Devise`. * **Afficher la devise comme :** Affiche la devise sous forme de symbole (par défaut), de code ou de nom. S’applique uniquement lorsque **Style de format** est défini sur `Devise`. * **Signe de la valeur :** Négatif (par défaut) ou positif — contrôlez le signe affiché devant la valeur. * **Chiffres :** Spécifiez le nombre minimum de chiffres entiers, ainsi que le nombre minimum et maximum de chiffres fractionnaires. * **Chiffres significatifs :** Définissez un nombre minimum et maximum de chiffres significatifs à arrondir pour faciliter la lecture. * **Afficher la couleur de tendance :** Utilisez la couleur pour indiquer instantanément une tendance positive (vert) ou négative (rouge) * **Icône de tendance :** Ajoutez une icône dynamique, flèche ou chevron indiquant le sens de la tendance de la valeur. S’applique uniquement lorsque **Afficher la couleur de tendance** est activé. * **Valeur de seuil de tendance :** Le nombre à partir duquel la valeur est considérée comme neutre. Fonctionne avec **Afficher la couleur de tendance** et **Icône de tendance**, et s’applique uniquement lorsque **Afficher la couleur de tendance** est activé. Le **éditeur de métrique secondaire** l’éditeur ajoute un paramètre supplémentaire : * **Position :** Emplacement de la valeur secondaire par rapport à la valeur principale — Bas, Gauche, Droite (par défaut) ou Haut. Grâce à sa flexibilité et à sa large gamme d’options, le composant Avonni Metric vous permet de présenter des données complexes de manière simplifiée et percutante, ce qui en fait un atout précieux pour tout site Experience Cloud souhaitant offrir des informations exploitables à ses utilisateurs. ## Interactions Le **Au clic** Le paramètre rend une valeur de métrique cliquable et définit ce qui se passe lorsqu’un utilisateur clique dessus. Définissez-le dans les **éditeur de métrique principale** et **éditeur de métrique secondaire** sections du panneau des propriétés de Metric dans Experience Builder. Chaque valeur est configurée indépendamment, et une valeur sans **Au clic** interaction reste un texte simple, non cliquable. Voici les interactions disponibles pour le composant Metric : * [Afficher un toast](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/show-toast.md) * [Naviguer](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md) * [Ouvrir une fenêtre modale d’alerte](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-alert-modal.md) * [Ouvrir la confirmation](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-confirm.md) * [Ouvrir la boîte de dialogue du flux](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-flow-dialog.md) * [Exécuter le flux](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/execute-flow.md) * [Télécharger](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/download.md) ### Clic sur la métrique principale Déclenché lorsqu’un utilisateur clique sur la valeur de la métrique principale. Utilisez-le pour naviguer vers une page de détail, ouvrir un flow ou exécuter toute logique liée à la valeur principale. ### Clic sur la métrique secondaire Déclenché lorsqu’un utilisateur clique sur la valeur de la métrique secondaire. Utilisez-le pour déclencher une action distincte pour la valeur secondaire — par exemple, envoyer les utilisateurs vers un autre rapport que celui de la valeur principale. ## Style {% tabs %} {% tab title="Alignement" %} Définissez le **Alignement** et **Alignement secondaire** du contenu de la métrique. {% endtab %} {% tab title="Libellé" %} * **Couleur / Taille de police / Style de police / Graisse de police / Limite de lignes :** Mettez en forme le texte du libellé. {% endtab %} {% tab title="Description" %} * **Couleur / Taille de police / Style de police / Graisse de police / Limite de lignes :** Mettez en forme le texte de description. {% endtab %} {% tab title="Valeur" %} * **Couleur / Taille de police / Style de police / Graisse de police / Hauteur de ligne :** Mettez en forme la valeur principale. {% endtab %} {% tab title="Préfixe et suffixe" %} * **Couleur / Taille de police / Style de police / Graisse de police :** Mettez en forme le préfixe et le suffixe principaux. {% endtab %} {% tab title="Valeur secondaire" %} * **Couleur / Taille de police / Style de police / Graisse de police :** Mettez en forme la valeur secondaire, le préfixe et le suffixe. {% endtab %} {% tab title="Tendance" %} * **Couleur négative / neutre / positive :** Définissez les couleurs de tendance pour la valeur principale. * **Tendance secondaire :** Définissez la couleur, la couleur d’arrière-plan et le rayon pour les tendances secondaires négatives, neutres et positives. {% endtab %} {% tab title="Avatar" %} * **Couleur d’arrière-plan / de premier plan de l’icône, bordure, initiales, alignement vertical :** Mettez en forme l’avatar de la métrique. {% endtab %} {% endtabs %} ## Cas d’utilisation ### Exemple 1 : montant des opportunités gagnées du compte {% @arcade/embed url="" flowId="KEG70at1gkiT4HyGtaBj" %} Mettez le chiffre d’affaires total gagné au premier plan sur chaque page de compte, en donnant aux utilisateurs partenaires une vue immédiate de la valeur de la relation sans quitter l’enregistrement. *** #### **Ce que vous obtiendrez** * **Visibilité du chiffre d’affaires consolidé :** Affichez en temps réel la somme de tous les montants des opportunités gagnées associées au compte, donnant aux partenaires un aperçu immédiat de la valeur client. *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant à votre page** Faites glisser le composant AX – Metric dans Experience Builder sur la page de détail de votre compte. {% endstep %} {% step %} #### **Configurez la source de données** * Cliquez dans le champ Value et configurez une requête à l’aide des paramètres suivants : * Nom API de l’objet : `Opportunité` * Champ : `Montant` * Fonction d’agrégation : `SUM` {% endstep %} {% step %} #### **Appliquez des filtres** Limitez la requête au compte actuel et aux affaires gagnées uniquement : * ID du compte : `{!Item.Id}` * Étape : `Fermée gagnée` {% endstep %} {% step %} #### **Personnalisez l’affichage** * Définissez le libellé sur `Montant gagné` * Définissez l’icône de l’avatar sur `standard:opportunity` {% endstep %} {% step %} #### **Prévisualisez votre composant** * Utilisez l’aperçu d’Experience Builder pour vérifier que la métrique s’affiche correctement avant la publication. {% endstep %} {% endstepper %} *** #### **Liens** {% content-ref url="/pages/b9c32b869e2876f30d4232ad085d6b37ccf85dc2" %} [AX - Carte de profil](/experience-cloud/experience-cloud-fr/experience-components/ax-profile-card.md) {% endcontent-ref %} {% 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 : cas ouverts du compte {% @arcade/embed url="" flowId="S4TjnIAEL1dUly6hcTtg" %} Donnez aux utilisateurs partenaires un décompte en direct des cas non résolus directement sur la page du compte, afin qu’ils puissent rapidement évaluer la charge du support et prioriser leur prise de contact en conséquence. *** #### **Ce que vous obtiendrez** * **Nombre de cas ouverts en un coup d’œil :** Affichez le nombre total de cas actifs liés à un compte, aidant les partenaires à rester informés de l’état du client sans naviguer vers une liste séparée. *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant à votre page** Faites glisser le composant AX – Metric dans Experience Builder sur la page de détail de votre compte. {% endstep %} {% step %} #### **Configurez la source de données** * Cliquez dans le champ Value et configurez une requête à l’aide des paramètres suivants : * Nom API de l’objet : `Cas` * Champ : `ID` * Fonction d’agrégation : `COUNT` {% endstep %} {% step %} #### **Appliquez des filtres** * Limitez la requête au compte actuel et aux cas ouverts uniquement : * ID du compte : `{!Item.Id}` * Fermé : `faux` {% endstep %} {% step %} #### **Personnalisez l’affichage** * Définissez le libellé sur `Cas ouverts` {% endstep %} {% step %} #### **Prévisualisez votre composant** * Utilisez l’aperçu d’Experience Builder pour vérifier que le décompte s’affiche correctement avant la publication. {% endstep %} {% endstepper %} --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-metric.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.