Erstellen Sie dynamische gefilterte Kartenanzeigen

  • Freigeben Version: Zurich
  • Aktualisiert 30. September 2025
  • 12 Minuten Lesedauer

    • Erstellen Sie ein interaktives Kartenlayout, um Datensätze anzuzeigen, fügen Sie eine Dropdown-Liste hinzu, um sichtbare Karten nach Namen zu filtern, und konfigurieren Sie jede Karte, um den vollständigen Datensatz in einer anderen zu öffnen UI BuilderSeite, wenn ausgewählt.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Dieses Beispiel zeigt, wie Daten an Komponenten gebunden werden, damit Sie Datensatzinformationen in anwenderdefinierten Layouts anzeigen können. Sie können beispielsweise Datensätze als auswählbare Karten anstatt in einer herkömmlichen Listenansicht darstellen. Für dieses Verfahren stammen die Daten aus der Incident-Tabelle.

    Abbildung : 1. Vorschau des endgültigen Layouts
    UI Builder Phase mit nummerierten Beschriftungen für einzelne Komponenten.
    1. Dropdownliste : Filtert sichtbare Karten nach Anrufername.
    2. Kartenbasiscontainer : Enthält einzelne Karteninhalte und aktiviert die Klickinteraktion.
    3. Überschrift : Zeigt die Datensatznummer an.
    4. Bezeichnungswert : Zeigt den Anrufernamen mit einer statischen Bezeichnung an ("Anrufer: ").
    5. Stilisierter Text : Zeigt die Kurzbeschreibung des Datensatzes an.
    6. Hervorgehobener Wert : Zeigt die Datensatzprioritätsebene mit Farbstilen an, die über ein Skript angewendet werden.
    Dieses Verfahren verwendet UI BuilderKomponenten zum Erstellen dynamischer, interaktiver Layouts. Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter:
    Tabelle : 1. In diesem Verfahren verwendete Komponenten
    Komponente Dokumentationslinks
    Kartenbasiscontainer
    Dropdown
    Überschrift
    Hervorgehobener Wert
    Bezeichnungswert
    Stilisierter Text

    Prozedur

    Teil 1: Erstellen Sie das Kartenlayout

    Fügen Sie einen Repeater hinzu, der mit einer Datenressource verknüpft ist, und erstellen Sie die Kartencontainer, die jeden Datensatz anzeigen.

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, in der Sie arbeiten können, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Siehe Konfigurieren Sie, wie Anwender mit Ihren Anwendungen in interagieren UI BuilderWeitere Informationen zum Erstellen von Experiences.
    3. Erstellen Sie eine Seite von Grund auf neu.
      Weitere Informationen zum Erstellen einer Seite finden Sie unter Erstellen Sie eine Seite in UI Builder .
    4. Erstellen Sie eine Datenressource, um Datensätze aus der Incident-Tabelle abzurufen.

      Datenressourcen stellen Daten aus Tabellen und Datensätzen für die Seite bereit. In diesem Beispiel fügen wir eine Datenressource hinzu, um Datensätze aus der Incident-Tabelle abzurufen, damit wir sie mit Komponenten anzeigen können. Weitere Informationen finden Sie unter Fügen Sie einer Seite Datenressourcen hinzu, und konfigurieren Sie sie.

      1. In Daten und Skripts Schublade, unter Datenressourcen , Auswählen + Datenressource hinzufügen .
      2. Wählen Sie Aus Suchen Sie nach mehreren Datensätzen Und wählen Sie dann aus Hinzufügen .
      3. Wählen Sie aus Suchen_mehrere_Datensätze_1 ID zum Öffnen von Details der Datenressource Formular.
      4. Ersetzen Sie den Text in Bezeichnung der Datenressource Feld mit Incident-Suche .
        Die Datenressourcen-ID Feld wird automatisch ausgefüllt.
      5. Wählen Sie Übernehmen.
      6. In Bearbeiten Sie die Incident-Suche Dialogfeld, füllen Sie die Felder aus:
        Feld Aktion
        Tabelle Eingabetaste Incident , Und wählen Sie es dann aus der Liste aus.
        Rückgabefelder
        1. Wählen Sie Aus + Hinzufügen .
        2. Eingabetaste Anrufer , Wählen Sie es aus, um es zu hinzuzufügen Ausgewählt Spalte, löschen Sie dann das Suchfeld.
        3. Wiederholen Sie den obigen Schritt für Priorität Und Kurzbeschreibung .
          Wählen Sie das Modal „Felder“ aus, das Anrufer, Priorität und Kurzbeschreibung anzeigt.
        4. Wählen Sie Übernehmen.
        Max. Ergebnisse Eingabetaste 25 .

        Dialogfeld „Datenressource bearbeiten“ für „Incident-Suche“ mit Beschreibungen, die die Felder „Tabelle“, „Rückgabefelder“ und „Max. Ergebnisse“ hervorheben.

      7. Wählen Sie aus X Oben rechts, um das Dialogfeld zu schließen.
      8. Wählen Sie Speichern.
    5. Fügen Sie ein einspaltiges Layout hinzu, um die Komponenten zu enthalten.
      1. In der Inhaltsstruktur unter Textkörper , Auswählen + Inhalt hinzufügen .
      2. Wählen Sie Aus Einzelne Spalte Und wählen Sie dann aus + Hinzufügen .
      3. Mit Spalte 1 In der Inhaltsstruktur ausgewählt, navigieren Sie zu Layout Legen Sie im Konfigurationsbereich fest, und legen Sie fest Richtung Bis Zeile .
        Konfigurationsbereich für einspaltiges Layout, wobei der Cursor auf die Eigenschaft „Richtung > Zeile“ zeigt.
    6. Fügen Sie einen Repeater auf Ihrer Seite mit Datenbindung hinzu, und konfigurieren Sie ihn.

      Die Datenbindung ist der Prozess der Zuordnung von Daten, die von einer Datenressource exponiert werden, einer Komponente. In diesem Beispiel binden wir die Ergebnisse von Incident-Suche Datenressource zu Daten-Array Eigenschaft der Repeater-Komponente. Weitere Informationen finden Sie unter Verbinden Sie Datenkomponenten.

      1. In der Inhaltsstruktur unter Spalte 1 , Auswählen + Inhalt hinzufügen .
      2. Eingabetaste Repeater , Wählen Sie es dann in der Toolbox aus, und wählen Sie dann aus Hinzufügen .
      3. Wählen Sie Aus Abbrechen Zum Schließen des voreingestellten Fensters.
      4. Wird Beibehalten Repeater 1 Ausgewählt, bewegen Sie den Mauszeiger im Konfigurationsbereich über Daten-Array Feld und wählen Sie das Symbol „Daten binden“ aus .
        Konfigurationsbereich für Repeater, wobei der Cursor auf das Symbol „Daten binden“ zeigt.
      5. In Binden Sie Daten an das Daten-Array Dialogfeld, unter Datentypen , Auswählen Datenressource .
      6. Wählen Sie aus Incident-Suche Pille, doppelklicken oder ziehen Sie dann Ergebnisse Pille, um sie in den Bereich darüber zu verschieben.
        Abbildung : 2. Binden Sie Daten an das Daten-Array
        Modal für Datenbindung, das die Auswahl von Datenressourcenpillen zum Konfigurieren des Repeaters anzeigt.
      7. Wählen Sie Aus Anwenden Zum Bestätigen der Bindung.
      8. Wählen Sie im Konfigurationsbereich aus Stile Registerkarte auswählen Stile aktivieren , Füllen Sie dann die Felder aus:
        Feld Wert
        Typ Raster
        Spalten 4
        Abstand S
      9. Wählen Sie Speichern.
    7. Erstellen Sie die Kartenanzeige.
      1. In der Inhaltsstruktur unter Repeater 1 , Auswählen + Inhalt hinzufügen .
      2. Eingabetaste Kartenbasiscontainer , Wählen Sie die Komponente aus, und wählen Sie dann aus + Hinzufügen .
      3. Wählen Sie im Konfigurationsbereich aus Konfigurieren Registerkarte und legen Sie fest Interaktion Bis Klicken Sie Auf .
      4. Wählen Sie im Konfigurationsbereich aus Stile Registerkarte und legen Sie fest Breite Bis 300 px.
      5. Legen Sie fest Höhe Bis 200 px.
        Konfigurationsbereich für Kartenbasiscontainer, in dem die Felder „Breite“ und „Höhe“ hervorgehoben werden.
    Teil 2: Fügen Sie Komponenten hinzu, und binden Sie Daten

    Fügen Sie jeder Karte Komponenten hinzu, und konfigurieren Sie sie so, dass Datensatzdetails angezeigt werden, indem Sie die entsprechenden Felder binden.

    1. Fügen Sie dem Kartenbasiscontainer Komponenten hinzu.
      1. In der Inhaltsstruktur unter Kartenbasiscontainer 1 , Auswählen + Inhalt hinzufügen .
      2. Fügen Sie die folgenden Komponenten in der unten aufgeführten Reihenfolge hinzu, und bearbeiten Sie sie im Konfigurationsbereich:
        Tipp:
        Um alle Komponenten in verschachtelt zu lassen Kartenbasiscontainer , Fügen Sie die erste Komponente hinzu, und verwenden Sie dann Hinzufügen nach Über das Symbol „Konfigurieren“ Für jeden folgenden.

        Wenn ein voreingestelltes Fenster angezeigt wird, wählen Sie aus Abbrechen Um es zu schließen.

        1. Überschrift: Keine Anfangskonfiguration erforderlich
        2. Bezeichnungswert: In Konfigurieren Registerkarte, in Bezeichnung Feld eingeben Anrufer:
        3. Stilisierter Text: In Konfigurieren Registerkarte, legen Sie fest HTML-Tag Bis Absatz
        4. Hervorgehobener Wert: In Stile Registerkarte, legen Sie fest Breite Bis 100 px
        UI Builder Editor mit Callouts, die den Repeater und seine geschachtelten Komponenten in der Inhaltsstruktur hervorheben.
      3. Wählen Sie Speichern.
    2. Binden Sie Daten aus den Incident-Datensätzen an die Komponenten, die wir im vorherigen Schritt hinzugefügt haben.
      Komponente Feld Pfad
      Überschrift Bezeichnung Wert > Zahl > Anzeigewert
      Bezeichnungswert Wert Wert > caller_ID > Anzeigewert
      Stilisierter Text Text Wert > short_description > DisplayValue
      Hervorgehobener Wert Bezeichnung Wert > Priorität > Anzeigewert
      1. Wählen Sie in der Inhaltsstruktur die in der Tabelle aufgeführte Komponente aus.
      2. Bewegen Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren den Mauszeiger über das angegebene Feld, und wählen Sie das Symbol „Daten binden“ aus .
      3. Im modalen Dialogfeld „Datenbindung“:
        • Wählen Sie auf der linken Seite aus Repeater Unter Datentypen .
        • Rechts unter Pillenansicht , Folgen Sie dem in der Tabelle aufgeführten Pfad, indem Sie jede Pille in der Reihenfolge auswählen (z. B. für Überschrift wählen Sie aus Wert , Dann Nummer , Dann Anzeigewert ).
      4. Wenn Sie die endgültige Pille erreichen ( Anzeigewert ), doppelklicken oder ziehen Sie sie, um sie in den Bereich darüber zu verschieben, und wählen Sie dann aus Anwenden .
      5. Wiederholen Sie den Prozess für jede Zeile in der Tabelle.
        UI Builder Editor, der datengebundene Werte auf jeder Karte anzeigt.
      6. Wählen Sie Speichern.
    3. Verwenden Sie ein Skript, um die Farbe der Priorität für jeden Datensatz zu definieren.
      1. Wählen Sie in der Inhaltsstruktur aus Hervorgehobener Wert 1 .
      2. Bewegen Sie den Mauszeiger im Konfigurationsbereich auf der Registerkarte Konfigurieren Farbe Und wählen Sie das Symbol „Daten binden“ aus .
      3. Wählen Sie aus Skript verwenden Symbol Oben rechts.
      4. Ersetzen Sie den vorhandenen Code durch Folgendes: 
        function getPriorityColor(record) {
    let priority = record.api.item.value.priority.value;

    switch (priority) {
        case '1':
            return 'critical';
        case '2':
            return 'high';
        case '3':
            return 'moderate';
        case '4':
            return 'low';
        case '5':
            return 'gray';
        default:
            return 'gray';
    }
}
      5. Wählen Sie Übernehmen.

      Stellen Sie sicher, dass sich die Farbe des hervorgehobenen Werts abhängig von der Priorität des Datensatzes ändert.

      UI Builder Editor, der je nach Datensatzpriorität den hervorgehobenen Wert in einer anderen Farbe anzeigt.
    Teil 3: Fügen Sie Filterung mit Dropdownliste hinzu

    Konfigurieren Sie ein Dropdown-Ereignis, um einen Client-Statusparameter zu aktualisieren und die Datenressource zu aktualisieren, um die Kartenanzeige zu filtern.

    1. Erstellen Sie einen Client-Statusparameter, um die Anwenderauswahl nachzuverfolgen.
      Der Client-Statusparameter kann von Komponenten geändert werden, wenn sie Ereignisse auslösen. Weitere Informationen finden Sie unter Statusparameter für Clients.
      1. In Daten und Skripts Schublade, neben Client-Statusparameter , Wählen Sie aus + Symbol.
      2. In Bearbeiten Sie Client-Statusparameter Dialogfeld, füllen Sie die Felder aus:
        • Name: Selected_caller
        • Typ: Zeichenfolge
        • Anfangswert: Leer
      3. Wählen Sie Aus Anwenden.
    2. Bearbeiten Sie die Datenressource, um den Client-Statusparameter als bedingten Wert zu verwenden.
      1. In Daten und Skripts Drawer, wählen Sie aus Incident-Suche Datenressource.
      2. Wählen Sie Aus Bearbeiten Sie Bedingungen .
        Dialogfeld „Incident-Suche bearbeiten“ mit Hervorhebung über der Schaltfläche „Bedingungen bearbeiten“.
      3. In Bedingungen Dialogfeld, Eingabetaste Anrufer Im ersten Feld und wählen Sie es aus der Liste aus.
      4. Lassen Sie das zweite Feld unverändert.
      5. Bewegen Sie den Mauszeiger über das dritte Feld, und wählen Sie das Symbol „Daten binden“ aus .
      6. Wählen Sie im modalen Dialogfeld „Datenbindung“ aus clientstatus , Doppelklicken oder ziehen Sie dann Selected_caller Pille, um sie in den Bereich darüber zu verschieben.
      7. Wählen Sie Aus Anwenden Zum Bestätigen der Bindung.
      8. Wählen Sie Aus Anwenden Zum Speichern der Bedingung.
        Modal „Bedingungen“, das die Bedingung anzeigt. „Anrufer“ ist „selected_caller“.
      9. Wählen Sie aus X Oben rechts, um zu schließen Incident-Suche Dialogfeld.
    3. Erstellen Sie eine zweite Datenressource, um Anwender aus der Anwendertabelle abzufragen.
      1. In Daten und Skripts Drawer, wählen Sie aus + , Und wählen Sie dann aus Datenressource .
      2. Wählen Sie Aus Suchen Sie nach mehreren Datensätzen Und wählen Sie dann aus Hinzufügen .
      3. Wählen Sie aus Suchen_mehrere_Datensätze_1 ID zum Öffnen von Details der Datenressource Formular.
        Dialogfeld „Datenressource bearbeiten“ mit Hervorhebung über den Bezeichnungs- und ID-Feldern.
      4. Ersetzen Sie den Text in Bezeichnung der Datenressource Feld mit sys_user_Lookup .
        Die Datenressourcen-ID Feld wird automatisch ausgefüllt.
      5. Wählen Sie Übernehmen.
      6. In Bearbeiten Sie sys_user_Lookup Dialogfeld, füllen Sie die Felder aus:
        Feld Aktion
        Tabelle Eingabetaste Anwender (sys_user) Und wählen Sie es dann aus der Liste aus.
        Rückgabefelder
        1. Wählen Sie Aus + Hinzufügen .
        2. Eingabetaste Name , Wählen Sie es dann aus der Liste aus, um es zu hinzuzufügen Ausgewählt Spalte.
        3. Wählen Sie Übernehmen.
        Anordnen nach Eingabetaste Name , Und wählen Sie es dann aus der Liste aus.
        Max. Ergebnisse Eingabetaste 250 .
      7. Wählen Sie aus X Oben rechts, um das Dialogfeld zu schließen.
      8. Wählen Sie Speichern.
      Diese Datenressource sucht Anwender aus der Anwendertabelle. Wir verweisen auf diese Daten, um die Dropdownliste im nächsten Schritt auszufüllen.
    4. Fügen Sie eine Dropdown-Komponente hinzu, und konfigurieren Sie sie.
      1. Bewegen Sie den Mauszeiger in der Inhaltsstruktur darüber Spaltenlayout 1 Und wählen Sie aus Konfigurieren Symbol .
      2. Wählen Sie Aus Hinzufügen vor .
      3. Suchen Sie nach Dropdownliste , Wählen Sie es in der Toolbox aus, und wählen Sie dann aus Hinzufügen .
      4. Navigieren Sie im Konfigurationsbereich zur angegebenen Registerkarte, und konfigurieren Sie die folgenden Felder:
        Registerkarte Aktion
        Konfigurieren In Platzhaltertext Feld: Eingabetaste Wählen Sie einen Anrufer aus .
        Konfigurieren In Variante Feld: Auswählen Primär .
        Konfigurieren In Listenelemente Feld:
        1. Bewegen Sie den Mauszeiger über das Feld, und wählen Sie das Symbol „Daten binden“ aus .
        2. Wählen Sie im modalen Dialogfeld „Datenbindung“ aus Skript verwenden Symbol .
        3. Ersetzen Sie den vorhandenen Code durch Folgendes:
          Tipp:
          Sie können das Formatcode-Symbol auswählen Um den Code lesbarer zu machen.
          function evaluateProperty({ api, helpers }) {
    const userArray = api.data.sys_user_lookup.results;

    let outputArray = [];

    for (let i = 0; i < userArray.length; i++) {
        const obj = {
            'id': `${userArray[i]._row_data.uniqueValue}`,
            'label': `${userArray[i].name.displayValue}`
        };
        outputArray.push(obj);
    }

    return outputArray;
}
        4. Wählen Sie Übernehmen.
        Stile Breite: Eingabetaste 200 .
        Stile Auffüllung: Auswählen Auffüllung , Und wählen Sie dann aus M Aus der Liste.
    5. Konfigurieren Sie die Dropdownliste mit Ereignissen, damit der von uns erstellte Client-Statusparameter geändert werden kann.
      1. Mit Dropdownliste 1 Wählen Sie in der Inhaltsstruktur ausgewählt aus Ereignisse Registerkarte im Konfigurationsbereich, und wählen Sie dann aus Fügen Sie eine Ereigniszuordnung hinzu .
      2. Wählen Sie aus Ausgewählte Elemente geändert Ereignis, und wählen Sie dann aus Fahren Sie Fort .
      3. Wählen Sie aus Legen Sie den Client-Statusparameter fest Handler, und wählen Sie dann aus Fahren Sie Fort .
      4. Setzen Sie die folgenden Eigenschaften:
        Feld Aktion
        Name des Statusparameters für Clients Wählen Sie Aus Selected_caller Aus der Liste.
        Wert, der nach dem Auslösen des Ereignisses verwendet werden soll
        1. Bewegen Sie den Mauszeiger über das Feld, und wählen Sie das Symbol „Daten binden“ aus .
        2. Unter Pillenansicht , Doppelklicken oder ziehen Sie Wert Pille, um sie in den Bereich darüber zu verschieben.
        3. Wählen Sie Aus Anwenden Zum Bestätigen der Bindung.
        4. Wählen Sie Hinzufügen.
      5. In Ereignisse Wählen Sie im Konfigurationsbereich die Registerkarte aus Handler hinzufügen Unter dem Ereignis, das wir im vorherigen Schritt hinzugefügt haben.
      6. Suchen Incident-Suche (1) , Wählen Sie aus AKTUALISIEREN Handler, und wählen Sie dann aus Fahren Sie Fort .
        Modal „Ereignisse“ mit ausgewähltem Handler „Incident-Suche – AKTUALISIEREN“.
      7. Wählen Sie Hinzufügen.
      8. Wählen Sie Speichern.
      Nachdem Sie die Dropdown-Liste konfiguriert haben, wird durch Auswahl eines Anrufers aktualisiert Selected_caller Client-Statusparameter und aktualisiert die Datenressource, um die Datensätze dieses Anrufers anzuzeigen.
    Teil 4: Datensatznavigation aktivieren

    Konfigurieren Sie jede Karte so, dass die Datensatzseite mithilfe der sys_ID aus den Repeater-Daten geöffnet wird.

    1. Erstellen Sie eine weitere Seite in Ihrer Experience, die den Datensatz öffnet.
      1. Kehren Sie zur Experience-Ansicht zurück, indem Sie oben links den Namen Ihrer Experience (z. B. „Demo-Experience“) auswählen.
      2. Wählen Sie aus + Neben Seiten , Und wählen Sie dann aus Erstellen Sie eine neue Seite .
      3. Bewegen Sie den Mauszeiger über Standarddatensatz Vorlage und auswählen Vorlage verwenden .
      4. Benennen Sie Ihre Seite Incident-Datensatzseite Und wählen Sie aus Fahren Sie Fort .
      5. Wählen Sie Aus Sieht Gut Aus , Und wählen Sie dann aus Erstellen .
    2. Kehren Sie zu Ihrer ursprünglichen Seite zurück, indem Sie oben links den Namen Ihrer Experience auswählen und dann Ihre Seite aus der Experience-Ansicht auswählen.
    3. Fügen Sie den Karten ein Ereignis hinzu, damit durch die Auswahl einer Karte der Datensatz auf der von uns erstellten Seite geöffnet wird.
      1. Wählen Sie Aus Kartenbasiscontainer 1 In der Inhaltsstruktur.
      2. Wählen Sie im Konfigurationsbereich aus Ereignisse Registerkarte, und wählen Sie dann aus Fügen Sie eine Ereigniszuordnung hinzu .
      3. Wählen Sie aus Karte angeklickt Ereignis, und wählen Sie dann aus Fahren Sie Fort .
      4. Wählen Sie aus Öffnen Sie die Seite oder URL Handler, und wählen Sie dann aus Fahren Sie Fort .
      5. Wählen Sie Aus Seiten in der aktuellen Experience .
      6. Wählen Sie Aus Incident-Datensatzseite .
      7. Füllen Sie die Felder des Formulars aus:
        Feld Aktion
        Tabelle Eingabetaste Incident
        sysId
        1. Bewegen Sie den Mauszeiger über SysId Feld und wählen Sie das Symbol „Daten binden“ aus .
        2. Suchen Datentypen Auf der linken Seite, und wählen Sie aus Repeater .
        3. In Pillenansicht , Auswählen Wert , Dann _Row_Data , Doppelklicken Sie dann auf UniqueValue .
        4. Wählen Sie Übernehmen.
      8. Wählen Sie Aus Wählen Sie Aus .
        Wählen Sie das modale Element „Seitenziel“ aus.
      9. Aktivieren Sie das Kontrollkästchen, um zu aktivieren In neuer Registerkarte öffnen Eigenschaft.
      10. Wählen Sie Hinzufügen.
      11. Wählen Sie Speichern.
    4. Zeigen Sie eine Vorschau der Seite an, und testen Sie sie.
      1. Wählen Sie Vorschau.
      2. Wählen Sie in der Dropdownliste einen Anwender aus, z. B. „Fred Luddy“, „Carol Coughlin“ oder „Bow Ruggeri“, um die Karten zu filtern.
        Hinweis:
        Einige Anwender verfügen nicht über zugehörige Incident-Datensätze, daher führt die Auswahl dieser Anwender dazu, dass keine Karten angezeigt werden.
      3. Wählen Sie eine Karte aus, um den vollständigen Datensatz auf einer neuen Registerkarte anzuzeigen.

      Vorschau von UI BuilderSeite, die die Kartenanzeige anzeigt, die nach einem bestimmten Anwender gefiltert ist.