Fügen Sie Repeater zu Komponenten hinzu

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 3 Minuten Lesedauer
  • Verwenden Sie in UI BuilderRepeater, um eine oder mehrere Komponenten mit Ergebnissen aus einer Datenressource zu wiederholen.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Die Repeater-Komponente fungiert als einfache Schleife, die die von Ihnen angegebenen Daten in mehreren Komponenten in UI Builderwiederholt. Repeater verwenden ein Array oder ein Array von Objekten. Beispiel: Das Array [{"task": "A"},{"task": "B"}] wiederholt den darin enthaltenen Inhalt zweimal. Mit Repeatern können Sie Werte an eine Daten-Array-Eigenschaft binden. @item.value.{property_name} bindet die Werte an die Komponente innerhalb der Repeater. Wenn Sie eine Aufgabe binden möchten, können Sie sie als @item.value.taskbinden, und der Repeater zeigt den richtigen Wert an.

    Komponenten innerhalb eines Repeaters wiederholen die Anzahl der Elemente in der Datenquelle, unabhängig davon, ob die Komponentenausgabe dynamisch gemacht wird oder nicht. Angenommen, Sie platzieren eine Header-Komponente in einem Repeater mit drei Datenelementen, ändern das Feld Bezeichnung jedoch nicht. Dann sehen Sie drei Instanzen des Headers mit derselben Ausgabebezeichnung.

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
    3. Öffnen Sie den Editor für die Seite, auf der Sie den Repeater hinzufügen möchten.
      Wenn Sie keine Seite für Ihre Experience erstellt haben, finden Sie unter Erstellen Sie eine Seite in UI Builder weitere Informationen zum Erstellen einer Seite.
    4. Verbinden Sie eine Datenressource mit Ihrer Seite.

      Fügen Sie beispielsweise Ihrer Seite die Datenressource Mehrere Datensätze suchen hinzu. Weitere Informationen zum Verbinden einer Datenressource finden Sie unter Fügen Sie einer Seite Datenressourcen hinzu, und konfigurieren Sie sie.

      1. Wählen Sie im Datenressourcen-Drawer die Option + Datenressource hinzufügenaus.
      2. Suchen Sie im modalen Fenster nach der Datenressource Mehrere Datensätze suchen, und wählen Sie Hinzufügenaus.
      3. Geben Sie im Feld TabelleIncidentein.
      4. Geben Sie im Feld Max. Ergebnisse den Wert 5ein.

        Die Datenressource Nach mehreren Datensätzen suchen ist konfiguriert.

        Datenressourcenkonfiguration mit ausgewählter Incident-Tabelle, hinzugefügten Rückgabefeldern für „geöffnet“ und „Kurzbeschreibung“, max. Ergebnisse auf 5 festgelegt.
      5. Schließen Sie das Modal.
    5. Wählen Sie einen vorhandenen Container aus, oder erstellen Sie ein Spaltenlayout.
      Weitere Informationen finden Sie unter Komponenten in UI Builder-Seiten organisieren.
    6. Fügen Sie Ihrer Seite die Repeater-Komponente hinzu.
      Pfeil, der auf die Repeater-Komponente in der Toolbox zeigt.

      Informationen zum Hinzufügen von Komponenten finden Sie unter Komponenten hinzufügen und konfigurieren.

    7. Wählen Sie auf der Registerkarte Konfigurierendie Option Keine - Komponente manuell konfigurieren aus.
    8. Fügen Sie auf der Registerkarte Konfigurieren ein Array hinzu, das die Daten für wiederholte Komponenten definiert.
      1. Zeigen Sie auf Daten-Array, und wählen Sie das Symbol zum Binden von Daten (Symbol für dynamische Datenbindung.).
      2. Wählen Sie unter Datentypendie Option Datenressourceaus.
      3. Wählen Sie in der nächsten Spalte die Pille Nach mehreren Datensätzen suchen 1 aus.
      4. Doppelklicken Sie unter Pillenansichtauf Ergebnisse, oder ziehen Sie sie, um die Ausgabe @data.look_up_multiple_records_1.results hinzuzufügen.
      5. Wählen Sie Übernehmen.

        Die Ergebnisse aus der Datenressource werden an die Repeater-Komponente gebunden. Innerhalb des Repeaters repräsentiert eine Komponente jedes Ergebnis.

        Datenbindungskonfiguration mit @data.look_up_multiple_records_1.results hinzugefügt
    9. Wählen Sie unter dem Repeater, den Sie im vorherigen Schritt hinzugefügt haben, die Option + Inhalthinzufügen aus.
      Inhaltsstruktur mit einem schwarzen Pfeil, der auf den Link „Inhalt hinzufügen“ unter der Repeater-Komponente zeigt.
    10. Fügen Sie eine Überschriftskomponente hinzu.
    11. Wählen Sie auf der Registerkarte Konfigurierendie Option Keine - Komponente manuell konfigurieren aus.
    12. Konfigurieren Sie die Komponente, die Sie im Repeater geschachtelt haben.

      Binden Sie beispielsweise displayValue an die Komponente. Weitere Informationen finden Sie unter Daten mit Ihren Komponenten verbinden.

      1. Bewegen Sie den Cursor zum Feld Bezeichnung, und wählen Sie das Symbol zum Binden von Daten (Symbol für dynamische Datenbindung.).
      2. Wählen Sie unter Datentypendie Option Repeateraus.
      3. Wählen Sie unter Pillenansichtdie Wertpille aus.
      4. Wählen Sie in der nächsten Spalte die Nummernpille aus.
      5. Doppelklicken oder ziehen Sie in der nächsten Spalte displayValue, um die Ausgabe @item.value.number.displayValue hinzuzufügen.
      6. Wählen Sie Übernehmen.

        Der displayValue-Wert ist an die Überschriften-Komponente gebunden.

        Datenbindungskonfiguration mit @item.value.number.displayValue hinzugefügt
    13. Wählen Sie Speichern.

      Die Komponente, die Sie an die Datenressource gebunden haben, wird in der Phase angezeigt und fünfmal wiederholt, und zwar einmal für jedes von der Incident-Tabelle zurückgegebene Ergebnis.

      Die Überschriftenkomponente wird fünfmal mit jeweils einem anderen Anzeigewert aus der Incident-Tabelle angezeigt.
    14. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie die Schaltfläche Vorschau wählen.
      Eine Registerkarte wird geöffnet, um die Seitenvorschau mit wiederholten Daten anzuzeigen.

      In der Seitenvorschau werden alle Daten aus wiederholten Komponenten angezeigt.