Tables de données liées

Garder les tableaux synchronisés

Imaginez que vous avez deux tableaux sur votre page :

1. Tableau des comptes : Ce tableau (accountsDatatable) répertorie tous vos comptes clients.

2. Tableau des contacts : Ce tableau (contactsDatatable) répertorie toutes les personnes de contact pour 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.

Comment le réaliser

Le tableau des comptes

• Faites glisser le composant Avonni Data Table

• 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 Query Data Source

• 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 dans la section "Data Source" des 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 le champ qui relie les contacts aux comptes)

  • Opérateur : Égal à

  • 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 tableaux synchronisés et offre une expérience utilisateur fluide et intuitive.