Verknüpfte Datentabellen

Tabellen synchron halten

Stellen Sie sich vor, Sie haben zwei Tabellen auf Ihrer Seite:

1. Konten-Tabelle: Diese Tabelle (accountsDatatable) listet alle Ihre Kundenkonten auf.

2. Kontakt-Tabelle: Diese Tabelle (contactsDatatable) listet alle Kontaktpersonen für Ihre Konten auf.

Das Ziel: Wenn Sie ein Konto in der Konten-Tabelle auswählen, soll sich die Kontakt-Tabelle automatisch aktualisieren und nur die Kontakte für jenes spezielle Konto anzeigen.

So setzen Sie es um

Die Konten-Tabelle

• Ziehen Sie die Avonni Data Table Komponente

• Stellen Sie sicher, dass Sie dieser Tabelle den API-Namen gegeben haben accountsDatatable.

• Konfigurieren Sie die Datenquelle mithilfe der Query Data Source

• Wählen Sie das Accounts-Objekt

• Konfigurieren Sie die Datenzuordnungen, um Spalten zu erstellen

Die Kontakt-Tabelle

• Auch diese Tabelle ist eingerichtet und zeigt alle Ihre Kontakte.

• Gehen Sie im Einstellungsbereich der Tabelle zum Abschnitt „Data Source“.

• Wählen Sie die Option „Query Data Source“.

• Wählen Sie das Objekt, das Ihre Kontaktinformationen enthält (z. B. „Contact“).

• Fügen Sie eine Filterbedingung hinzu:

  • Feld: Account Id (oder welches Feld auch immer Kontakte mit Konten verknüpft)

  • Operator: Gleich

  • Wert: {{accountsDatatable.selectedRecord.Id}}

    • Dieser Ausdruckscode sagt der Kontakt-Tabelle, nur Kontakte anzuzeigen, deren Account-ID mit der ID der ausgewählten Zeile in der Konten-Tabelle übereinstimmt.

• Erstellen Sie Spalten, indem Sie Felder hinzufügen.

Das Ergebnis

• Benutzer durchsuchen ihre Kontoliste in der Konten-Tabelle.

• Sie klicken auf ein Konto.

• Die Kontakt-Tabelle wird sofort aktualisiert und zeigt nur die Kontakte an, die mit dem ausgewählten Konto verknüpft sind.

Dies hält Ihre Tabellen synchron und sorgt für ein reibungsloses, intuitives Benutzererlebnis.