Erstellen und passen Sie Warnungsnachrichten in an UI Builder

  • Freigeben Version: Zurich
  • Aktualisiert 24. November 2025
  • 5 Minuten Lesedauer

    • Erfahren Sie, wie Warnungsnachrichten Ihnen helfen, Feedback und Statusaktualisierungen mithilfe von Standard- und geskripteten Ansätzen zu kommunizieren.

    Warnungen sind Komponenten, die standardisierte Benachrichtigungen anzeigen, z. B. Feedback, Warnungen und Bestätigungen. Sie sind einfach ohne Skripting zu konfigurieren, Sie können jedoch ein Skript hinzufügen, um erweiterte Funktionen zu erhalten.

    Abbildung : 1. Warnungsnachrichtentypen
    Eine Reihe verschiedener Arten von Warnungen.

    UI Builder Unterstützt mehrere Arten von Warnungsnachrichten. Um zu sehen, wie sich die einzelnen verhält, öffnen Sie Dokumentation der Warnungskomponente Und probieren Sie verschiedene Einstellungen in der interaktiven Vorschau aus.

    Erstellen Sie Warnungsnachrichten in UI Builder

    Fügen Sie Warnungsnachrichten für einfache Benachrichtigungen ohne Skripting hinzu, und konfigurieren Sie sie.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Verwenden Sie die Standardkonfiguration für Warnungsnachrichten für einfache Benachrichtigungen. In diesem Beispiel zeigt die Warnung eine personalisierte Begrüßung mit dem vollständigen Namen des angemeldeten Anwenders an.

    Abbildung : 2. Vorschau des endgültigen Layouts
    Warnung, die im Header-Menü angezeigt wird und den angemeldeten Anwender mit einer Hervorhebung über der Komponente begrüßt.
    1. Warnung : Zeigt die Willkommensnachricht an.
    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
    Warnung

    Prozedur

    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. Fügen Sie eine Warnung hinzu.
      1. Wählen Sie in der Inhaltsstruktur aus + Inhalt hinzufügen .
      2. Suchen Sie nach Warnung Und fügen Sie es aus der Toolbox hinzu.
      3. Bewegen Sie den Mauszeiger in der Inhaltsstruktur darüber Warnung 1 Und wählen Sie das Symbol „Konfigurieren“ aus , Und wählen Sie dann aus Umbenennen .
        Menü „zusätzliche Aktionen“ in der Inhaltsstruktur, das für die Warnungskomponente geöffnet ist, wobei der Cursor auf die Option „Umbenennen“ zeigt.
      4. Ersetzen Sie den Text in Komponentenbezeichnung Feld mit Willkommensnachricht .
        Die Komponenten-ID Feld wird automatisch ausgefüllt.
      5. Wählen Sie Aus Anwenden.
    5. Konfigurieren Sie die Warnungsnachricht.
      1. Mit Willkommensnachricht In der Inhaltsstruktur ausgewählt, navigieren Sie zum Konfigurationsbereich, und legen Sie die folgenden Eigenschaften fest:
        Feld Wert
        Typ Info
        Symbol Circle-info-Gliederung
        Header Leer (beliebigen Text im Feld löschen)
        Verknüpfung Leer (auswählen Bearbeiten , Löschen Sie dann den gesamten Text darin Bezeichnung Und Href )
        Aktion Leer (auswählen Bearbeiten , Festgelegt Typ Bis -- Keine -- , Löschen Sie dann den gesamten Text darin Bezeichnung Und Href )

        Ihr Konfigurationsbereich sollte wie folgt aussehen:

        Konfigurationsbereich für Warnung mit Hervorhebungen über Komponentenbezeichnung, Typ, Symbol, Header, Link, und Aktionsfelder.

      2. Bewegen Sie den Mauszeiger über Nachricht Feld und wählen Sie das Symbol „Daten binden“ aus .
      3. Wählen Sie Aus Formeln , Dann Zeichenfolge , Doppelklicken oder ziehen Sie dann VERKETTUNG Um die Formel in den Bereich darüber zu verschieben.
        Dialogfeld „Daten binden“, das die CONCAT-Funktion mit leeren Werten anzeigt.
      4. Doppelklicken Sie Wert1 Um das Feld auszuwählen, wählen Sie dann erneut aus, um Text einzufügen.
      5. Eingabetaste „Willkommen! „ , Stellen Sie sicher, dass Sie nach dem Ausrufezeichen ein Leerzeichen nachstellen.
      6. Doppelklicken Sie Werte Um das Feld auszuwählen, wählen Sie dann erneut aus, um Text einzufügen.
      7. Wählen Sie Aus Datentypen , Dann Seiteneigenschaften .
      8. Unter Pillenansicht , Wählen Sie die Pillen in der folgenden Reihenfolge aus: Sitzung > Anwender > fullName.
      9. Doppelklicken oder ziehen Vollständiger Name Um sie in den Bereich oben zu verschieben, wählen Sie dann aus Anwenden .
        Dialogfeld „Daten binden“, das die CONCAT-Funktion mit „Willkommen! „ Und @context.session.user.fullName als ihre Werte.
    6. Speichern und testen Sie Ihre Seite.
      1. Wählen Sie Aus Speichern Oben rechts.
      2. Wählen Sie Vorschau.

      Die Warnung wird oben auf der Seite mit dem Text „Willkommen!“ angezeigt. Gefolgt vom Namen des angemeldeten Anwenders.

      Warnung, die im Header-Menü angezeigt wird und den angemeldeten Anwender begrüßt.

    Passen Sie Warnungsnachrichten mit einem Client-Skript in an UI Builder

    Verwenden Sie ein Clientskript, um dynamische, kontextbezogene Warnungsnachrichten zu erstellen.

    Vorbereitungen

    Erforderliche Rolle: Administrator

    Warum und wann dieser Vorgang ausgeführt wird

    Geskriptete Warnungen bieten Benachrichtigungen, die auf Ereignisse oder externe Daten reagieren. Sie sind sehr flexibel und können auf komplexe Bedingungen reagieren, erfordern jedoch Skripterstellungswissen und mehr Aufwand, um sie zu pflegen. In diesem Beispiel löst eine Schaltfläche ein Client-Skript aus, das mehrere Warnungen mit anwenderdefinierten Nachrichten generiert.

    Abbildung : 3. Vorschau des endgültigen Layouts
    UI Builder Editor, der eine Schaltfläche und eine Reihe anwenderdefinierter geskripteter Warnungen mit Hervorhebungen über der Schaltfläche und einer Warnung anzeigt.
    1. Schaltfläche : Löst das Client-Skript aus, um die Warnungen anzuzeigen.
    2. Warnung : Zeigt anwenderdefinierte Nachrichten an.
    Dieses Verfahren verwendet UI BuilderKomponenten zum Erstellen dynamischer, interaktiver Layouts. Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter:
    Tabelle : 2. In diesem Verfahren verwendete Komponenten
    Komponente Dokumentationslinks
    Schaltfläche
    Warnung

    Prozedur

    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. Fügen Sie eine Schaltfläche hinzu.
      1. Wählen Sie in der Inhaltsstruktur aus + Inhalt hinzufügen .
      2. Suchen Sie nach Schaltfläche Und fügen Sie es aus der Toolbox hinzu.
      3. Bewegen Sie den Mauszeiger in der Inhaltsstruktur darüber Schaltfläche 1 Und wählen Sie das Symbol „Konfigurieren“ aus , Und wählen Sie dann aus Umbenennen .
      4. Ersetzen Sie den Text in Komponentenbezeichnung Feld mit Showcase-Warnungen .
        Die Komponenten-ID Feld wird automatisch ausgefüllt.
      5. Wählen Sie Übernehmen.
    5. Erstellen Sie ein Client-Skript.
      1. Unter Daten und Skripts , Wählen Sie aus + Neben Client-Skripts .
        Drawer für Daten und Skripts mit Hervorhebung über Clientskripts.
      2. Ersetzen Sie den Text in Skriptname Mit Warnungen .
      3. Ersetzen Sie den Code durch Folgendes:
        Tipp:
        Sie können das Formatcode-Symbol auswählen Um den Code lesbarer zu machen.
        /**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({
    api,
    event,
    helpers,
    imports
}) {
    api.emit("NOW_UXF_PAGE#ADD_NOTIFICATIONS", {
        items: [
            {
                id: "alert1",
                status: "critical",
                icon: "circle-exclamation-fill",
                content: {
                    type: "html",
                    value: "<h2>Critical: System failure detected!</h2>"                   
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert2",
                status: "high",
                icon: "circle-exclamation-outline",
                content: {
                    type: "string",
                    value: "High: CPU usage exceeded 90%"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert3",
                status: "moderate",
                icon: "circle-pause-outline",
                content: {
                    type: "string",
                    value: "Moderate: Disk space is below 20%"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert4",
                status: "warning",
                icon: "triangle-exclamation-outline",
                content: {
                    type: "html",
                    value: "<h4> Warning: A new software update is ready. </h4>"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert5",
                status: "info",
                icon: "circle-question-fill",
                content: {
                    type: "string",
                    value: "Info: A new software update is available"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert6",
                status: "positive",
                icon: "check-circle-outline",
                content: {
                    type: "string",
                    value: "Positive: Backup completed successfully"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert7",
                status: "low",
                icon: "bell-fill",
                content: {
                    type: "string",
                    value: "Low: Minor update recommended"
                },
                action: { type: "dismiss" }
            }
        ]
    });
}
      4. Wählen Sie Übernehmen.
    6. Verknüpfen Sie die Schaltfläche mit dem Client-Skript mit einem Ereignis.
      1. Wählen Sie in der Inhaltsstruktur die Schaltfläche aus, die wir erstellt haben: Showcase-Warnungen .
      2. Wählen Sie im Konfigurationsbereich aus Ereignisse Registerkarte.
      3. Unter Schaltfläche angeklickt Ereignis, wählen Sie aus Handler hinzufügen .
      4. Suchen Sie nach Warnungen , Und wählen Sie dann aus Warnungen Handler unter Client-Skripts .
        Ereignisdialogfeld, das den Handler für das ausgewählte Warnungs-Client-Skript anzeigt.
      5. Wählen Sie Fortsetzen.
      6. Wählen Sie Hinzufügen.
    7. Speichern und testen Sie Ihre Seite.
      1. Wählen Sie Aus Speichern Oben rechts.
      2. Wählen Sie Vorschau.

      Wenn Sie die Schaltfläche auswählen, werden mehrere Warnungen mit Nachrichten angezeigt, die Sie im Client-Skript definieren.

      UI Builder Editor mit einer Schaltfläche und einer Reihe anwenderdefinierter geskripteter Warnungen.