Reaktive Karte und Datentabelle

Übersicht

Dieses Beispiel zeigt einen alltäglichen Anwendungsfall für reaktive Komponenten: das Verbinden einer Avonni Datentabelle und einer Avonni Karte um eine interaktive Visualisierung zu erstellen. Sie werden sehen, wie die Auswahl eines Datensatzes in der Datentabelle die automatisch Karte aktualisieren kann, um den entsprechenden Standort anzuzeigen.

Was wir bauen werden

Wir erstellen eine einfache Komponente mit zwei Hauptelementen:

• Daten-Tabelle: Zeigt eine Liste von Accounts an.

• Karte: Zeigt den Standort des aktuell ausgewählten Accounts aus der Datentabelle an.

So funktioniert es

Der Schlüssel zu dieser Interaktion ist ein reaktiven Filter auf der Datenquelle der Kartenkomponente:

1. Daten-Tabelle: Die Datentabelle ist mit einer Datenquelle konfiguriert (z. B. einer Abfrage), die Account-Datensätze abruft, einschließlich Adress-/Standortinformationen (z. B. Billing Street, Billing City, Billing State/Province, Billing Zip/Postal Code, Billing Country).

2. Benutzerauswahl: Der Benutzer wählt einen Account in der Datentabelle aus.

3. firstSelectedRow Aktualisierung: Die firstSelectedRow Eigenschaft der Datentabelle spiegelt automatisch den neu ausgewählten Account wider.

4. Reaktiver Filter: Die Datenquelle der Kartenkomponente ist mit einem Filter konfiguriert, der auf die firstSelectedRow.Id Eigenschaft der Datentabelle verweist. Dies ist die reaktive Verbindung.

5. Automatische Kartenaktualisierung: Aufgrund des reaktiven Filters, wenn firstSelectedRow sich ändert, fragt die Datenquelle der Karte Salesforce erneut ab, ruft die Standortdaten für den neu ausgewählten Account ab und aktualisiert die Kartenanzeige automatisch.

Dies schafft eine nahtlose Benutzererfahrung, bei der die Auswahl eines Accounts die Karte sofort aktualisiert, um dessen Standort anzuzeigen.

---

Geführte Schritte

Um eine reaktive Verbindung zwischen einer Datentabelle und einer Karte herzustellen, gehen Sie wie folgt vor:

1

Bereiten Sie das Layout vor

Zweispaltiges Layout: Fügen Sie Ihrer dynamischen Komponente ein zweispaltiges Layout-Element hinzu. Dadurch können Sie die Datentabelle und die Karte nebeneinander platzieren.

2

Hinzufügen und Konfigurieren der Datentabelle (Master)

• Datentabelle hinzufügen: Ziehen Sie eine Avonni-Datentabelle in die links Spalte Ihres Layouts.

• Datenquelle konfigurieren:

  • Klicken Sie auf die Datentabellenkomponente, um ihr Eigenschaftsfenster zu öffnen.

  • Wählen Sie Avonni Query Data Source als Datentyp der Datenquelle.

  • Klicken Sie im App Builder auf Erstellen Sie eine Abfrage, oder wählen Sie eine vorhandene Abfrage aus.

  • Objekt: Wählen Sie Konto.

  • Filter (optional): Fügen Sie alle static Filter hinzu, die Sie benötigen (z. B. um nur Accounts eines bestimmten Typs anzuzeigen). Tun Sie nicht fügen Sie hier den reaktiven Filter hinzu.

  • Fügen Sie über den Abschnitt "Spalten" im Eigenschaftsfenster Spalten zu Ihrer Datentabelle hinzu. Klicken Sie für jede Spalte auf "Spalte hinzufügen", wählen Sie ein "Quellfeld" und konfigurieren Sie alle weiteren gewünschten Einstellungen (Bezeichnung, editierbar usw.).

• Zeilenauswahl begrenzen:

  • Finden Sie in den Eigenschaften der Datentabelle die Einstellung für Maximale Zeilenauswahl (oder ähnliches).

  • Stellen Sie sie auf 1. Dadurch wird sichergestellt, dass immer nur ein Account ausgewählt werden kann, was für unsere reaktive Karte erforderlich ist.

3

Hinzufügen und Konfigurieren der Karte (Detail)

• Karte hinzufügen: Ziehen Sie eine Avonni-Kartenkomponente in die rechts Spalte Ihres Layouts.

• Datenquelle konfigurieren:

  • Klicken Sie auf die Karte, um die Eigenschaften zu öffnen.

  • Wählen Sie Avonni Query Data Source.

  • Objekt: Wählen Sie Konto.

• Erstellen Sie den reaktiven Filter:

  • Öffnen Sie den Filter-Editor für die Abfrage-Datenquelle der Karte.

  • Fügen Sie eine Filterbedingung hinzu:

    • Feld: Wählen Sie die Id Feld (oder das Feld, das Accounts eindeutig identifiziert).

    • Operator: Wählen gleich.

    • Wert: Verwenden Sie direkter Attributreferenzierung um es mit der ausgewählten Zeile in der Datentabelle zu verknüpfen:

      !AccountsTable.firstSelectedRow.Id

      (Ersetzen Sie AccountsTable durch den tatsächlichen Namen Ihres Datentabellenkomponenten).

• Kartenspeicherort-Felder auswählen

  • Wählen Sie in den Karten-Eigenschaften das Feld aus, das den Standortfeldern entspricht.

  • Kartenspeicherort-Felder konfigurieren: Suchen Sie in den Eigenschaften der Kartenkomponente den Abschnitt zur Konfiguration der Standortdaten (er könnte "Location", "Map Settings" oder ähnlich bezeichnet sein). Sie müssen der Kartenkomponente mitteilen, welche Felder in Ihrer Datenquelle die Adresse oder Koordinaten enthalten. Zum Beispiel könnten Sie zuordnen:

    • BillingStreet zum Feld "Street" in den Karteneinstellungen.

    • BillingCity zum Feld "City".

    • BillingState zum Feld "State/Province".

    • BillingPostalCode zum Feld "Zip/Postal Code".

    • BillingCountry zum Feld "Country".

    Wählen Sie die richtigen Felder aus Ihrer Datenquelle aus, die den einzelnen Teilen der Adresse entsprechen. Wenn Sie Breiten-/Längengrad verwenden,zuordnen Sie diese Felder entsprechend.

4

Testen Sie die Reaktivität

• Vorschau: Vorschau Ihrer dynamischen Komponente.

• Einen Account auswählen: Klicken Sie auf eine Zeile in der Datentabelle.

• Beobachten Sie die Karte: Die Karte sollte sich automatisch aktualisieren, um den Standort des ausgewählten Accounts anzuzeigen