> 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-data-table.md). # AX - Table de données ## Aperçu **AX - Table de données** est un composant Experience Cloud qui affiche vos enregistrements Salesforce dans un tableau interactif sur les pages des sites Experience (anciennement Community Cloud). Utilisez-le pour afficher aux utilisateurs du portail des ensembles de données filtrés avec un contrôle total sur les colonnes, le tri, la recherche et la pagination. Récupérez des enregistrements depuis n’importe quel objet standard ou personnalisé et laissez les utilisateurs externes consulter, rechercher et interagir avec les données pertinentes pour leur compte ou leur profil. Idéal pour les portails clients affichant l’historique des commandes, les portails partenaires affichant l’historique des commandes, les portails partenaires affichant des enregistrements partagés, ou les sites de libre-service où les utilisateurs doivent trouver et consulter leurs propres données. {% hint style="success" %} Le tableau de données Avonni est un [composant de données réactif](/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md) {% endhint %} {% hint style="info" %} **Découvrez-la dans un projet réel** [Guichet des commandes partenaires](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/partner-order-desk): Un guichet des commandes partenaires avec modification en ligne et téléversement de PDF. {% endhint %} ## Premiers pas Utilisez ce tutoriel simple pour apprendre les bases du composant Tableau de données et commencer à créer vos cas d’usage. {% @arcade/embed url="" flowId="oAo6XOMWRBc7Vn4Y9XNd" %} ## Tutoriels


Créer un bouton Exporter vers sur le tableau de données	Create an Export To button on the Data Table
Configuration du tableau de données	Configuring the Avonni Data Table
Afficher des fichiers Salesforce CMS dans un tableau de données	Affichage des fichiers Salesforce CMS dans une table de données

## Configuration ### Source de données La section Source de données est l’endroit où vous connectez le tableau de données Avonni à vos données Salesforce. Vous avez deux options.

Type de source de données	Description	Cas d’utilisation
Manuel	Saisissez manuellement des données dans le tableau de données.	Idéal pour les données non dynamiques, les tests et les démonstrations.
Requête	Créez une requête pour remplir automatiquement le tableau avec des données Salesforce.	Adapté aux jeux de données dynamiques, en temps réel et volumineux.
Collection CMS	Affichez de manière fluide vos collections CMS dans les tableaux de données pour des mises à jour de contenu dynamiques.	Créez des listes de ressources ou des fils d’actualités se mettant à jour automatiquement.

{% hint style="info" %} En mode Requête, les données sont affichées par lots de 25 enregistrements afin de maintenir des performances optimales du site. {% endhint %} ### Mappage des données Vous donnez vie à votre tableau de données dans la section Mappages de données en définissant et en personnalisant ses colonnes.

Partage du modèle de données avec Avonni Data Table

**Respect des règles de partage des données Salesforce :** * **Respect des paramètres de l’organisation :** Les composants Avonni respectent pleinement les configurations de partage des données et les paramètres d’accès existants de votre organisation Salesforce. * **Politique de non-interférence :** Ces composants ne modifient ni n’affectent en aucune façon vos règles de partage des données préétablies. * **Visibilité et accès contrôlés :** La possibilité de consulter et d’interagir avec les enregistrements via les composants Avonni est régie par les paramètres de partage et les autorisations utilisateur définis par votre organisation

#### Ajout de colonnes * Cliquez sur le bouton « Ajouter des colonnes » pour sélectionner les champs de votre source de données à afficher comme colonnes dans le tableau de données.

* Cette section détermine quelles données sont visibles et comment elles sont organisées dans votre tableau. * Cliquez sur une colonne pour accéder à toutes les propriétés de cette colonne spécifique.

