> 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-tree-grid.md). # AX - Grille arborescente **AX - Grille arborescente** est un composant Experience Cloud qui affiche des données hiérarchiques dans une structure arborescente sur les pages Experience Sites (anciennement Community Cloud), avec des lignes extensibles et réductibles et une sélection de ligne facultative. ## Aperçu Utilisez la grille arborescente pour présenter des données parent-enfant (comptes et leurs contacts associés, catégories et sous-catégories, ou tout enregistrement imbriqué) dans un seul tableau où les utilisateurs développent et réduisent les lignes pour explorer la hiérarchie. Chaque colonne est mappée à un champ de votre source de données, et les lignes peuvent être sélectionnées, triées et paginées. Avec une **Requête** source de données, les niveaux proviennent soit d’objets liés différents, soit d’un objet qui se recherche lui-même — une hiérarchie de comptes, une chaîne hiérarchique de reporting, un arbre de catégories. **Mode** dans la requête détermine lesquels, et **Hiérarchie** le mode centre l’arbre sur l’enregistrement que vous lui indiquez.

Trois niveaux d’imbrication, chaque ligne parente développée. La première colonne affiche l’icône de bascule et indente chaque niveau.

## Configuration Ajoutez le composant à votre page dans Experience Builder, puis configurez-le depuis le panneau de propriétés à droite. ### Source de données La section Source de données est l’endroit où vous connectez la grille arborescente à vos données. Deux types de source sont disponibles. | Type de source de données | Description | Cas d’utilisation | | ------------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | **Manuel** | Saisissez directement les lignes et leurs colonnes dans le générateur. | Idéal pour les données non dynamiques, les tests et les démonstrations. | | **Requête** | Créez une requête qui mappe les champs des objets Salesforce aux colonnes du tableau. | Adapté aux données dynamiques en temps réel. | #### Construction de la hiérarchie * **Requête :** choisissez l’objet parent dans **Nom API de l’objet**, puis choisissez la manière dont les niveaux sont construits avec **Mode**, en bas de l’éditeur de requête : * **Multi-niveaux** (par défaut) : ajoutez chaque objet enfant associé sous **Éléments enfants** avec **Ajouter un élément**. Chaque objet dans l’arborescence de requête devient un niveau de lignes développables, et une ligne parente charge ses enfants lorsque l’utilisateur la développe. * **Hiérarchie :** suivez une relation de recherche de l’objet vers lui-même, de sorte que chaque niveau contient le même objet. Choisissez-la dans **Champ de recherche parent** — la liste ne propose que les auto-recherches de l’objet — et définissez **ID de l’enregistrement actuel** dans les paramètres du composant. L’arbre est alors construit à partir de l’ancêtre de niveau supérieur de cet enregistrement, avec la branche menant à l’enregistrement actuel développée et la ligne elle-même marquée d’un **actuel** badge. Les filtres de la requête et **Trier par** s’appliquent à chaque niveau, et la hiérarchie est suivie sur 50 niveaux de profondeur maximum. Les deux paramètres sont nécessaires : sans **Champ de recherche parent** le composant indique que le mode hiérarchie nécessite un champ de recherche parent et un ID d’enregistrement, et l’aperçu d’Experience Builder indique la même chose pendant que **ID de l’enregistrement actuel** est vide. Sur une page en production, un **ID de l’enregistrement actuel** vide ou pointant vers un enregistrement que la requête ne peut pas atteindre laisse la grille afficher son **Message d’absence de résultats** état vide. * **Manuel :** définissez les colonnes du tableau dans **Libellé** et un **Nom**) **Champ clé** qui identifie de manière unique chaque ligne, puis saisissez les lignes sous **Données** et ajoutez des lignes enfants sous une ligne pour créer l’imbrication.

Une source de données Query sur Account, avec Contact ajouté comme niveau enfant, et une colonne mappée pour chaque objet.

