# AX - Tableau de données

## Aperçu

**AX - Tableau 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 jeux de données filtrés avec un contrôle complet des colonnes, du tri, de la recherche et de 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 qui affichent l’historique des commandes, les portails partenaires qui affichent l’historique des commandes, les portails partenaires affichant des enregistrements partagés, ou les sites en libre-service où les utilisateurs doivent retrouver et consulter leurs propres données.

{% hint style="success" %}
Le tableau de données Avonni est un [Composant de données réactif](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/demarrage/composants-reactifs)
{% 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 flowId="oAo6XOMWRBc7Vn4Y9XNd" url="<https://app.arcade.software/share/oAo6XOMWRBc7Vn4Y9XNd>" %}

***

## Tutoriels

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Créer un bouton Exporter vers sur le Tableau de données</strong></td><td><a href="https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table">Create an Export To button on the Data Table</a></td></tr><tr><td><strong>Configuration du Tableau de données</strong></td><td><a href="https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/configuring-the-avonni-data-table">Configuring the Avonni Data Table</a></td></tr><tr><td><strong>Affichage de fichiers Salesforce CMS dans un Tableau de données</strong></td><td><a href="../tutoriels/composants/tableau-de-donnees/affichage-des-fichiers-salesforce-cms-dans-un-tableau-de-donnees">affichage-des-fichiers-salesforce-cms-dans-un-tableau-de-donnees</a></td></tr></tbody></table>

***

## Connectez votre Tableau de données aux données Salesforce

### 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.

<table><thead><tr><th>Type de source de données</th><th width="250.33333333333331">Description</th><th>Cas d’usage</th></tr></thead><tbody><tr><td><strong>Source de données manuelle</strong></td><td>Saisissez manuellement des données dans le tableau de données.</td><td>Idéal pour les données non dynamiques, les tests et les démonstrations.</td></tr><tr><td><strong>Requête</strong></td><td>Créez une requête pour renseigner automatiquement le tableau avec des données Salesforce.</td><td>Adapté aux jeux de données dynamiques, en temps réel et volumineux.</td></tr><tr><td><strong>Collection CMS</strong></td><td>Affichez sans effort vos collections CMS dans des tableaux de données pour des mises à jour dynamiques du contenu.</td><td>Créez automatiquement des listes de ressources ou des fils d’actualité mis à jour.</td></tr></tbody></table>

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3PwcU320If3fDaiBQLyt%2F2024-05-06_10-20-35.png?alt=media&#x26;token=fcf364f1-14a1-4421-ab0b-9b360c71ec68" alt=""><figcaption></figcaption></figure>

{% 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 %}

### Configuration des mappages de 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.

<details>

<summary>Partage du modèle de données avec le tableau de données Avonni</summary>

**Respect des règles de partage des données Salesforce :**

* **Respect des paramètres de l’organisation :** Les composants Avonni sont entièrement conformes aux configurations de partage des données et aux 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 de 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 des utilisateurs définis par votre organisation

</details>

#### Ajout de colonnes

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

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FE2cKSG6IyYXg6PT5EEU1%2F2023-12-10_20-56-54.png?alt=media&#x26;token=46cc7e51-eb28-4925-9842-50b3d91255bf" alt=""><figcaption></figcaption></figure>

* 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.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNlSXCo4bj0fPee0FFPtt%2F2023-12-10_20-58-01.png?alt=media&#x26;token=b0626d49-1d47-42be-a092-08baf64024ef" alt=""><figcaption></figcaption></figure>

#### Configuration des propriétés des colonnes

* **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éation de lien :** Activez la liaison des données de cellule à d’autres enregistrements ou URL pour une navigation rapide.
* **Attributs de cellule :** Personnalisez l’alignement des cellules et les icônes pour créer un tableau plus intuitif et visuellement attrayant.
* **Modifiable :** Déterminez 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 les données sensibles ou moins pertinentes.
* **Triable :** Permettez aux utilisateurs de 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é.
* **Retour à la ligne du texte :** Activez le retour à la ligne du texte pour une meilleure lisibilité dans les colonnes étroites.
* **Définir la largeur de la colonne :** Spécifiez la largeur de chaque colonne pour obtenir une mise en page équilibrée et organisée.

#### Ajout d’actions sur les lignes

Voici un tutoriel interactif guidé pour ajouter des actions sur les lignes au Tableau de données.

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

***