#### Configuration des propriétés de colonne * **Type de données :** Ajustez le type d’affichage du champ (par exemple, texte, nombre, date) pour garantir une représentation correcte des données. * **Créer un lien :** Activez la liaison des données de cellule à d’autres enregistrements ou URL pour une navigation rapide. * **Attributs de cellule :** Personnalisez l’alignement et les icônes des cellules pour créer un tableau plus intuitif et visuellement attrayant. * **Actions :** Ajoutez vos propres entrées au menu déroulant de l’en-tête de colonne. Chaque action prend un **Libellé**, un **Nom**, une **Nom de l’icône**, et des **Coché** et **Désactivé** états, et comporte sa propre **Au clic** interaction. * **Modifiable :** Décidez si une colonne doit être modifiable directement dans le tableau. * **Filtrable et recherchable :** Activez le filtrage et la recherche par colonne pour une gestion efficace des données. * **Masqué :** Choisissez de masquer certaines colonnes, utile pour des données sensibles ou moins pertinentes. * **Triable :** Autorisez les utilisateurs à trier les données par la colonne spécifiée. * **Masquer les actions par défaut :** Choisissez de masquer les actions prédéfinies pour un aspect plus épuré. * **Renvoi à la ligne du texte :** Activez le renvoi à la ligne pour une meilleure lisibilité dans les colonnes étroites. * **Définir la largeur de colonne :** Spécifiez la largeur de chaque colonne pour obtenir une mise en page équilibrée et ordonnée. #### Filtres Avec une **Requête** source de données, **Filtres** répertorie les champs par lesquels les utilisateurs peuvent filtrer le tableau. Comme **Champs de recherche**, il est mappé en parallèle des colonnes, de sorte qu’un filtre peut cibler un champ qui n’est pas affiché comme colonne. Chaque entrée prend : * **Filtrer par :** le champ auquel le filtre s’applique. Obligatoire. * **Valeur par défaut (facultatif) :** la valeur sur laquelle le filtre démarre lorsque la page se charge. Le champ de saisie correspond au type du champ ; ainsi, un champ de liste de sélection propose ses valeurs, un champ de date affiche un sélecteur de date, et un champ à cocher **Vrai** ou **Faux**. * **Libellé personnalisé :** affichez votre propre texte au-dessus du filtre au lieu du libellé du champ. Activez-le, puis saisissez le texte dans **Libellé**. #### Champs de recherche Avec une **Requête** source de données, **Champs de recherche** répertorie les champs d’objet sur lesquels la zone de recherche effectue sa recherche. Il est mappé en parallèle des colonnes, de sorte qu’il peut atteindre des champs qui ne sont pas affichés comme colonne. Les deux paramètres de recherche s’additionnent au lieu de se remplacer : la recherche s’exécute sur l’union de ces champs et des champs derrière chaque colonne marquée **Recherchable**. #### Ajout d’actions de ligne Voici un tutoriel interactif guidé sur l’ajout d’actions de ligne au tableau de données. {% @arcade/embed url="" flowId="db617gnzKCL8QA22aziq" %} ### Paramètres de base **Masquer l’en-tête du tableau** * Cette option vous permet de supprimer l’en-tête du tableau pour un aspect plus épuré et plus minimaliste.

**Masquer les colonnes de cases à cocher** * Activez ce paramètre pour masquer les colonnes de cases à cocher, généralement utilisées pour la sélection des lignes dans les scénarios multi-actions.

**Afficher la colonne des numéros de ligne** * Activez cette option pour afficher une colonne qui numérote chaque ligne, ce qui est utile pour référencer facilement les données. ### Configuration de l’en-tête **Titre et légende** * Personnalisez l’en-tête avec un titre et une légende pour fournir un contexte ou un résumé des données du tableau. **Nom et taille de l’icône** * Améliorez l’en-tête avec une icône, en sélectionnant son type et sa taille pour la mettre en valeur visuellement. **Est joint** * Ce paramètre détermine si l’en-tête est visuellement connecté au corps du tableau, ce qui affecte la conception globale. **Actions de l’en-tête** * Configurez les actions (ajout, suppression ou fonctions personnalisées) directement accessibles depuis l’en-tête du tableau.

### Boutons d’action dans l’en-tête * Implémentez des boutons d’action dans l’en-tête du tableau pour ajouter de nouveaux enregistrements, exporter des données ou effectuer d’autres actions personnalisées, ce qui améliore l’interaction utilisateur et l’efficacité.

