Aktionen in UI Builder-Seiten verwalten (erweiterte Funktion)

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 8 Minuten Lesedauer

    • Erfahren Sie, wie Sie mit Ereignissen arbeiten, um Komponenten, Seiten, Datenressourcen und deklarativen Aktionen in UI BuilderAktionen hinzuzufügen.

    Aktionen in UI Builder

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

    • Der Anwender klickt auf eine Datenvisualisierung
    • Seite ruft erfolgreich Daten ab
    • Der Benutzer wählt ein Optionsfeld aus
    • Seite wird geladen

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

    Ereignisse in UI Builder

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

    • Ein Komponentenereignis ist eine Aktion, die Sie für eine Komponente einrichten. Sie richten einen Ereignishandler ein, um diese Komponentenaktion zu konfigurieren. Sie können beispielsweise Ihrer Seite UI Builder eine Schaltflächenkomponente hinzufügen. Anschließend können Sie einen Ereignis-Handler hinzufügen, um eine Aktion für diese Schaltfläche anzuwenden, z. B. für das Wechseln zu einer Webseite.
    • Seitenereignisse führen Aktionen für die gesamte Seite aus. Sie können die folgenden Seitenereignisse konfigurieren:
      • Zuordnungen von Seiten-Ereignissen Fügen Sie auf Ihrer Seite Warnungsbenachrichtigungen hinzu, entfernen oder löschen Sie sie.
      • Zuordnungen für Varianten-Ereignisse Fügen Sie Ihrer Seitenvariante Warnungsbenachrichtigungen hinzu, entfernen oder löschen Sie sie.
      • Gesendete Ereignisse. Erstellen Sie gesendete Ereignisse für Ihre Seite, um weitergeleitete Ereigniszuordnungen zu erstellen, die Ereignisse nach einem übergeordneten Ereignishandler modellieren. Wählen Sie einen übergeordneten Ereignishandler des Ziels aus, um die Nutzlastfelder danach zu modellieren.
      • Behandelte Ereignisse. Ein behandeltes Ereignis ist ein Ereignis, das anderen Anwendern zur Verfügung steht und zur Verwendung durch sie zur Verfügung steht. Nachdem Sie ein behandeltes Ereignis erstellt haben, steht es anderen Benutzern unter Page event mappings zur Verfügung. Sie können auch manuell erstellte Nutzlastfelder einrichten oder eine Vorlage für Ihr behandeltes Ereignis auswählen, z. B. das Öffnen oder Schließen eines modalen Dialogfelds.
    • Datenressourcenereignisse ordnen Datenressourcen zu, um Informationen darüber zu benachrichtigen, wann Daten abgerufen werden.
    • Ereignisse für eine Seite oder Komponente haben erst dann eine Aktion, wenn sie einem oder mehreren Ereignishandlern zugeordnet wurden.

    Ereignisfortschritt für verschiedene Arten von Ereignissen.

    Ereigniszuordnung in UI Builder

    Ordnen Sie Aktionen Ereignissen zu, z. B. dem Klicken auf eine Schaltfläche oder dem Ausfüllen eines Felds. Eine Ereigniszuordnung ist der Prozess, mit dem Sie die Nutzlast oder kontextbezogene Werte eines Ereignisses dem Objekt oder Handler zuordnen können, das bzw. den auf dieses Ereignis wirkt.

    Weitere Informationen zur Ereigniszuordnung finden Sie unter Definieren Sie Kartenereignisse.

    Ereignishandler in UI Builder

    Ein Ereignishandler ist eine Aktion, die ausgeführt wird, wenn ein Ereignis auftritt. Durch die Zuordnung eines Ereignis-Handlers zu einem Ereignis geben Sie an, welche Aktionen beim Eintreten des Ereignisses ausgeführt werden sollen. Verwenden Sie einen Ereignishandler, 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 Sie erfolgreich Daten für eine Liste abrufen, 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 Seite oder Komponente UI Builder einen Ereignishandler hinzufügen, können Sie verschiedene Arten von Ereignishandlern auswählen. Beispielsweise kann eine Schaltflächen-Komponente die folgenden Typen von Ereignis-Handlern aufweisen:

    • Übernommene Ereignis-Handler. Ein geerbter Ereignishandler wird auf der Seite verfügbar gemacht, auf der Sie arbeiten. Wenn Sie sich auf der übergeordneten Seite UI Builder befinden, kann ein geerbter Ereignishandler von der App-Shell verfügbar gemacht werden. In der folgenden Tabelle sind die verschiedenen Typen von geerbten Ereignishandlern 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 beliebigen 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.
    • Ereignishandler auf Seitenebene. Dieser Typ von Ereignis-Handler ist allen Seiten gemeinsam. Verwenden Sie ihn, wenn Sie Warnungsbenachrichtigungen auf Seitenebene hinzufügen oder löschen möchten. In der folgenden Tabelle sind die verschiedenen Arten von Ereignishandlern auf Seitenebene aufgeführt, 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 die IDs von Warnungsbenachrichtigungen anzurufen, die Sie schließen möchten. Klicken Sie beispielsweise auf eine Schaltfläche, um eine Warnungsbenachrichtigung beim Laden der Seite zu entfernen.
      Löschen Sie die Warnungsbenachrichtigung Fügen Sie Code hinzu, um alle Warnungsbenachrichtigungs-IDs aufzurufen, die Sie schließen 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 Sie auf eine Schaltfläche klicken.
      Statusparameter des Clients aktualisieren Legen Sie den Client-Statusparameter deklarativ fest. Angenommen, Sie haben einen Client-Statusparameter, den Sie mit einem Wert einrichten. Sie können den Ereignishandler Update client state parameter so konfigurieren, dass der Client-Statusparameter mit einem neuen Wert aktualisiert wird. Beispiel: Sie haben einen Client-Statusparameter namens „ Begrüßung “, der mit „ Hello “ als Anfangswert eingerichtet wird. 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, ersetzt auf der Seite „ Auf Wiedersehen“ das „ Hallo “.
      Laden des UXF-Macroponent-Viewports angefordert Fügen Sie einer Komponente, z. B. einer Schaltflächenkomponente, hinzu, um einen Viewport zu öffnen. Weitere Informationen finden Sie unter Fügen Sie Ihrer Seite eine Viewport-Komponente hinzu.
    • Handler für Datenressourcen. Diese Art von Ereignishandler löst das Abrufen von oder Schreiben von Daten auf dem 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 Ereignis 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 Ereignissen an Komponenten in UI Builder

    Binden Sie Ereignishandler an die Ereignisse in einer Komponente. Wenn Sie Ihrer Seite UI Builder Komponenten hinzufügen, sind diese Komponenten nicht so konfiguriert, dass Aktionen auf Ihrer Seite ausgeführt werden. Beispielsweise ist eine Schaltflächenkomponente statisch und führt erst dann eine Aktion aus, wenn Sie eine Ereignisaktion an sie binden, z. B. das Löschen eines Datensatzes. Einige Komponenten haben mehrere Ereignisse, denen Ereignishandler 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 Ereignis an eine Komponente.

    Binden von Ereignissen an UI Builder-Seiten

    Binden Sie ein Ereignis auf Seitenebene, um Ereignishandler auf der Seite auszuführen. Verwenden Sie beispielsweise Ereignisse auf Seitenebene für Seitenbenachrichtigungen, das Laden der Seite oder wenn sich eine Seiteneigenschaft ändert. Die Zuweisung des Ereignishandlers an das Ereignis auf Seitenebene ähnelt der Zuweisung von Handlern zu Ereignissen aus Komponenten.

    Sie können Ereigniszuordnungen mit den folgenden Methoden binden:
    • Zuordnungen von Seiten-Ereignissen Fügen Sie auf Ihrer Seite Warnungsbenachrichtigungen hinzu, entfernen oder löschen Sie sie.
    • Zuordnungen für Varianten-Ereignisse Fügen Sie Ihrer Seitenvariante Warnungsbenachrichtigungen hinzu, entfernen oder löschen Sie sie.
    • Gesendete Ereignisse. Erstellen Sie gesendete Ereignisse für Ihre Seite, um weitergeleitete Ereigniszuordnungen zu erstellen, die Ereignisse nach einem übergeordneten Ereignishandler modellieren. Wählen Sie einen übergeordneten Ereignishandler des Ziels aus, um die Nutzlastfelder danach zu modellieren.
    • Behandelte Ereignisse. Fügen Sie ein behandeltes Ereignis für ein Ereignis hinzu, das offengelegt ist und von anderen Anwendern verwendet werden kann.
    Weitere Informationen finden Sie unter Binden Sie ein Ereignis an eine Seite.

    Binden von Ereignissen an Datenressourcen in UI Builder

    Binden Sie Ereignishandler an einzelne Datenressourcen auf Ihrer Seite UI Builder. Wenn eine Datenressource beispielsweise erfolgreich neue Daten abruft, führt sie einen Ereignishandler wie die Navigation aus, um einen Benutzer zum nächsten Schritt in einem Flow zu leiten. Wenn eine Datenressource einen Datensatz erfolgreich zu einer Tabelle hinzufügt, wird ein modales Element „Erfolg“ angezeigt, das den Ereignis-Handler „modales Element anzeigen“ verwendet. Weitere Informationen finden Sie unter Binden Sie ein Ereignis 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®Ereignisaktionen hinzuzufügen. Sie können beispielsweise ein Datenelement binden, um eine Ereignisaktion hinzuzufügen, um die Arbeit an einer Tabelle abzuschließen.

    Wenn Sie Ihrer Seite UI Builder eine Komponente mit einer deklarativen Aktion hinzufügen, 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 Ereignis-Handler hinzu, um zu definieren, was die deklarative Aktion auf der Seite bewirkt.

    Konfigurieren Sie die Option „Ereignis-Zuordnungen für deklarative Aktionen“ im Bereich Konfigurieren.

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