## Autres paramètres de configuration

### 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 rendu plus épuré et minimaliste.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FqSHMEKEbljIMwDFR7JQw%2F2023-12-10_21-00-20.png?alt=media&#x26;token=2a5788ad-e9d1-421c-a1a8-159567f6a6d4" alt=""><figcaption></figcaption></figure>

**Masquer les colonnes à cases à cocher**

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

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FBSnbhKLYW291nhWopETy%2F2023-12-10_21-01-29.png?alt=media&#x26;token=e156517b-4d21-4a1c-bbe3-3acc91e8f267" alt=""><figcaption></figcaption></figure>

**Afficher la colonne du numéro 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 sous-titre**

* Personnalisez l’en-tête avec un titre et un sous-titre 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 un accent visuel.

**Est fusionné**

* Ce paramètre détermine si l’en-tête se connecte visuellement au corps du tableau, ce qui affecte la conception globale.

**Actions de l’en-tête**

* Configurez des actions (ajouter, supprimer ou fonctions personnalisées) directement accessibles depuis l’en-tête du tableau.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FdlHeul0BOJuSLxlwxlrr%2F2023-12-05_08-55-05.png?alt=media&#x26;token=7569d3b6-f011-41fe-85cd-44eba513cced" alt=""><figcaption></figcaption></figure>

### 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 d’autres actions personnalisées, améliorant ainsi l’interaction utilisateur et l’efficacité.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FpflegSFq3ppt9e1bFJpT%2F2023-12-05_09-00-09.png?alt=media&#x26;token=33633798-ff4e-4812-8075-71ba4deafbed" alt=""><figcaption></figcaption></figure>

#### Configurer l’interaction sur le bouton

Configurez l’interaction lors de l’appui 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](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/naviguer) pour plus d’informations.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FP3G4hQaPYgAYh4qxlE6V%2F2023-12-10_21-05-18.png?alt=media&#x26;token=2617f41f-3045-4cf0-83e2-5ae3455deef4" alt=""><figcaption></figcaption></figure>

#### Tutoriel