#### Configurez l’interaction sur le bouton Configurez l’interaction lorsque les utilisateurs appuient sur le bouton d’action de l’en-tête dans la section « Au clic ». Pour comprendre le fonctionnement de l’interaction « Naviguer », [cliquez ici](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md) pour plus d’informations.

#### Tutoriel {% content-ref url="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb" %} [Create an Export To button on the Data Table](/projects/experience-cloud-components/create-an-export-to-button-on-the-data-table.md) {% endcontent-ref %} ### Attributs de pagination * Configurez les paramètres de pagination, tels que le nombre d’éléments par page et le style de pagination, pour gérer la manière dont les données sont affichées et parcourues dans les tableaux volumineux. {% hint style="info" %} En mode Requête, les données sont affichées par ensembles de 25 enregistrements pour maintenir des performances optimales du site. Par conséquent, la mise en place de la pagination peut être utile. {% endhint %}

### Configuration du moteur de recherche * **Texte indicatif :** Définissez un texte indicatif pour la barre de recherche afin d’orienter les utilisateurs sur ce qu’ils peuvent rechercher. * **Position :** Choisissez l’emplacement de la barre de recherche dans la mise en page du tableau pour une accessibilité optimale. * **Valeur de recherche par défaut :** Préremplissez une valeur de recherche pour filtrer les données du tableau au chargement. {% hint style="info" %} La barre de recherche apparaît dès qu’au moins une colonne est marquée **Recherchable** — **Autoriser la recherche sur toutes les colonnes** compte — ou au moins un **Champ de recherche** est également une colonne affichée qui n’est pas une colonne de type Heure. {% endhint %}

Une colonne définie sur « Recherchable » — la manière habituelle d’afficher la barre de recherche.

