Binden Sie ein Ereignis an eine Komponente

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 3 Minuten Lesedauer
  • Binden Sie Datenelemente in UI Builder, damit Sie Ihren Komponenten Ereignisaktionen hinzufügen können.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Jede Komponente hat bestimmte Ereignisse, an die sie gebunden ist. Beispielsweise hat eine Schaltflächenkomponente nur ein Ereignis vom Typ „Schaltfläche angeklickt“, während anderen Komponenten mehrere Ereignisse zugeordnet sein können.

    Auf einige Komponenten wird keine Ereignisaktion angewendet. Ein Beispiel ist die Überschriftenkomponente. Viele Komponenten erfordern, dass Sie Ihrer Komponente ein Ereignis zuordnen, damit sie eine Aktion ausführt, z. B. das Laden von Daten.

    Um Aktionen zu Komponenten, Seiten und Datenressourcen auf Ihrer Seite hinzuzufügen, können Sie einen Ereignishandler hinzufügen. Eine Schaltflächenkomponente, die Sie einer Seite hinzufügen, ist statisch. Indem Sie eine Ereignisaktion an die Schaltfläche binden, können Sie sie mit einer Webseite verknüpfen.

    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.
    3. Erstellen oder öffnen Sie eine Seite.
      Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter Seite in UI Builder erstellen.
    4. Fügen Sie eine Komponente mit Ereignissen hinzu, an die sie an Ihre Seite gebunden werden kann, z. B. eine Schaltfläche.
      Weitere Informationen zum Hinzufügen von Komponenten zu einer Seite finden Sie unter Komponenten hinzufügen und konfigurieren.
    5. Um Ihrer Komponente einen Ereignishandler hinzuzufügen, wählen Sie die Registerkarte Ereignisse.
      Weitere Informationen zum Hinzufügen von Ereignishandlern zu Ihrer Komponente finden Sie unter Verwalten Sie -Aktionen auf UI Builder-Seiten.
      1. Um den Prozess zum Einrichten eines Ereignishandlers für Ihre Komponente zu starten, klicken Sie auf Ereigniszuordnung hinzufügen.
        Pfeil zum Hinzufügen einer Ereigniszuordnungsoption.
      2. Wählen Sie aus der Liste die Ereigniszuordnung aus, die Sie konfigurieren möchten.
        Liste der verfügbaren Ereigniszuordnungen.
      3. Wählen Sie Fortsetzen.
      4. Wählen Sie im Abschnitt Ereignis-Handler-Vorschau einen Ereignis-Handler aus, der an Ihre Komponente gebunden werden soll.
        Löschen Sie Warnbenachrichtigungen, wenn in einer Liste auf eine Zeile geklickt wird.
      5. Wählen Sie Fortsetzen.
      6. Konfigurieren Sie die Nutzlast für das Ereignis.
        Je nach Aktion des Ereignisses konfigurieren Sie jeden Ereignishandler unterschiedlich. Wenn Sie beispielsweise einen Ereignishandler für eine Schaltflächenkomponente hinzufügen, können Sie auswählen, was diese Schaltflächenaktion ausführt.
      7. Wählen Sie Hinzufügen.
    6. Wahlweise: Wenn ein Modal für Ihr Ereignis angezeigt werden soll, fügen Sie es der Seite hinzu, bevor Sie Ihr Ereignis an die Komponente binden.
      Ein Modal ist ein Bestätigungs-Popup, das angezeigt wird, wenn Sie auf die Komponente klicken. Wenn Sie beispielsweise eine Schaltflächenkomponente hinzufügen, die einen Datensatz löscht, fügen Sie ein Modal hinzu, um den Benutzer zu bitten, zu bestätigen, dass der Benutzer den Datensatz löschen möchte. Weitere Informationen finden Sie unter Modal zur Komponente hinzufügen.
      1. Wählen Sie in der Inhaltsstruktur neben Modale Elemente das Symbol +aus.
        Pfeil, der auf die Option „Neu hinzufügen“ des modalen Elements zeigt.
      2. Wählen Sie einen modalen Typ wie z.  B. Bestätigenaus.
        Modale Optionen mit hervorgehobenem modalen Element zum Bestätigen.
      3. Konfigurieren Sie das Modal.
        Sie können den Text im Modal, die Namen der Schaltflächen im Modal und die Größe des modalen Bildschirms ändern. Sie können auch Aktionen für das Modal festlegen. Wenn Sie mit der Konfiguration des Modals fertig sind, schließen Sie es. Beachten Sie, dass sich das von Ihnen erstellte Modal über dem Textkörper Ihrer Seitenstruktur in der Inhaltsstruktur befindet.
    7. Binden Sie ein Ereignis an eine Schaltflächenkomponente.
      Sie binden ein Ereignis an die Schaltfläche, um eine Aktion auszulösen. Wählen Sie die Schaltflächenkomponente aus, um sie erneut hervorzuheben, entweder in der Inhaltsstruktur oder auf der Seite.
      1. Wählen Sie in der Inhaltsstruktur die Option + Inhalt hinzufügen aus.
      2. Wählen Sie in der Toolbox die Komponente Schaltfläche aus.
      3. Wählen Sie Keine aus, wenn Sie aufgefordert werden, eine Voreinstellung auszuwählen.
      4. Klicken Sie im Konfigurationsbereich auf Ereignisse.
      5. Wählen Sie Handler hinzufügen.
        Pfeil, der auf den Link „Ereignishandler hinzufügen“ für die Schaltflächenkomponente zeigt.

        Der Schaltflächenkomponente ist nur das Ereignis „Auf Schaltfläche geklickt“ zugeordnet. Andere Komponenten können mehr als ein Ereignis haben.

      6. Wählen Sie einen Handler aus, den Sie der Schaltfläche zuweisen möchten.

        Um beispielsweise einen Ereignishandler für die Schaltflächenkomponente hinzuzufügen, können Sie ihn mit einem anderen Ziel verknüpfen und Warnungsbenachrichtigungen hinzufügen. In diesem Beispiel können Sie „Dialogfeld öffnen“ oder „Modal schließen“ wählen, damit die Schaltfläche das zuvor erstellte Dialogfeld öffnet. Wählen Sie in diesem Schaltflächenszenario den Ereignishandler des modalen Dialogs „Bestätigen und löschen“ aus, den Sie zuvor erstellt haben.

        Bildschirm für die Konfiguration des Ereignishandlers mit den Einstellungen für das Dialogfeld zum Öffnen oder Schließen.
      7. Wählen Sie Fortsetzen.
      8. Wählen Sie ein Modal aus der Dropdown-Liste aus.
      9. Wählen Sie Hinzufügen aus, um Ihrer Schaltflächenkomponente den modalen Ereignishandler hinzuzufügen.
    8. Klicken Sie auf Speichern.
    9. Testen Sie das Modal, indem Sie Vorschauauswählen.
    10. Um das von Ihnen erstellte Modal auszulösen, klicken Sie auf die Schaltfläche auf der Seite.