### Mappage de données Pour une **Requête** source, définissez les colonnes du tableau dans **Mappages de données**. **Champ d’objet**, qui affiche un champ d’un objet dans la hiérarchie (définissez son **Nom API de l’objet**, puis son **Champ source**), ou **Personnalisé**, une colonne sans champ associé (identifiée par son **Nom**). Pour chaque colonne, vous pouvez définir : * **Champ source :** le champ auquel la colonne est liée. * **Libellé :** le texte affiché dans l’en-tête de colonne. Activez **Libellé personnalisé** pour remplacer le libellé propre du champ. * **Type :** la façon dont la valeur est mise en forme et modifiée (`texte` par défaut). Plus de 30 types sont disponibles, notamment texte, nombre, devise, date, pourcentage, e-mail, téléphone, URL, badge, avatar, barre de progression, évaluation et texte enrichi, avec des attributs spécifiques au type choisi. Le **action**, **bouton** et **bouton-icône** types ajoutent des actions de ligne (voir ci-dessous). * **Nom de l’icône :** une icône pour la colonne. * **Triable :** indique si les utilisateurs peuvent trier le tableau par cette colonne. * **Retour à la ligne :** indique si le texte long des cellules revient à la ligne au lieu d’être tronqué. Disponible pour les types devise, date, e-mail, lieu, nombre, pourcentage, téléphone, texte, heure et URL. * **Masqué :** indique si la colonne est masquée à l’affichage. * **Largeur initiale** (paramètre avancé) : la largeur initiale de la colonne. * **Attributs de cellule :** l’alignement du contenu ainsi qu’une icône de cellule facultative et sa position. Disponible uniquement pour certains types. * **Actions :** vos propres entrées dans le menu déroulant de l’en-tête de colonne. Chaque action comporte un **Libellé**, un **Nom**, un **Nom de l’icône**, et facultatif **Coché** et **Désactivé** états, et comporte sa propre **Au clic** interaction. Un **Manuel** Les colonnes d’une source prennent un **Libellé**, un **Nom** et le même en-tête de colonne **Actions**, et affichent leurs valeurs sous forme de texte. La première colonne est toujours la colonne d’arborescence : elle affiche l’icône d’expansion et le libellé de chaque ligne, quel que soit le type que vous lui attribuez. #### Actions de ligne Les colonnes de type **action**, **bouton** ou **bouton-icône** ont leur propre **Au clic** interaction, qui s’exécute avec la ligne cliquée disponible comme `{{Record.}}`. Utilisez-les pour ouvrir un enregistrement, lancer un flow ou exécuter toute autre interaction depuis une ligne. ### Général **Nom API** est un identifiant unique utilisé pour référencer le composant (3 à 30 caractères ; lettres, chiffres, tirets bas et tirets). **ID de l’enregistrement actuel** est l’ID de l’enregistrement sur lequel l’arbre se centre en **Hiérarchie** mode : l’arbre affiche les ancêtres et descendants de cet enregistrement, et la ligne porte un **actuel** badge. Sur une page d’enregistrement, définissez-le sur `{!recordId}` expression afin que l’arbre suive l’enregistrement que l’utilisateur consulte. Cela n’a aucun effet en **Multi-niveaux** mode. **Masquer l’en-tête du tableau** supprime la ligne d’en-tête du tableau, et **Masquer la colonne de cases à cocher** supprime la colonne utilisée pour la sélection des lignes. **Afficher le nombre d’éléments sélectionnés** affiche « N éléments sélectionnés » dans l’en-tête lorsque des lignes sont sélectionnées. Chaque fois que des lignes sont sélectionnées, l’en-tête propose également un **Effacer la sélection** lien. **Afficher la colonne des numéros de ligne** ajoute une colonne qui numérote chaque ligne, et **Décalage des numéros de ligne** modifie cette numérotation : la première ligne affiche le décalage plus un (0 par défaut, donc la numérotation commence à 1). ### En-tête **Titre de l’en-tête** et **Légende de l’en-tête** ajoutez un titre et une légende d’accompagnement au-dessus du tableau ; **Style du texte du titre de l’en-tête** et **Style du texte de la légende de l’en-tête** définissez le style de texte de chacun (un style de titre ou de paragraphe). **Nom de l’icône de l’en-tête** ajoute une icône à côté du titre, et **Taille de l’icône de l’en-tête** définit sa taille (**XXS**, **XS**, **Petit**, **Moyen** par défaut, ou **Grand**). **L’en-tête est fusionné** supprime le rayon de bordure inférieur et l’ombre de l’en-tête afin qu’il s’aligne parfaitement avec le tableau en dessous.

Un en-tête avec sa légende, son titre, son icône et deux actions d’en-tête, plus la colonne des numéros de ligne et des icônes de bascule personnalisées (utility:dash pour une ligne ouverte, utility:add pour une ligne fermée).