### Référence des paramètres #### Général **Nom de l’API** est un identifiant unique utilisé pour référencer le composant (de 3 à 30 caractères ; lettres, chiffres, traits de soulignement et tirets). **Masquer l’en-tête du tableau** masque l’en-tête du tableau, **Masquer les bordures du tableau** masque également les bordures du tableau (uniquement lorsque **Masquer l’en-tête du tableau** est également activé), et **Masquer la colonne de cases à cocher** supprime la colonne utilisée pour les cases à cocher de sélection des lignes. **Afficher la colonne des numéros de ligne** affiche une colonne de numéros de ligne, et **Décalage du numéro de ligne** définit le numéro de départ pour cette numérotation. **Nombre maximal de lignes à modifier et à sélectionner** limite le nombre de lignes pouvant être modifiées ou sélectionnées en même temps ; une ligne qui est à la fois modifiée et sélectionnée ne compte que pour une. **Sélection maximale des lignes** limite le nombre maximal de lignes pouvant être sélectionnées, **Valeur clé des lignes dont la sélection est désactivée** répertorie les valeurs de champ clé séparées par des virgules des lignes dont la sélection doit être désactivée, **Afficher le nombre d’éléments sélectionnés** affiche le nombre d’éléments actuellement sélectionnés, et **Supprimer la barre inférieure** masque la barre inférieure généralement utilisée pour les actions et l’affichage d’informations. **Lecture seule** rend le tableau non interactif, en interdisant les modifications ou les sélections. **Autoriser la modification de toutes les colonnes**, **Autoriser le filtrage sur toutes les colonnes**, **Autoriser la recherche sur toutes les colonnes**, **Autoriser le tri sur toutes les colonnes**, et **Autoriser le renvoi à la ligne sur toutes les colonnes** activez la modification, le filtrage, la recherche, le tri et le renvoi à la ligne sur toutes les colonnes, et **Masquer les actions par défaut** masque les actions prédéfinies comme modifier ou supprimer. **Renvoi à la ligne de l’en-tête du tableau** renvoie les longs libellés d’en-tête à la ligne au lieu de les tronquer. **Mode des largeurs de colonne** choisit **Fixes** ou **Auto** largeurs de colonne, **Largeur maximale de colonne** et **Largeur minimale de colonne** définissent les limites de largeur, **Nombre maximal de lignes pour le renvoi à la ligne du texte** limite le nombre de lignes pour le texte de cellule renvoyé à la ligne, **Redimensionnement des colonnes désactivé** désactive le redimensionnement des colonnes, et **Incrément de redimensionnement** définit l’incrément de largeur, en pixels, de la colonne lors du redimensionnement. **Direction du tri** définit le sens de tri du tableau au chargement et **Sens de tri par défaut** le sens appliqué lorsqu’une colonne est triée pour la première fois — **Ascendant** ou **Descendant** pour les deux. **Afficher la valeur triée par** affiche quelle colonne est actuellement utilisée pour le tri. **Titre de l’en-tête** et **Légende de l’en-tête** définissez le titre et la légende de l’en-tête, chacun avec son propre **Style de texte du titre de l'en-tête** / **Style de texte du sous-titre de l'en-tête**. **Nom de l'icône de l'en-tête** ajoute une icône d’en-tête et **Taille de l'icône de l'en-tête** définit sa taille (**Moyen** par défaut), et **L'en-tête est joint** connecte visuellement l’en-tête au corps du tableau. **Masquer les actions de l’en-tête**, **Désactiver les actions de l’en-tête**, **Boutons d’actions visibles de l’en-tête**, et **Actions de l’en-tête** contrôlent la visibilité, la disponibilité, le nombre et la définition des boutons d’action de l’en-tête. #### Pagination et recherche **Attributs de pagination** contient les contrôles de pagination : **Afficher la pagination** les affiche, **Nombre d’éléments par page** définit combien d’enregistrements chaque page contient (ou, avec la pagination désactivée et une hauteur de tableau fixe, combien d’enregistrements se chargent à la fois), **Alignement** place les contrôles **Gauche**, **Centre** ou **Droite**, et le **Premier**, **Précédent**, **Suivant** et **Dernier** les boutons prennent chacun leur propre **Libellé du bouton** et **Nom de l’icône du bouton**. **Attributs du conteneur de pastilles** affiche les lignes sélectionnées sous forme de pastilles : **Afficher l’élément sélectionné du conteneur de pastilles** active le conteneur, **Champ de libellé** choisit le champ dont la valeur libelle chaque pastille, **Triable** permet aux utilisateurs de les réorganiser, et **Une seule ligne** les maintient sur une seule ligne. **Attributs du moteur de recherche** configurez la barre de recherche : **Texte indicatif** définit son texte indicatif, **Position** la place **Gauche**, **Droite**, **Centre**, **Remplir** ou **Panneau** (dans le panneau latéral), et **Valeur de recherche par défaut** la préremplit. #### Filtrage **Attributs du menu de filtre** configurez les filtres par colonne. **Type** les place **Horizontal** (par défaut) en haut, dans un **Popover**, ou dans un **Panneau** à côté du tableau. **Ordre de tri des listes de sélection** définit l’ordre d’apparition des valeurs de liste de sélection (**Ascendant**, la valeur par défaut, **Descendant**, ou **Ordre par défaut du champ**), **Utiliser les valeurs de liste de sélection de l’enregistrement** dérive les options d’un filtre de liste de sélection des valeurs présentes dans les enregistrements plutôt que de l’ensemble complet des valeurs du champ, et **Utiliser les valeurs de filtre en cascade** restreint les options des autres filtres pour correspondre à la sélection actuelle (en prenant le pas sur **Utiliser les valeurs de liste de sélection de l’enregistrement**). Chaque filtre comporte également un opérateur, choisi dans un menu en haut du filtre. Les filtres de texte, de liste de sélection, de liste de sélection à sélection multiple et de recherche proposent **Égal à** (par défaut), **Différent de**, **Vide** et **Non vide**. Les filtres numériques, de date et d’heure proposent **Entre** (par défaut), **Pas entre**, **Égal à**, **Différent de**, **Inférieur à**, **Inférieur ou égal à**, **Supérieur à**, **Supérieur ou égal à**, **Vide** et **Non vide**. **Vide** et **Non vide** ne prennent aucune valeur, donc les entrées du filtre sont masquées lorsque l’un ou l’autre est sélectionné. Les filtres à case à cocher n’ont pas de menu d’opérateurs. #### Panneau latéral **Attributs du panneau latéral** configure le panneau situé à côté du tableau. Il n’apparaît que lorsque la recherche ou le menu de filtre y est positionné — **Position** défini sur **Panneau** dans **Attributs du moteur de recherche**, ou **Type** défini sur **Panneau** dans **Attributs du menu de filtre**. * **Position :** de quel côté se trouve le panneau, **Gauche** (la valeur par défaut) ou **Droite**. * **Fermé par défaut :** démarre le panneau réduit. Désactivé par défaut. * **Masquer le bouton bascule :** supprime le bouton d’en-tête avec lequel les utilisateurs ouvrent et ferment le panneau. Désactivé par défaut. * **Libellé du bouton de réinitialisation :** le libellé du bouton qui efface toute sélection de filtre. `Effacer toutes les sélections` par défaut. #### Message d’absence de résultats **Message d’absence de résultats** remplace l’état vide par défaut par votre propre texte lorsqu’aucune ligne ne correspond à la recherche ou aux filtres — ou lorsque la source de données ne renvoie absolument rien. **Attributs du message d’absence de résultats** contrôlent 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. ## Mise en forme {% tabs %} {% tab title="En-tête" %} | Nom | Description | | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | | **Couleur d’arrière-plan** | Définit la couleur de fond de l’en-tête. | | **Couleur de bordure** | Définit la couleur de la bordure de l’en-tête. | | **Taille de bordure** | Ajuste l’épaisseur de la bordure. | | **Style de bordure** | Sélectionne le style (plein, pointillé, en tirets, etc.) de la bordure. | | **Rayon de bordure** | Arrondit les coins de l’en-tête. | | **Couleur de la bordure inférieure (Est joint)** | Spécifie la couleur de la bordure inférieure lorsque l’en-tête est visuellement joint au corps du tableau. | | **Taille de la bordure inférieure (Est joint)** | Détermine l’épaisseur de la bordure inférieure jointe. | | **Style de la bordure inférieure (Est joint)** | Définit le style de la bordure inférieure jointe. | | **Espacement interne et externe** | Contrôle l’espacement à l’intérieur (padding) et à l’extérieur (margin) de l’en-tête. | | {% endtab %} | | {% tab title="Titre de l’en-tête" %} | Nom | Description | | --------------------- | ------------------------------------------------------------------ | | **Couleur** | Définit la couleur du texte du titre. | | **Taille de police** | Ajuste la taille du texte du titre. | | **Graisse de police** | Modifie le gras du texte du titre. | | **Style de police** | Applique un style spécifique (italique, normal) au texte du titre. | | {% endtab %} | | {% tab title="Légende de l’en-tête" %} | Nom | Description | | --------------------- | -------------------------------------------- | | **Couleur** | Définit la couleur du texte de la légende. | | **Taille de police** | Ajuste la taille du texte de la légende. | | **Graisse de police** | Contrôle l’épaisseur du texte de la légende. | | **Style de police** | Définit le style du texte de la légende. | | {% endtab %} | | {% tab title="Icône d’en-tête" %} | Nom | Description | | ----------------------------------------- | ---------------------------------------------------------------------- | | **Couleur d’arrière-plan** | Définit la couleur de fond de l’icône. | | **Couleur de premier plan** | Modifie la couleur de l’icône elle-même. | | **Utilitaire de couleur de premier plan** | Ajuste la couleur utilitaire pour le contraste ou la mise en évidence. | | **Rayon de bordure** | Arrondit les coins de l’icône pour un aspect plus doux. | | {% endtab %} | | {% tab title="Conteneur de pastilles" %} | Nom | Description | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------ | | **Couleur de fond de la pastille / au survol** | Définit la couleur de fond des éléments de pastille, avec une couleur différente au survol. | | **Couleur du texte de la pastille / au survol** | Modifie la couleur du texte à l’intérieur de la pastille, avec une couleur différente au survol. | | **Hauteur de ligne de la pastille** | Ajuste la hauteur de ligne dans la pastille pour l’alignement du texte. | | {% endtab %} | | {% tab title="Avatar" %} | Nom | Description | | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Ajustement de l’image d’avatar** | Détermine comment l’image d’avatar doit s’adapter à son conteneur. Les options comprennent « fill », « contain », « cover », « none » et « scale-down ». | | {% endtab %} | | {% tab title="Boutons de pagination" %} | Nom | Description | | ----------------------- | ----------------------------------------------------------------------------------------------------------------- | | **Paramètres de style** | Personnalise l’apparence des boutons de pagination, y compris la couleur, la taille et les propriétés de bordure. | | {% endtab %} | | {% tab title="Pied de page" %} | Nom | Description | | -------------------------- | ----------------------------------------------------- | | **Couleur d’arrière-plan** | Définit la couleur de l’arrière-plan du pied de page. | | **Couleur de bordure** | Définit la couleur de la bordure du pied de page. | | **Taille de bordure** | Ajuste l’épaisseur de la bordure. | | **Style de bordure** | Sélectionne le style de la bordure. | | **Rayon de bordure** | Arrondit les coins du pied de page. | | {% endtab %} | | {% tab title="Panneau des filtres" %} Stylise le panneau latéral qui contient les filtres et la recherche. * **Panneau des filtres :** Couleur de fond / Couleur de bordure / Taille de bordure / Style de bordure / Rayon de bordure. * **Libellés du panneau des filtres :** Fond / Fond actif / Fond au survol ; Couleur de l’icône de réduction ; Couleur / Couleur active / Couleur au survol ; Taille de police / Graisse de police. * **Options du panneau des filtres :** Couleur ; Couleur de bordure de la case à cocher ; Couleur du texte du bouton Charger plus / Couleur du texte active / Couleur du texte au survol. * **Bouton de réinitialisation du panneau des filtres :** Couleur de fond / Couleur du texte / Couleur de bordure / Taille de bordure / Rayon de bordure. {% endtab %} {% endtabs %} ## Cas d'utilisation ### Exemple 1 : liste améliorée des comptes et contacts associés {% @arcade/embed url="" flowId="sxcJn4NliMFN6qTRk5Mi" %} Offrez à vos partenaires un moyen puissant et intuitif d’explorer les données des comptes, avec recherche en ligne, filtrage et panneau de contacts dynamique qui se met à jour au fil de leur navigation. *** #### **Ce que vous allez obtenir** * **liste de comptes recherchable et filtrable :** Permettez aux partenaires de trouver rapidement des comptes par nom ou secteur à l’aide des contrôles de recherche et de filtre intégrés. * **Enregistrements liés en ligne :** Rendez les noms de comptes cliquables afin que les partenaires puissent accéder directement aux pages de détail des enregistrements. * **Panneau de contacts associés en temps réel :** Affichez un deuxième tableau qui se rafraîchit automatiquement pour montrer les contacts liés au compte sélectionné. * **Résultats paginés :** Gardez une interface claire et performante en limitant le nombre d’enregistrements visibles par page. *** #### **Avant de commencer** * **Mise en page à deux colonnes :** Assurez-vous que votre page Liste de comptes dans Experience Builder dispose déjà d’une mise en page à deux colonnes prête à recevoir les deux composants. *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le premier AX - Datatable à votre page** * Glissez un composant AX - Datatable dans la colonne de gauche de votre page Liste de comptes dans Experience Builder. {% endstep %} {% step %} #### **Choisissez une source de données** * Sélectionnez **Interroger les comptes** comme source de données pour ce composant. {% endstep %} {% step %} #### **Définissez vos mappages de données** * Ajoutez les colonnes suivantes : Name, Industry, Owner.FullName et Phone. * Activez **Créer un lien** sur la colonne Name afin que les noms de comptes deviennent des liens cliquables. * Définissez **Industry** comme champ de filtre. * Définissez **Nom** comme champ de recherche. {% endstep %} {% step %} #### **Configurez le composant** * Définissez le **Nom de l'API** à `AccountsTable`. * Définissez **Sélection maximale des lignes** à `1` afin qu’un seul compte puisse être sélectionné à la fois. * Activez la pagination et définissez le **Nombre maximal d’enregistrements** à `10`. {% endstep %} {% step %} #### **Personnalisez l'en-tête** * Définissez le **Titre de l’en-tête** à `Comptes`. * Définissez le **Icône d’en-tête** à `standard:account_info`. {% endstep %} {% step %} #### **Ajoutez le deuxième AX - Datatable à votre page** * Glissez un deuxième composant AX - Datatable dans la colonne de droite de la même page. {% endstep %} {% step %} #### **Choisissez une source de données pour le tableau des contacts** * Sélectionnez **Interroger les contacts** comme source de données. * Ajoutez un filtre pour que **AccountId** est égal à `{{AccountsTable.selectedRecord.Id}}`, reliant les résultats de ce tableau au compte actuellement sélectionné. {% endstep %} {% step %} #### **Définissez vos mappages de données** * Ajoutez les colonnes suivantes : Nom et Titre. {% endstep %} {% step %} #### **Configurez le composant** * Définissez le **Nom de l'API** à `relatedContactsTable`. {% endstep %} {% step %} #### **Personnalisez l'en-tête** * Définissez le **Titre de l’en-tête** à `Contacts associés`. * Définissez le **Icône d’en-tête** à `standard:contact`. {% endstep %} {% step %} #### **Aperçu de votre page** * Cliquez sur Aperçu dans Experience Builder, sélectionnez une ligne de compte et confirmez que le tableau Contacts associés se met à jour dynamiquement pour refléter l’enregistrement sélectionné. {% endstep %} {% endstepper %} *** #### **Liens** {% content-ref url="/pages/a2bada4c0d3a0b32a35da201e10a981fbd6c5dd6" %} [Tables de données liées](/experience-cloud/experience-cloud-fr/tutoriels/reactive-components/linked-data-tables.md) {% endcontent-ref %} *** ### Exemple 2 : Opportunités associées sur une page de compte {% @arcade/embed url="" flowId="tZa89LmaWt8n5CoQhwB8" %} Offrez aux utilisateurs commerciaux une vue d’ensemble de chaque opportunité liée à un compte, exactement là où ils en ont besoin, sans jamais quitter la page d’enregistrement. *** #### **Ce que vous allez obtenir** * **Vue client à 360° plus riche :** Affichez les données clés des opportunités directement sur la page Compte afin que les utilisateurs commerciaux aient une vue d’ensemble complète en un seul endroit. * **Pages d’enregistrement entièrement enrichies :** Créez des pages denses et riches en informations qui évitent d’avoir à passer d’un onglet ou d’un objet à l’autre pour gérer un pipeline. *** #### **Avant de commencer** * **Page d’enregistrement Compte avec composants existants :** Assurez-vous que votre page d’enregistrement Compte dans Experience Builder inclut déjà les détails de l’enregistrement, une bannière et une disposition en colonnes prête à accueillir le nouveau composant. *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez AX - Datatable à votre page Compte** * Faites glisser un composant AX - Datatable sur votre page d’enregistrement Compte dans Experience Builder. {% endstep %} {% step %} #### **Choisissez une source de données** * Sélectionnez **Interroger les opportunités** comme source de données pour ce composant. {% endstep %} {% step %} #### **Définissez vos mappages de données** * Ajoutez les colonnes suivantes : Nom, Étape et Montant. * Activez **Créer un lien** sur la colonne Nom afin que les noms des opportunités deviennent des liens cliquables. {% endstep %} {% step %} #### **Configurez le composant** * Définissez le **Nom de l'API** à `RelatedOpportunities`. * Ajoutez un filtre pour que **AccountId** est égal à `{!Item.id}`, en limitant les résultats au compte actuellement consulté. {% endstep %} {% step %} #### **Personnalisez l'en-tête** * Définissez le **Titre de l’en-tête** à `Opportunités`. * Définissez le **Style d’en-tête** à `Titre 2`. * Définissez le **Icône d’en-tête** à `standard:opportunity`. {% endstep %} {% step %} #### **Aperçu de votre page** * Cliquez sur Aperçu dans Experience Builder et accédez à un enregistrement de compte pour confirmer que seules les opportunités associées à ce compte apparaissent dans le tableau. {% 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-data-table.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.