{% content-ref url="<https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table>" %}
[Create an Export To button on the Data Table](https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table)
{% 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 l’affichage et la navigation des données dans les tableaux volumineux.

{% hint style="info" %}
En mode Requête, les données sont affichées par ensembles de 25 enregistrements afin de maintenir des performances optimales du site. Par conséquent, la mise en place de la pagination peut être utile.
{% endhint %}

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FTYV8JFlB7hI8aXbiio5z%2F2023-12-05_09-16-35.png?alt=media&#x26;token=fcd3ecdc-5c47-4ae2-8140-947a219bd9b9" alt=""><figcaption></figcaption></figure>

### Configuration du moteur de recherche

* **Espace réservé :** Définissez un texte d’espace réservé pour le champ de recherche afin d’indiquer aux utilisateurs ce qu’ils peuvent rechercher.
* **Position :** Choisissez la position du champ de recherche dans la mise en page du tableau pour une accessibilité optimale.
* **Valeur de recherche par défaut :** Pré-définissez une valeur de recherche pour filtrer les données du tableau au chargement.

{% hint style="info" %}
Pour afficher le champ de recherche, au moins une colonne doit être marquée comme « Recherchable ».
{% endhint %}

<div><figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNxORNYAA6GqNWdTGaNvL%2F2023-12-05_08-56-31.png?alt=media&#x26;token=4dcc78d0-e09b-4058-a130-da98a081cbe1" alt=""><figcaption></figcaption></figure> <figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FjwElPRwuNrGJbdSHAdZO%2F2023-12-05_08-57-12.png?alt=media&#x26;token=9145311c-b2b7-49f6-b82c-d1c721f9f77c" alt=""><figcaption><p>Au moins une colonne doit être définie sur « Recherchable » pour afficher le champ de recherche.</p></figcaption></figure></div>

## Paramètres

{% tabs %}
{% tab title="🎛️ Général" %}

| Nom                                                        | Description                                                                                       |
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| **Masquer l’en-tête du tableau**                           | Basculer pour masquer l’en-tête du tableau                                                        |
| **Masquer la colonne à cases à cocher**                    | Supprimer la colonne utilisée pour les cases à cocher de sélection des lignes                     |
| **Afficher la colonne du numéro de ligne**                 | Afficher une colonne indiquant le numéro de ligne                                                 |
| **Décalage du numéro de ligne**                            | Définir le numéro de départ pour la numérotation des lignes                                       |
| **Sélection maximale de lignes**                           | Limiter le nombre maximum de lignes pouvant être sélectionnées                                    |
| **Masquer la barre inférieure**                            | Masquer la barre inférieure, généralement utilisée pour les actions et l’affichage d’informations |
| **Afficher le nombre d’éléments sélectionnés**             | Afficher le nombre d’éléments actuellement sélectionnés                                           |
| **Lecture seule**                                          | Rendre le tableau non interactif, en interdisant toute modification ou sélection                  |
| **Autoriser l’édition sur toutes les colonnes**            | Activer l’édition pour toutes les colonnes                                                        |
| **Autoriser le filtrage sur toutes les colonnes**          | Activer les options de filtrage pour toutes les colonnes                                          |
| **Autoriser le retour à la ligne sur toutes les colonnes** | Autoriser le retour à la ligne du texte dans toutes les colonnes                                  |
| **Masquer les actions par défaut**                         | Masquer les actions prédéfinies comme modifier ou supprimer                                       |
| **Mode de largeur des colonnes**                           | Choisissez entre « fixe » ou « auto » pour le réglage de la largeur des colonnes                  |
| **Largeur max./min. de colonne**                           | Définir des limites maximales et minimales pour les largeurs de colonnes                          |
| **Nombre maximal de lignes pour le retour à la ligne**     | Définir le nombre maximal de lignes pour le retour à la ligne du texte dans les cellules          |
| **Redimensionnement de colonne désactivé**                 | Désactiver la possibilité de redimensionner les colonnes                                          |
| **Incrément de redimensionnement**                         | Définir l’incrément pour le redimensionnement des colonnes                                        |
| **Trié/Direction de tri par défaut**                       | Choisissez « asc » ou « desc » pour la direction de tri initiale                                  |
| **Afficher la valeur triée par**                           | Afficher quelle colonne est actuellement utilisée pour le tri                                     |
| **Titre/Sous-titre de l’en-tête**                          | Définir un titre et un sous-titre pour l’en-tête du tableau                                       |
| **Nom/Taille de l’icône de l’en-tête**                     | Ajouter une icône à l’en-tête avec une taille personnalisable                                     |
| **L’en-tête est fusionné**                                 | Choisir de connecter visuellement l’en-tête au corps du tableau                                   |
| **Masquer/Désactiver les actions de l’en-tête**            | Contrôler la visibilité et l’interactivité des actions de l’en-tête                               |
| **Boutons d’action visibles dans l’en-tête**               | Spécifier quels boutons d’action sont visibles dans l’en-tête                                     |
| **Actions de l’en-tête**                                   | Ajouter des actions personnalisées à l’en-tête du tableau                                         |
| {% endtab %}                                               |                                                                                                   |

{% tab title="⏩️ Pagination et recherche" %}

### Attributs de pagination

| Nom                            | Description                                      |
| ------------------------------ | ------------------------------------------------ |
| **Afficher la pagination**     | Basculer l’affichage des contrôles de pagination |
| **Nombre d’éléments par page** | Définir combien d’éléments afficher par page     |

### Options du conteneur de pastilles

* Afficher un conteneur pour les éléments sélectionnés, souvent utilisé avec la sélection de lignes.

### Options du moteur de recherche

| Nom                                | Description                                                  |
| ---------------------------------- | ------------------------------------------------------------ |
| **Espace réservé**                 | Définir le texte d’espace réservé pour le champ de recherche |
| **Position**                       | Définir la position de la barre de recherche                 |
| **Valeur de recherche par défaut** | Pré-remplir la barre de recherche avec une valeur par défaut |
| {% endtab %}                       |                                                              |

{% tab title="🗄️ Filtrage et source de données" %}

| Nom                     | Description                                                                                                                      |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| **Options de filtrage** | Configurer le filtrage pour l’afficher sous forme de popover pour chaque colonne.                                                |
| **Source de données**   | Sélectionnez entre « manuel » et « requête » pour renseigner les données du tableau.                                             |
| **Colonnes**            | Définissez et ajoutez des colonnes au tableau de données, en personnalisant les propriétés et le comportement de chaque colonne. |
| {% endtab %}            |                                                                                                                                  |

{% tab title="🎨 Style" %}

### En-tête

| Nom                                                 | Description                                                                                                        |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| **Couleur d’arrière-plan**                          | Définit la couleur de l’arrière-plan de l’en-tête.                                                                 |
| **Couleur de bordure**                              | Définit la couleur de la bordure de l’en-tête.                                                                     |
| **Taille de la bordure**                            | Ajuste l’épaisseur de la bordure.                                                                                  |
| **Style de bordure**                                | Sélectionne le style (plein, pointillé, tireté, etc.) de la bordure.                                               |
| **Rayon de bordure**                                | Arrondit les coins de l’en-tête.                                                                                   |
| **Couleur de la bordure inférieure (est fusionné)** | Spécifie la couleur de la bordure inférieure lorsque l’en-tête est visuellement fusionné avec le corps du tableau. |
| **Taille de la bordure inférieure (est fusionné)**  | Détermine l’épaisseur de la bordure inférieure fusionnée.                                                          |
| **Style de la bordure inférieure (est fusionné)**   | Définit le style de la bordure inférieure fusionnée.                                                               |
| **Marge intérieure et marge extérieure**            | Contrôle l’espacement intérieur (padding) et extérieur (margin) de l’en-tête.                                      |

### 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 l’épaisseur du texte du titre.                             |
| **Style de police**   | Applique un style spécifique (italique, normal) au texte du titre. |

### Sous-titre de l’en-tête

| Nom                   | Description                                  |
| --------------------- | -------------------------------------------- |
| **Couleur**           | Définit la couleur du texte du sous-titre.   |
| **Taille de police**  | Ajuste la taille du texte du sous-titre.     |
| **Graisse de police** | Contrôle l’épaisseur du texte du sous-titre. |
| **Style de police**   | Définit le style du texte du sous-titre.     |

### Icône d’en-tête

| Nom                                    | Description                                                          |
| -------------------------------------- | -------------------------------------------------------------------- |
| **Couleur d’arrière-plan**             | Définit la couleur d’arrière-plan de l’icône.                        |
| **Couleur de premier plan**            | Modifie la couleur de l’icône elle-même.                             |
| **Couleur utilitaire de premier plan** | Ajuste la couleur utilitaire pour le contraste ou la mise en valeur. |
| **Rayon de bordure**                   | Arrondit les coins de l’icône pour un aspect plus doux.              |

### Conteneur de pastilles

| Nom                                                | Description                                                                                        |
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| **Couleur d’arrière-plan des pastilles/au survol** | Définit la couleur d’arrière-plan des éléments de pastille, avec une couleur différente au survol. |
| **Couleur du texte des pastilles/au survol**       | Modifie la couleur du texte à l’intérieur de la pastille, avec une couleur différente au survol.   |
| **Hauteur de ligne des pastilles**                 | Ajuste la hauteur de ligne dans la pastille pour l’alignement du texte.                            |

### Avatar

| Nom                                              | Description                                                                                                                                                             |
| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Ajustement de l’objet de l’image de l’avatar** | Détermine comment l’image de l’avatar doit s’adapter à son conteneur. Les options incluent « remplir », « contenir », « couvrir », « aucun » et « réduire pour tenir ». |

### 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. |

### Pied de page

| Nom                        | Description                                        |
| -------------------------- | -------------------------------------------------- |
| **Couleur d’arrière-plan** | Définit la couleur d’arrière-plan du pied de page. |
| **Couleur de bordure**     | Définit la couleur de la bordure du pied de page.  |
| **Taille de la 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 %}               |                                                    |
| {% endtabs %}              |                                                    |

