Implementierungsleitfaden

Leitfaden zur Implementierung von Reaktivität in Avonni-Komponenten

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

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

Schritt 1: Zuordnung von API-Namen zu Ihren Datenkomponenten

Beginnen Sie damit, jeder Ihrer Datenkomponenten eine eindeutige Kennung zu geben, die als API-Name bezeichnet wird. Dieser Name dient als Referenzpunkt und ermöglicht es verschiedenen Teilen Ihrer Seite, 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

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

• Das Format des reaktiven Ausdrucks: Verwenden Sie das Format {{componentApiName.selectedRecord.componentFieldApiName}} um Ihre Komponenten miteinander zu verknüpfen.

  • componentApiNameDies ist der Ort, an dem Sie den API-Namen Ihrer Datenkomponente eintragen (wie den accountsDatatable den Sie oben benannt haben).
  • componentFieldApiNameDies bezieht sich auf das spezifische Feld aus dem Datensatz, das Sie anzeigen möchten (z. B. Name oder Branche).
• Zum Beispiel:

  • Um das Feld 'Name' eines Datensatzes anzuzeigen, den Sie aus Ihrer accountsDatatable, 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 Visualisierung von Accounts:

   • 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}}. Dadurch wird sichergestellt, dass der Name des ausgewählten Accounts dynamisch entsprechend der Benutzerinteraktion angezeigt wird.
2. Synchronisierte Datentabellen für Accounts und Kontakte:

   • Stellen Sie sich vor, Sie haben eine Tabelle, die Accounts anzeigt (accountsDatatable) und eine weitere, die zugehörige Kontakte anzeigt (contactsDatatable).
   • Sie können die contactsDatatable so konfigurieren, dass sie auf Auswahlen in der accountsDatatablereagiert. Um beispielsweise den Kontaktnamen anzuzeigen, der mit dem ausgewählten Account verknüpft ist, verwenden Sie {{accountsTable.selectedRecord.Id}}.

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

Viel Spaß beim Entwickeln!