Tables de données liées

Synchroniser les tables

Imaginez que vous ayez deux tables sur votre page :

1. Tableau des comptes : Cette table (accountsDatatable) répertorie tous vos comptes clients.
2. Tableau des contacts : Cette table (contactsDatatable) répertorie toutes les personnes de contact associées à vos comptes.

L’objectif : Lorsque vous sélectionnez un compte dans le tableau des comptes, vous souhaitez que le tableau des contacts se mette automatiquement à jour et n’affiche que les contacts pour ce compte précis .

Comment le mettre en place

Le tableau des comptes

• Faites glisser le composant de tableau de données Avonni
• Assurez-vous d’avoir donné à ce tableau le nom d’API accountsDatatable.
• Configurez la source de données en utilisant la source de données de requête
• Sélectionnez l’objet Accounts
• Configurez les mappages de données pour créer des colonnes

Le tableau des contacts

• Ce tableau est également configuré et affiche tous vos contacts.
• Allez à la section « Data Source » dans les paramètres du tableau.
• Choisissez l’option « Query Data Source ».
• Sélectionnez l’objet qui contient vos informations de contact (par ex. « Contact »).
• Ajoutez une condition de filtre :

  • Champ : ID du compte (ou quel que soit le champ qui relie les contacts aux comptes)
  • Opérateur : Égale à
  • Valeur : {{accountsDatatable.selectedRecord.Id}}

    • Ce code d’expression indique au tableau des contacts d’afficher uniquement les contacts dont l’ID de compte correspond à l’ID de la ligne sélectionnée dans le tableau des comptes.
• Créez des colonnes en ajoutant des champs.

Le résultat

• Les utilisateurs parcourent leur liste de comptes dans le tableau des comptes.
• Ils cliquent sur un compte.
• Le tableau des contacts se met instantanément à jour pour n’afficher que les contacts associés à ce compte choisi.

Cela maintient vos tables synchronisées et offre une expérience utilisateur fluide et intuitive.