## Exemples de cas d’usage

### Exemple 1 : Liste de comptes enrichie et contacts associés

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

Offrez à vos partenaires un moyen puissant et intuitif d’explorer les données des comptes, avec recherche intégrée, filtrage et un panneau de contacts en direct qui se met à jour au fur et à mesure de leur navigation.

***

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

* **Liste de comptes recherchable et filtrable :** Permettez aux partenaires de trouver rapidement des comptes par nom ou secteur grâce aux contrôles de recherche et de filtre intégrés.
* **Enregistrements liés en ligne :** Rendez les noms des comptes cliquables afin que les partenaires puissent accéder directement aux pages de détail des enregistrements.
* **Panneau de contacts liés en direct :** Affichez un second tableau qui se met à jour automatiquement pour montrer les contacts rattaché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 la page de liste des comptes dans Experience Builder dispose déjà d’une mise en page à deux colonnes prête à accueillir les deux composants.

***

#### **Comment le configurer**

{% stepper %}
{% step %}

#### **Ajoutez le premier AX - Datatable à votre page**

* Faites glisser un composant AX - Datatable dans la colonne de gauche de votre page de liste des comptes dans Experience Builder.
  {% endstep %}

{% step %}

#### **Choisissez une source de données**

* Sélectionnez **Rechercher des 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éation de lien** sur la colonne Name afin que les noms des 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 API** sur `AccountsTable`.
* Définissez **Sélection maximale de lignes** sur `1` afin qu’un seul compte puisse être sélectionné à la fois.
* Activez la pagination et définissez le **Nombre maximal d’enregistrements** sur `10`.
  {% endstep %}

