Leitfaden zur Implementierung

Leitfaden zur Implementierung von Reaktivität in Avonni-Komponenten

Verwandeln Sie Ihre Avonni-Komponenten in ein dynamisches und interaktives Erlebnis mit unserem Leitfaden zur Einrichtung reaktiver Datenkomponenten. Dieses Tutorial führt Sie durch den Prozess und stellt sicher, dass Ihre Komponenten Daten anzeigen und in Echtzeit auf Benutzerinteraktionen reagieren.

Reaktiv-bereite Data Experience-Komponenten sind: die Datentabelle, Liste, Karte, Zeitachse und der Avonni-Textblock.

Schritt 1: Zuweisung von API-Namen zu Ihren Datenkomponenten

Beginnen Sie damit, jeder Ihrer Datenkomponenten einen eindeutigen Bezeichner zu geben, der als API-Name bekannt ist. Dieser Name dient als Referenzpunkt, der es verschiedenen Teilen Ihrer Seite ermöglicht, miteinander zu kommunizieren.

• Zum Beispiel:

  • Wenn Sie mit einer Datentabellen-Komponente arbeiten, können Sie sie benennen accountsDatatable.

Schritt 2: Konfigurieren reaktiver Ausdrücke in Zielkomponenten

Entscheiden Sie als Nächstes, wo die interaktiven Daten erscheinen sollen. Das kann in einem Textblock, einer anderen Datentabelle oder jeder Komponente sein, die Daten anzeigt. Hier verwenden Sie reaktive Ausdrücke, um der Komponente anzuweisen, welche Daten angezeigt werden sollen und wann im Filtermenü.

• Das Format reaktiver Ausdrücke: Verwenden Sie das Format {{componentApiName.selectedRecord.componentFieldApiName}} um Ihre Komponenten zu verknüpfen.

  • componentApiName: Hier geben Sie den API-Namen Ihrer Datenkomponente ein (wie den accountsDatatable den Sie oben benannt haben).

  • componentFieldApiName: Dies bezieht sich auf das spezifische Feld des Datensatzes, das Sie anzeigen möchten (zum Beispiel Name oder Branche).

• Zum Beispiel:

  • Um das Feld „Name“ eines aus Ihrer accountsDatatableausgewählten Datensatzes anzuzeigen, verwenden Sie {{accountsDatatable.selectedRecord.Name}}.

  • Um das Feld „Branche“ aus derselben Auswahl anzuzeigen, verwenden Sie {{accountsDatatable.selectedRecord.Industry}}.

Praktische Anwendungsfälle:

1. Interaktive Karten zur Kontovisualisierung:

   • Angenommen, Sie haben eine interaktive Karte mit dem Tag accountMap. Wenn ein Benutzer einen Standort auswählt, können Sie den Kontonamen in einem Textblock anzeigen, indem Sie einen Ausdruck wie {{accountMap.selectedRecord.Name}}verwenden. Dies stellt sicher, dass der Name des ausgewählten Kontos dynamisch basierend auf der Benutzerinteraktion angezeigt wird.

2. Synchronisierte Datentabellen für Konten und Kontakte:

   • Stellen Sie sich vor, Sie haben eine Tabelle, die Konten anzeigt (accountsDatatable) und eine andere, die zugehörige Kontakte anzeigt (contactsDatatable).

   • Sie können die contactsDatatable so konfigurieren, dass sie auf Auswahlen in der accountsDatatablereagiert. Um beispielsweise den Namen des Kontakts anzuzeigen, der mit dem ausgewählten Konto verknüpft ist, verwenden Sie {{accountsTable.selectedRecord.Id}}.

Diese Schritte verwandeln Ihre statischen Komponenten in ein reichhaltiges, reaktionsfähiges Erlebnis und machen Ihre Webanwendungen intuitiver und benutzerfreundlicher. Die Stärke reaktiver Daten liegt in ihrer Fähigkeit, jede Interaktion auf Ihrer Seite verbunden und zielgerichtet wirken zu lassen.

Viel Erfolg beim Bauen!