Master-Detail-Beziehung mit Datentabellen

Übersicht

Dieses Tutorial zeigt, wie man eine klassische Master-Detail- Beziehung zwischen zwei Avonni Datentabelle Komponenten erstellt. Sie bauen eine Komponente, bei der:

• Eine Data Table (der „Master“) eine Liste von Accounts anzeigt.

• Eine zweite Data Table (das „Detail“) Kontakte anzeigt die mit dem aktuell ausgewählten Account verknüpft sind.

Die Einrichtung eines reaktiven Filters für die Datenquelle der Detailtabelle ist entscheidend. Dieser Filter wird dynamisch basierend auf der im Master ausgewählten Zeile aktualisiert und stellt sicher, dass nur die relevanten Kontakte angezeigt werden. Dies schafft ein nahtloses und interaktives Benutzererlebnis.

Wir werden diesen Schritten folgen:

• Richten Sie die Account-Tabelle ein, auch Master-Tabelle genannt.

• Richten Sie die Kontakt-Tabelle ein, also die Detailtabelle.

• Erstellen Sie den reaktiven Filter, um diese beiden Tabellen zu verknüpfen.

• Test

Geführte Schritte

1

Richten Sie die Accounts Data Table ein (Mas

• Fügen Sie Ihrer Seite eine Avonni Data Table-Komponente hinzu.

• Konfigurieren Sie deren Datenquelle so, dass eine Liste von Accounts angezeigt wird (mithilfe einer Abfrage).

2

Richten Sie die Contacts Data Table ein (Deta

• Fügen Sie Ihrer Seite eine weitere Avonni Data Table-Komponente hinzu.

• Konfigurieren Sie deren Datenquelle so, dass Kontakte angezeigt werden (mithilfe des Avonni Query Data Source).

Praktischer Tipp

Sie können ein Spaltenkomponente verwenden, um Ihre beiden Datentabellen nebeneinander anzuzeigen.

3

Erstellen Sie den reaktiven Filter

• Fügen Sie eine Filterbedingung hinzu:

  • Feld: Wählen Sie die AccountId Feld im Contact-Objekt (oder das Feld, das Kontakte mit Accounts verknüpft).

  • Operator: Wählen gleich.

  • Wert: Geben Sie keinen festen Wert ein. Verweisen Sie stattdessen auf die ID des ausgewählten Accounts:

    !AccountsTable.firstSelectedRow.Id

    • Erklärung:

      • !AccountsTable: Ihre Accounts Data Table-Komponente (verwenden Sie den API- Namen).

      • .firstSelectedRow: Die aktuell ausgewählte Zeile in der Accounts-Tabelle.

      • .Id: Das Id Feld aus dieser ausgewählten Zeile.

  • Stellen Sie sicher, dass Sie die richtigen Namen für die Komponente und das Feld verwenden.

4

Testen Sie die Reaktivität

• Vorschau Ihrer Seite.

• Wählen Sie verschiedene Accounts in der Accounts Data Table aus. Die Contacts Data Table sollte sich automatisch aktualisieren.