{% step %}

#### **Personnalisez l’en-tête**

* Définissez le **Titre de l’en-tête** sur `Comptes`.
* Définissez le **Icône d’en-tête** sur `standard:account_info`.
  {% endstep %}

{% step %}

#### **Ajoutez le deuxième AX - Datatable à votre page**

* Faites glisser 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 **Rechercher des contacts** comme source de données.
* Ajoutez un filtre pour que **AccountId** é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 : Name et Title.
  {% endstep %}

{% step %}

#### **Configurez le composant**

* Définissez le **Nom API** sur `relatedContactsTable`.
  {% endstep %}

{% step %}

#### **Personnalisez l’en-tête**

* Définissez le **Titre de l’en-tête** sur `Contacts associés`.
* Définissez le **Icône d’en-tête** sur `standard:contact`.
  {% endstep %}

{% step %}

#### **Prévisualisez votre page**

* Cliquez sur Aperçu dans Experience Builder, sélectionnez une ligne de compte et vérifiez que le tableau Contacts associés se met à jour dynamiquement pour refléter l’enregistrement sélectionné.
  {% endstep %}
  {% endstepper %}

***

#### **Liens**

{% content-ref url="../tutoriels/composants-reactifs/tableaux-de-donnees-lies" %}
[tableaux-de-donnees-lies](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/tutoriels/composants-reactifs/tableaux-de-donnees-lies)
{% endcontent-ref %}

***

### Exemple 2 : Opportunités liées sur une page de compte

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

Offrez aux utilisateurs commerciaux une vue d’ensemble de chaque opportunité liée à un compte, là où ils en ont besoin, sans jamais quitter la page d’enregistrement.

***

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

* **Vue client 360 plus riche :** Affichez les données clés des opportunités directement sur la page du compte afin que les utilisateurs commerciaux aient une vue complète en un seul endroit.
* **Pages d’enregistrement entièrement empilées :** Créez des pages denses et riches en informations qui évitent d’avoir à passer d’un onglet ou d’un objet à l’autre pour suivre un pipeline.

***

#### **Avant de commencer**

* **Page d’enregistrement de compte avec composants existants :** Assurez-vous que votre page d’enregistrement de compte dans Experience Builder inclut déjà les détails de l’enregistrement, une bannière et une mise en page en colonnes prêtes à accueillir le nouveau composant.

***

#### **Comment le configurer**

{% stepper %}
{% step %}

#### **Ajoutez le AX - Datatable à votre page de compte**

* Faites glisser un composant AX - Datatable sur votre page d’enregistrement de compte dans Experience Builder.
  {% endstep %}

{% step %}

#### **Choisissez une source de données**

* Sélectionnez **Rechercher des opportunités** comme source de données pour ce composant.
  {% endstep %}

{% step %}

#### **Définissez vos mappages de données**

* Ajoutez les colonnes suivantes : Name, Stage et Amount.
* Activez **Création de lien** sur la colonne Name afin que les noms des opportunités deviennent des liens cliquables.
  {% endstep %}

{% step %}

#### **Configurez le composant**

* Définissez le **Nom API** sur `RelatedOpportunities`.
* Ajoutez un filtre pour que **AccountId** é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** sur `Opportunités`.
* Définissez le **Style de l’en-tête** sur `Titre 2`.
* Définissez le **Icône d’en-tête** sur `standard:opportunity`.
  {% endstep %}

{% step %}

#### **Prévisualisez votre page**

* Cliquez sur Aperçu dans Experience Builder et accédez à un enregistrement de compte pour vérifier que seules les opportunités liées à ce compte apparaissent dans le tableau.
  {% endstep %}
  {% endstepper %}