### Largeurs de colonne **Mode des largeurs de colonne** choisit **Fixe** ou **Automatique** les largeurs de colonne. **Largeur maximale de colonne** (1000 px par défaut) et **Largeur minimale de colonne** (50 px par défaut) définissent les limites de largeur, et **Redimensionnement de colonne désactivé** désactive le redimensionnement manuel des colonnes. ### Icône de bascule de ligne Définissez les icônes utilisées pour développer et réduire une ligne : **Nom de l’icône ouverte** est affichée lorsqu’une ligne est ouverte (`utility:chevrondown` par défaut) et **Nom de l’icône de fermeture** lorsqu’elle est fermée (`utility:chevronright` par défaut). Les deux acceptent un nom d’icône Lightning Design System. ### Actions de l’en-tête Configurez les boutons d’action qui apparaissent dans l’en-tête du tableau. Chaque action a un **Libellé**, un **Nom**, un **Nom de l’icône**, un survol **Titre**, et **Texte alternatif** pour l’icône du bouton (un paramètre avancé). Configurez ce que chaque bouton fait dans sa **Au clic** section : Afficher une notification, Naviguer, Télécharger, Ouvrir la boîte de dialogue d’alerte, Ouvrir la boîte de dialogue de confirmation, Ouvrir la boîte de dialogue Flow, Exécuter un flow, Actualiser toutes les requêtes ou Actualiser la requête. La plupart ont leur propre page dans Interactions, par exemple [Naviguer](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md). **Boutons d’actions visibles** définit combien de boutons d’action sont affichés avant que les autres ne se réduisent en menu. Ce sont les propres boutons d’en-tête du tableau. Le menu déroulant d’un en-tête de colonne individuel est configuré séparément, dans le **Actions** paramètre sous [Mappage de données](#data-mapping). ### Pagination **Nombre de lignes supplémentaires** (100 par défaut, de 1 à 500) définit, pour une **Requête** source, combien de lignes supplémentaires se chargent chaque fois que l’utilisateur atteint la fin d’un niveau. Le chargement de lignes supplémentaires n’est pas actif dans l’aperçu d’Experience Builder. ### Tri **Direction de tri par défaut** définit la direction (**Croissant** ou **Décroissant**) appliquée lorsqu’une colonne est triée pour la première fois. ### Message d’absence de résultats **Message d’absence de résultats** remplace l’état vide par défaut par votre propre texte lorsque la source de données ne renvoie aucune ligne. **Attributs du message d’absence de résultats** contrôle ce que cet état vide affiche : **Masquer l’image d’absence de résultats** supprime l’illustration et **Masquer le message d’absence de résultats** supprime le texte. Les deux sont désactivés par défaut. ## Style {% tabs %} {% tab title="Marge" %} Contrôle l’espacement externe autour du composant. {% endtab %} {% tab title="Remplissage" %} Contrôle l’espacement interne du composant. {% endtab %} {% tab title="Taille" %} Contrôle les dimensions du composant. {% endtab %} {% tab title="Bordure" %} Contrôle la bordure autour de la grille arborescente (couleur / taille / style / rayon). {% endtab %} {% tab title="En-tête" %} Définit la couleur d’arrière-plan de l’en-tête, son espacement interne et l’espace situé en dessous. {% endtab %} {% tab title="Bordure de l’en-tête" %} Définit la couleur, la taille, le style et le rayon de la bordure de l’en-tête, ainsi que la bordure inférieure utilisée lorsque **L’en-tête est fusionné** est activé. {% endtab %} {% tab title="Titre de l’en-tête" %} Définit la couleur, la taille de police, le gras et le style de police du titre de l’en-tête. {% endtab %} {% tab title="Légende de l’en-tête" %} Définit la couleur, la taille de police, le gras et le style de police de la légende de l’en-tête. {% endtab %} {% tab title="Boîte de dialogue et panneau Flow" %} Applique un style à la boîte de dialogue ou au panneau latéral ouvert par une **Ouvrir la boîte de dialogue du flux** ou **Ouvrir le panneau du flux** interaction, en quatre groupes : **En-tête de la boîte de dialogue Flow**, **Pied de page de la boîte de dialogue Flow**, **Panneau Flow** et **En-tête du panneau Flow**. {% endtab %} {% endtabs %} --- # 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-tree-grid.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.