Aktionen auf UI Builder-Seiten verwalten (erweiterte Funktion)

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 8 Minuten Lesedauer

    • Erfahren Sie, wie Sie mit Events arbeiten, damit Sie Aktionen zu Komponenten, Seiten, Datenressourcen und deklarativen Aktionen in UI Builderhinzufügen können.

    Aktionen in UI Builder

    UI-Aktionen teilen UI Builder mit, was zu tun ist, wenn ein Event ausgelöst wird. Ein Ereignis ist eine Aktion, die ein Benutzer ausführt, oder ein Vorkommnis, das auf einer Seite auftritt. Verwenden Sie UI-Aktionen, um interaktive, benutzerfreundliche Schnittstellen zu erstellen, die Ihre Benutzer beim Abschließen von Aufgaben unterstützen. Jeder Komponente sind eigene Ereignisse zugeordnet. Zu den Ereignissen gehören:

    • Anwender klickt auf eine Datenvisualisierung
    • Seite ruft erfolgreich Daten ab
    • Benutzer wählt ein Optionsfeld aus
    • Seitenladevorgänge

    Arten von Ereignissen, die Aktionen auslösen können.

    Ereignisse in UI Builder

    Verwenden Sie ein Event, um Ihren Komponenten, Seiten und Datenressourcen Aktionen hinzuzufügen.

    • Ein Komponenten-Event ist eine Aktion, die Sie für eine Komponente einrichten. Sie richten einen Event Handler ein, um diese Komponentenaktion zu konfigurieren. Beispielsweise können Sie Ihrer Seite UI Builder eine Schaltflächenkomponente hinzufügen. Anschließend können Sie einen Ereignishandler hinzufügen, um eine Aktion für diese Schaltfläche anzuwenden, z. B. das Aufrufen einer Webseite.
    • Seiten-Events führen Aktionen für die gesamte Seite aus. Sie können die folgenden Seiten-Events konfigurieren:
      • Seitenereigniszuordnungen. Fügen Sie Warnungsbenachrichtigungen auf Ihrer Seite hinzu, entfernen oder löschen Sie sie.
      • Varianten-Event-Zuordnungen. Fügen Sie Warnungsbenachrichtigungen in Ihrer Seitenvariante hinzu, entfernen oder löschen Sie sie.
      • Gesendete Events. Erstellen Sie gesendete Events für Ihre Seite, um Relais-Event-Zuordnungen zu erstellen, die Events nach einem übergeordneten Event Handler modellieren. Wählen Sie einen übergeordneten Ziel-Event-Handler aus, um die Nutzlastfelder nach ihm zu modellieren.
      • Behandelte Ereignisse. Ein behandeltes Event ist ein Event, das anderen Benutzern zur Verfügung steht und von diesen verwendet werden kann. Nachdem Sie ein behandeltes Event erstellt haben, ist es unter Page event mappings für andere Benutzer verfügbar. Sie können auch Nutzlastfelder einrichten, die Sie manuell erstellen, oder eine Vorlage für Ihr behandeltes Ereignis auswählen, z. B. ein modales Dialogfeld öffnen oder schließen.
    • Datenressourcenereignisse ordnen Datenressourcen zu, um Informationen darüber zu benachrichtigen, wenn Daten abgerufen werden.
    • Events für eine Seite oder Komponente bewirken nichts, bis das Event einem oder mehreren Event-Handlern zugeordnet ist.

    Event-Fortschritt für verschiedene Arten von Events.

    Event-Zuordnung in UI Builder

    Ordnen Sie Aktionen Events zu, z. B. Klicken auf eine Schaltfläche oder Ausfüllen eines Felds. Eine Event-Zuordnung ist der Prozess, mit dem Sie die Nutzlast oder die kontextbezogenen Werte eines Events dem Objekt oder Handler zuordnen können, das bzw. der auf dieses Event reagiert.

    Weitere Informationen zur Event-Zuordnung finden Sie unter Definieren Sie Karten-Events.

    Event Handler in UI Builder

    Ein Event Handler ist eine Aktion, die ausgeführt wird, wenn ein Event auftritt. Durch die Zuordnung eines Event-Handlers zu einem Event geben Sie an, welche Aktion(en) ausgeführt werden sollen, wenn das Event auftritt. Verwenden Sie einen Event Handler, um eine Aktion für Ihre Seite UI Builder oder die Komponenten auf der Seite zu konfigurieren. Beispiel:
    • Durch Klicken auf eine Datenvisualisierung wird eine Liste der in der Visualisierung dargestellten Datensätze geöffnet
    • Wenn Daten für eine Liste erfolgreich abgerufen werden, wird eine Warnung geöffnet, die angibt, dass der Datenabruf erfolgreich war
    • Durch Auswahl eines Optionsfelds wird der Filter für eine Liste auf der Seite angepasst
    • Beim Laden einer Seite wird ein Dialogfeld geöffnet, in dem Sie die Annahme von Cookies bestätigen müssen, bevor Sie fortfahren

    Wenn Sie einer UI Builder -Seite oder -Komponente einen Event-Handler hinzufügen, können Sie verschiedene Arten von Event-Handlern auswählen. Beispielsweise kann eine Schaltflächenkomponente die folgenden Arten von Ereignishandlern aufweisen:

    • Geerbte Event-Handler. Ein geerbter Event Handler wird auf der Seite verfügbar gemacht, auf der Sie arbeiten. Wenn Sie sich auf der übergeordneten Seite UI Builder befinden, kann ein geerbter Event Handler von der App-Shell verfügbar gemacht werden. In der folgenden Tabelle sind die verschiedenen Arten von geerbten Event-Handlern aufgeführt, die Sie verwenden können, und was Sie mit ihnen tun können.
      Tabelle : 1. Übernommene Ereignis-Handler
      Event-Handler Beschreibung
      Breadcrumb-URL geändert
      Link zu Ziel Navigieren Sie zu einem Ziel.
      • App-Routen: Link zu einer anderen Seite in einer App, z. B. einem Startbildschirm.
      • Externe URL: Link zu einer Website oder einer externen URL.
      Beispielskript
          return {
        route: null, /* Page route, e.g. 'record' */
        fields: null, /* Required params, e.g. {"table":"incident","sysId":"X"} */
        params: null, /* Optional params, e.g. {"selectedIndex" : 1} */
        ☑️redirect: null, /* ??? True/false? */
        ☑️passiveNavigation: null, /* Load in background, e.g. 'false' */
        title: null, 
        multiInstField: null, 
        ☑️targetRoute: null, /* ??? */
        ☑️external: null /* ??? True/false? */
    };
      Parameter zu URL hinzufügen Fügen Sie einer URL zusätzliche Parameter hinzu.
      Beispielskript
      { “selectedTabIndex” : 0 }
      Modalen Dialog öffnen oder schließen Nachdem Sie ein Modal erstellt haben, verwenden Sie Open or close modal dialog, um das Modal auszulösen.
    • Event Handler auf Seitenebene. Dieser Typ von Event Handler ist allen Seiten gemeinsam. Sie verwenden diesen Handler-Typ, wenn Sie Warnungsbenachrichtigungen auf Seitenebene hinzufügen oder löschen möchten. In der folgenden Tabelle werden die verschiedenen Arten von Event-Handlern auf Seitenebene aufgelistet, die Sie verwenden können, und was Sie mit ihnen tun können.
      Tabelle : 2. Ereignis-Handler auf Seitenebene
      Event-Handler Beschreibung
      Warnungsbenachrichtigungen hinzufügen Fügen Sie ein Code-Fragment hinzu, um eine Warnungsbenachrichtigung zu senden. Beispiel: 
      return {
    items: [{"type" : "info", "message" : "Info message", "id" : "optionalID"}] /* Types: info, warning, error */
};
      Entfernen Sie die Warnungsbenachrichtigung Fügen Sie Code hinzu, um Warnungsbenachrichtigungs-IDs anzurufen, die Sie verwerfen möchten. Klicken Sie beispielsweise auf eine Schaltfläche, um eine Seitenladewarnungsbenachrichtigung zu entfernen.
      Löschen Sie die Warnungsbenachrichtigung Fügen Sie Code hinzu, um alle Warnungsbenachrichtigungs-IDs aufzurufen, die Sie verwerfen möchten. Klicken Sie beispielsweise auf eine Schaltfläche, um alle Warnungsbenachrichtigungen zu entfernen.
      Ladestatus festlegen Schalten Sie das Laden ein oder aus. Sie können beispielsweise das Laden aktivieren, um die Seite zu laden, wenn Sie auf eine Schaltfläche klicken, oder das Laden deaktivieren, um die Seite nicht zu laden, wenn auf eine Schaltfläche geklickt wird.
      Statusparameter des Clients aktualisieren Legen Sie den Statusparameter des Clients deklarativ fest. Angenommen, Sie haben einen Client-Statusparameter, den Sie mit einem Wert eingerichtet haben. Sie können den Ereignishandler Update client state parameter so konfigurieren, dass der Statusparameter des Clients mit einem neuen Wert aktualisiert wird. Beispiel: Sie haben einen Client-Statusparameter mit der Bezeichnung Begrüßung, der mit Hello als Anfangswert eingerichtet ist. Sie können einen Ereignishandler Update client state parameter hinzufügen, den Statusparameter des Begrüßungsclients auswählen und dann einen neuen Wert eingeben, z. B. Auf Wiedersehen. Wenn Sie auf die Schaltfläche klicken, wird auf der Seite „ Hallo “ durch „Auf Wiedersehen“ ersetzt.
      Laden des UXF-Macroponent-Viewports angefordert
    • Handler für Datenressourcen. Dieser Typ von Event Handler löst das Abrufen oder Schreiben von Daten auf den Server aus.
      Sie können die Datenquellendaten der App-Shell auf Ihrer Seite UI Builder aktualisieren, indem Sie auf eine Schaltfläche klicken. Mit einem Datenressourcen-Handler können Sie beispielsweise die folgenden Aktionen ausführen:
      • Binden Sie Daten an die Beschreibung eines Incident-Datensatzes.
      • Ändern Sie den Wert der Incident-Beschreibung.
      • Fügen Sie Ihrer Seite eine Schaltflächenkomponente hinzu.
      • Beschriften Sie die Schaltfläche als Incident aktualisieren.
      • Fügen Sie einen Ereignishandler Look Up Record für die Schaltfläche hinzu.
      • Speichern Sie Ihre Seite.
      • Wenn sich die Beschreibung des Incident-Datensatzes ändert, klicken Sie auf Aktualisieren, um die Beschreibung auf Ihrer Seite zu aktualisieren.
    • Client-Skripts. Skripts, die ausgeführt werden, wenn ein Event für eine Komponente ausgelöst wird. Sie erstellen diese Skripts im Abschnitt „Client-Skripts“ in UI Builder. Weitere Informationen finden Sie unter Clientskripts definieren und an Komponenten binden.

    Binden von Events an Komponenten in UI Builder

    Binden Sie Event-Handler an die Events in einer Komponente. Wenn Sie Ihrer Seite UI Builder Komponenten hinzufügen, werden diese Komponenten nicht so konfiguriert, dass sie Aktionen auf Ihrer Seite ausführen. Beispielsweise ist eine Schaltflächenkomponente statisch und führt erst Aktionen aus, wenn Sie eine Event-Aktion an sie binden, z. B. das Löschen eines Datensatzes. Einige Komponenten verfügen über mehrere Events, denen Event-Handler zugewiesen werden können. Beispielsweise können Sie in der Listenkomponente dem Ereignis Row clicked einen Navigations-Handler zuweisen. Sie können dem Ereignis Data fetch failed auch ein offenes modales Element zuweisen. Weitere Informationen finden Sie unter Binden Sie ein Event an eine Komponente.

    Binden von Events an UI Builder-Seiten

    Binden Sie ein Event auf Seitenebene, um Event Handler auf der Seite auszuführen. Verwenden Sie Events auf Seitenebene beispielsweise für Seitenbenachrichtigungen, Seitenladevorgänge oder wenn sich eine Seiteneigenschaft ändert. Die Zuweisung des Event-Handlers zum Event auf Seitenebene ähnelt der Zuweisung von Handler zu Events aus Komponenten.

    Sie können Event-Zuordnungen mit den folgenden Methoden binden:
    • Seitenereigniszuordnungen. Fügen Sie Warnungsbenachrichtigungen auf Ihrer Seite hinzu, entfernen oder löschen Sie sie.
    • Varianten-Event-Zuordnungen. Fügen Sie Warnungsbenachrichtigungen in Ihrer Seitenvariante hinzu, entfernen oder löschen Sie sie.
    • Gesendete Events. Erstellen Sie gesendete Events für Ihre Seite, um Relais-Event-Zuordnungen zu erstellen, die Events nach einem übergeordneten Event Handler modellieren. Wählen Sie einen übergeordneten Ziel-Event-Handler aus, um die Nutzlastfelder nach ihm zu modellieren.
    • Behandelte Ereignisse. Fügen Sie ein behandeltes Event für ein Event hinzu, das verfügbar gemacht und von anderen Benutzern verwendet werden kann.
    Weitere Informationen finden Sie unter Binden Sie ein Event an eine Seite.

    Binden von Events an Datenressourcen in UI Builder

    Binden Sie Event Handler an einzelne Datenressourcen auf Ihrer Seite UI Builder. Wenn eine Datenressource beispielsweise erfolgreich neue Daten abruft, wird ein Ereignishandler wie die Navigation ausgeführt, um einen Benutzer zum nächsten Schritt in einem Flow zu führen. Wenn eine Datenressource einen Datensatz erfolgreich zu einer Tabelle hinzufügt, wird ein modales Element für Erfolg angezeigt, das den Event-Handler „Modal anzeigen“ verwendet. Weitere Informationen finden Sie unter Binden Sie ein Event an eine Datenressource.

    Binden von Ereignissen an deklarative Aktionen in UI Builder

    Binden Sie Datenelemente, um einer deklarativen Aktionsdefinition in Aktionen und Komponenten in der Now Platform®Event-Aktionen hinzuzufügen. Sie können beispielsweise ein Datenelement binden, um eine Event-Aktion hinzuzufügen, um die Arbeit an einer Tabelle abzuschließen.

    Wenn Sie Ihrer Seite UI Builder eine Komponente hinzufügen, die eine deklarative Aktion enthält, müssen Sie sie an ein behandeltes Ereignis binden. Das behandelte Ereignis erstellt eine Aktion, die ausgeführt wird, wenn ein Benutzer die Komponente auswählt. Durch Auswahl von Konfigurieren der Ereigniszuordnung für deklarative Aktionenfügen Sie einen neuen Ereignishandler hinzu, um zu definieren, was die deklarative Aktion auf der Seite tut. Konfigurieren Sie die Event-Zuordnungsoption für deklarative Aktionen im Konfigurationsbereich.

    Weitere Informationen finden Sie unter Ein Event an eine deklarative Aktion binden.