Relation maître-détail avec tableaux de données

Aperçu

Ce didacticiel montre comment créer un master-detail lien entre deux composants Avonni. Tableau de données Vous allez créer un composant où :

• Un Data Table (le « master ») affiche une liste de Comptes.

• Un second Data Table (le « détail ») affiche des Contacts liés au Compte actuellement sélectionné.

Configurer un filtre réactif sur la source de données du tableau détail est essentiel. Ce filtre se met à jour dynamiquement en fonction de la ligne sélectionnée dans le tableau master, garantissant que seuls les Contacts pertinents sont affichés. Cela crée une expérience utilisateur fluide et interactive.

Nous allons suivre ces étapes :

• Configurer le tableau des comptes, également appelé tableau master.

• Configurer le tableau des contacts, celui des détails.

• Créer le filtre réactif pour lier ces deux tableaux.

• Tester

Étapes guidées

1

Configurer le Data Table des Comptes (Mast

• Ajoutez un composant Avonni Data Table à votre page.

• Configurez sa source de données pour afficher une liste de Comptes (en utilisant une requête).

2

Configurer le Data Table des Contacts (Detail

• Ajoutez un autre composant Avonni Data Table à votre page.

• Configurez sa source de données pour afficher des Contacts (en utilisant le Avonni Query Data Source).

Astuce pratique

Vous pouvez utiliser un composant colonne pour afficher vos deux tableaux de données côte à côte.

3

Créer le filtre réactif

• Ajoutez une condition de filtre :

  • Champ : Sélectionnez le AccountId champ sur l'objet Contact (ou le champ reliant les Contacts aux Comptes).

  • Opérateur : Choisissez égal.

  • Valeur : N'entrez pas de valeur fixe. Référencez plutôt l'ID du Compte sélectionné :

    !AccountsTable.firstSelectedRow.Id

    • Explication :

      • !AccountsTable : Votre composant Data Table des Comptes (utilisez l'API nom).

      • .firstSelectedRow : La ligne actuellement sélectionnée dans le tableau des Comptes.

      • .Id : Le Id champ de cette ligne sélectionnée.

  • Assurez-vous d'utiliser les bons noms pour le composant et le champ.

4

Tester la réactivité

• Prévisualisez votre page.

• Sélectionnez différents Comptes dans le Data Table des Comptes. Le Data Table des Contacts devrait se mettre à jour automatiquement.