Komponenten hinzufügen und konfigurieren

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 11 Minuten Lesedauer

    • Erfahren Sie, wie Sie Ihrer Seite in Komponenten hinzufügen UI Builder. Eine Seite wird erstellt, indem Komponenten hinzugefügt werden.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Komponenten sind die Bausteine, die zum Erstellen anwenderdefinierter Seiten in verwendet werden UI Builder. Erfahren Sie, wie Sie einer Seite eine Komponente hinzufügen. Nachdem Sie einer Seite eine Komponente hinzugefügt haben, müssen Sie die Komponente konfigurieren. Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter Siehe Komponentendokumentation Auf ServiceNowEntwicklerwebsite.

    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. Öffnen oder erstellen Sie eine Seite.
      Wenn Sie eine vorhandene Seite öffnen, stellen Sie sicher, dass Sie sich im selben Umfang wie die ursprüngliche Seite befinden. Wenn nicht, ändern Sie den Umfang, bevor Sie mit der Bearbeitung der Seite beginnen. Anwendungsbereiche schützen Anwendungen, indem der Zugriff auf Anwendungsdateien und -daten identifiziert und eingeschränkt wird. Administratoren legen den Umfang fest, um anzugeben, welche Teile einer Anwendung für andere Anwendungen zugänglich sind. Der Anwendungsbereich schützt Daten und Anwendungsdateien. Siehe Informationen zu Sicherheit und RollenFür weitere Informationen zum Anwendungsbereich.
    4. Wählen Sie einen vorhandenen Container aus, oder erstellen Sie ein Spaltenlayout.
      Weitere Informationen finden Sie unter Komponenten in UI Builder-Seiten organisieren.
    5. Fügen Sie Ihrer Seite Komponenten hinzu.
      UI Builder Enthält eine Bibliothek von Komponenten zur Auswahl. Sie fügen Komponenten als Bausteine Ihrer Seite hinzu. Sie können beispielsweise eine Überschrift, Datenvisualisierungen usw. hinzufügen. Die folgende Tabelle zeigt Ihnen, wie Sie einer Seite eine Komponente hinzufügen können.
      Zum Hinzufügen einer Komponente Gehen Sie folgendermaßen vor
      Direkt von Ihrer Seite Wählen Sie auf Ihrer Seite aus + Und wählen Sie eine Komponente aus der Toolbox aus. Sie können nach einer Komponente suchen oder durch die Liste scrollen.Symbol „Inhalt hinzufügen“, das in der Phase ausgewählt wurde und das Toolbox-Fenster mit der Registerkarte „Komponenten“ anzeigt.
      Floating-Menü über der Seite Wählen Sie das Floating-Menü über Ihrer Komponente aus.
      • Wählen Sie Aus Hinzufügen vor Oder Hinzufügen nach .
      • Wählen Sie eine Komponente aus der Toolbox aus.
      Pfeil, der auf das Floating-Menü verweist, das nach Auswahl des Menüsymbols angezeigt wird.
      Inhaltsstruktur Sie können eine Komponente aus der Inhaltsstruktur auf zwei Arten hinzufügen.
      • Wählen Sie Aus +Inhalt hinzufügen Unter einem Container in der Inhaltsstruktur. Wählen Sie dann eine Komponente aus der Toolbox aus.
      • Verschieben Sie Ihr Mausgerät über einen Container in der Inhaltsstruktur, und wählen Sie aus Menü Symbol und wählen Sie aus Fügen Sie eine Komponente hinzu . Wählen Sie dann eine Komponente aus der Toolbox aus.
      Schwarzer Pfeil, der auf die Option + Inhalt hinzufügen in der Inhaltsstruktur neben dem Toolbox-Fenster zeigt, wobei die Registerkarte Komponenten ausgewählt ist.
    6. Konfigurieren Sie jetzt die Eigenschaften der Komponenten, die Sie gerade hinzugefügt haben.
      Das Konfigurieren von Komponenten bedeutet, sie an Ihre Anforderungen anzupassen. Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter Next Experience Komponenten.
      1. Wählen Sie die Komponente aus, die Sie konfigurieren möchten.
      2. Wählen Sie aus Konfigurieren Registerkarte im Konfigurationsbereich in UI Builder.
      3. Passen Sie an KomponenteneigenschaftenFür die Komponente.
        Sie können beispielsweise einen Namen für eine Schaltflächenkomponente hinzufügen. Einige Komponenten, z. B. Datenvisualisierungen, erfordern eine Datenquelle, bevor Sie die Eigenschaften konfigurieren können. Jede Komponente verfügt basierend auf den Anforderungen und Optionen für jede Komponente über unterschiedliche Konfigurationseigenschaften. Beispiel: Schaltfläche Die Komponentenkonfiguration ist einfach, während ein Liste Komponente erfordert weitere Konfiguration.
      4. Für Komponenten mit konfigurierbaren JSON-Eigenschaften können Sie verwenden UI BuilderLow-Code-JSON-Editor von , um Komponenteneigenschaften zu bearbeiten, ohne JSON-Code bearbeiten zu müssen.

        Die UI des JSON-Editors zeigt alle verfügbaren Eigenschaften an, auch Eigenschaften, die nicht in den Dummy-Daten oder definierten Werten definiert sind. Sie können Eigenschaften aktualisieren oder eigene anwenderdefinierte Eigenschaften im JSON-Editor hinzufügen. Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter Code mit dem Now Code-Editor bearbeiten (erweiterte Funktion).

        Hinweis:
        Der Low-Code-JSON-Editor ist nur für Eigenschaften verfügbar, die ein Schema haben und deren JSON-Eingabe mit dem genannten Schema übereinstimmt.

        Der Low-Code-JSON-Editor unterstützt einfache Objekte, einfache Array-Eigenschaften, komplexe Arrays und Arrays von Objekten und unterstützt teilweise komplexe Objekte. Bei komplexen Arrays können Sie Array-Elemente hinzufügen, löschen oder verschieben. Sie können auch auswählen Nicht festgelegte Elemente ausblenden Zum Ausblenden von Objekten mit leeren oder Null-Werten für eine vereinfachte Bearbeitungs-Experience.

        UI Builder Low-Code-JSON-Editor.
      5. Bei der Arbeit mit einer Containerkomponente können Sie einige Stile mithilfe der fließenden Bereiche bearbeiten.

        Wählen Sie aus Menü Symbol zum Anzeigen eines Menüs.

        Pfeil, der auf das Menüsymbol mit erweitertem Floating-Menü zeigt.

        Wählen Sie aus Layout , Größenanpassung , Oder Abstand Option zum Öffnen eines fließenden Bereichs mit den häufigsten angezeigten Optionen. Ziehen Sie den fließenden Bereich nach Bedarf an eine andere Position. Es kann jeweils nur ein fließender Bereich geöffnet sein.

        Layoutoptionen, die in einem fließenden Bereich angezeigt werden.
      Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter Next Experience Komponenten.
    7. Wahlweise: Wählen Sie aus Ereignisse Registerkarte, um Ihrer Komponente einen Ereignis-Handler hinzuzufügen.
      Fügen Sie einen Ereignis-Handler hinzu, um den Komponenten auf Ihrer Seite Aktionen hinzuzufügen. Beispielsweise ist eine Schaltflächenkomponente statisch und führt nichts aus, bis Sie eine Ereignisaktion daran binden, z. B. das Speichern eines Datensatzes. Für einige Komponenten wird keine Ereignisaktion angewendet, z. B. eine Überschriftenkomponente. Viele Komponenten erfordern jedoch, dass Sie Ihrer Komponente ein Ereignis zuordnen, damit sie tatsächlich eine Aktion ausführen kann. Siehe Binden Sie ein Ereignis an eine KomponenteWeitere Informationen zum Hinzufügen von Ereignis-Handlern zu Ihrer Komponente.
    8. Wahlweise: Sie können alle Stile für eine Komponente überschreiben, indem Sie einen CSS-Stil unter hinzufügen Stile Registerkarte.
      Weitere Informationen finden Sie unter Ändern Sie die Standarddarstellung von Komponenten.
      Hinweis:
      Stiländerungen wirken sich jeweils nur auf eine einzelne Komponente aus. Um den visuellen Stil aller Komponenten in Ihrer Experience zu ändern, müssen Sie ein Design auf Ihre Experience anwenden. Weitere Informationen finden Sie unter Visuellen Stil von UI Builder-Experiences verwalten.
    9. Wahlweise: Fügen Sie Ihrer Seite zusätzliche Container hinzu, um Ihre Komponenten auf organisierte Weise anzuzeigen.
      Beispielsweise könnte ein Container eine Überschriftenkomponente haben. Ein anderer Container darunter könnte eine Listenkomponente, eine Schaltflächenkomponente usw. enthalten.
      1. Wählen Sie aus + Oben im Container, um eine Containerkomponente vor der vorhandenen Komponente hinzuzufügen und auszuwählen + Unten in einer Komponente, um eine Containerkomponente danach einzufügen.
      2. Ziehen Sie eine Containerkomponente aus der Komponentenliste in Ihren vorhandenen Container auf der Seite. Halten Sie die obere Zeile des Containers gedrückt, um den neuen Container vor dem vorhandenen Container einzufügen, oder über die untere Zeile des vorhandenen Containers, um ihn danach hinzuzufügen.
    10. Wahlweise: Fügen Sie Ihrer Seite weitere Komponenten hinzu, indem Sie auswählen + Oben oder unten auf den Komponenten auf der Seite (die + Ändert sich in + Hinzufügen ).
      Plus-Zeichen oben und unten einer Komponente, um zusätzliche Komponenten hinzuzufügen.
      1. Wählen Sie aus + Oben in Ihrer Komponente, um eine Komponente vor der vorhandenen Komponente hinzuzufügen, oder wählen Sie aus + Unten in einer Komponente, um eine Komponente danach einzufügen.
      2. Ziehen Sie eine Komponente aus der Komponentenliste, um die Komponente vor oder nach einer vorhandenen Komponente einzufügen.
    11. Wahlweise: Damit ein modales Element angezeigt wird, wenn Sie eine Komponente wie eine Schaltfläche auswählen, müssen Sie das modale Element zuerst der Komponente hinzufügen.
      Ein modales Element ist ein Bestätigungs-Popup, das angezeigt wird, wenn Sie die Komponente auswählen. Wenn Sie beispielsweise eine Schaltflächenkomponente hinzufügen, die einen Datensatz löscht, fügen Sie ein Modal hinzu, um den Anwender zu bitten, den Datensatz zu löschen. Weitere Informationen finden Sie unter Erstellen Sie modale Elemente in UI Builder.
    12. Wählen Sie Aus Speichern Häufig auf Ihrer Seite, während Sie arbeiten.
    13. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie auswählen Vorschau Schaltfläche.

    Nächste Maßnahme

    Sie haben Komponenten auf Ihrer Seite hinzugefügt und konfiguriert. Weitere Informationen finden Sie unter Daten auf UI Builder-Seiten dynamisch verfügbar machen (erweiterte Funktion). Eine Datenressource in UI BuilderSind die Daten, die eine Seite abruft, um Inhalte in Komponenten anzuzeigen. Komponenten verwenden Datenressourcen, um Daten und Konfigurationen für verschiedene Experiences wiederzuverwenden und die Komponenten auf einer Seite dynamisch zu machen.

    Unterstützte Funktionen in UI BuilderKomponentenformeleditor

    Erfahren Sie mehr über die verschiedenen Funktionen, die in unterstützt werden UI BuilderKomponentenformeleditor.

    Die folgende Tabelle listet die Funktionen auf, die Sie in verwenden können UI BuilderKomponentenformeleditor. Weitere Informationen zum Komponentenformeleditor finden Sie unter Anpassen UI BuilderSeiten mit Komponenten.

    Tabelle : 1. Für Bedingungsgeneratoren verfügbare Operatoren
    Operator-Bezeichnung Beispielbedingung Entsprechender Abfrageoperator Beispielanfrage Beispielausgabe
    Alle leer [Kurzbeschreibung][ALL_EMPTY] ALL_LEER Short_descriptionALL_EMPTY Alle Datensätze, in denen kein Wert in vorhanden ist Kurzbeschreibung Feld.
    Alle gleich [Kurzbeschreibung][ALL_EQ][Netzwerkspeicher nicht verfügbar] ALL_EQ Short_description=Netzwerkspeicher nicht verfügbar Alle Datensätze, in denen der Wert für Kurzbeschreibung Feld ist gleich „Netzwerkspeicher ist nicht verfügbar“.
    Alle größer als [Impact][ALL_GT][2 – Mittel] > Impact>2 Alle Datensätze, in denen Auswirkung Feld hat einen Wert von 3: Niedrig
    Alle größer oder gleich [Impact][ALL_GTE][2 – Mittel] >= Auswirkung>=2 Alle Datensätze, in denen Auswirkung Feld hat einen Wert von 2: Mittel Oder 3: Niedrig .
    Alle kleiner als [Anzahl Neuzuweisungen][ALL_LT][2] < Reassignment_count<2 Alle Datensätze, in denen der Wert in Anzahl der Neuzuweisungen Feld ist eine beliebige Zahl kleiner als (aber ungleich) 2 .
    Alle kleiner als oder gleich [Anzahl Neuzuweisungen][ALL_LTE][2] <= Reassignment_count<=2 Alle Datensätze, in denen der Wert in Anzahl der Neuzuweisungen Feld ist eines der folgenden:
    • Eine Zahl kleiner als 2
    • 2
    Alle ungleich [Impact][ALL_NEQ][1 – hoch] != Auswirkung!=1 Alle Datensätze, in denen der Wert in Auswirkung Feld ist alles außer 1: Hoch .
    Nicht alle leer [Impact][ALL_NOTEMPTY] ALL_NOTEMPTY ImpactALL_NOTEMPTY Alle Datensätze, in denen Auswirkung Feld hat einen beliebigen Wert.
    Nicht alle von [Impact][ALL_NOTONEOF][1 – hoch, 2 – Mittel] ALL_NOTONEOF ImpactALL_NOTONEOF1,2 Alle Datensätze, in denen Auswirkung Feld wird mit einem beliebigen Wert ausgefüllt, außer mit den folgenden Werten:
    • 1 - Hoch
    • 2 - Mittel
    Alle eins von [Impact][ALL_ONEOF][1 – hoch, 2 – Mittel] ALL_ONEOF ImpactALL_ONEOF1,2 Alle Datensätze, in denen Auswirkung Feld wird mit einem der folgenden Werte ausgefüllt:
    • 1 - Hoch
    • 2 - Mittel
    Beliebig leer [Kurzbeschreibung][ANY_EMPTY] BELIEBIG_LEER Short_descriptionANY_EMPTY Jeder Datensatz, in dem kein Wert in vorhanden ist Kurzbeschreibung Feld.
    Beliebig gleich [Kurzbeschreibung][ANY_EQ][Netzwerkspeicher nicht verfügbar] BELIEBIG_EQ Short_description=Netzwerkspeicher nicht verfügbar Jeder Datensatz, in dem der Wert für Kurzbeschreibung Feld ist gleich „Netzwerkspeicher ist nicht verfügbar“.
    Beliebig größer als [Impact][ANY_GT][2 – Mittel] BELIEBIG_GT ImpactANY_GT2 Alle Datensätze, in denen Auswirkung Feld hat einen Wert von 3: Niedrig
    Beliebig größer als oder gleich [Impact][ANY_GTE][2 – Mittel] BELIEBIG_GTE ImpactANY_GTE2 Jeder Datensatz, in dem Auswirkung Feld hat einen Wert von 2: Mittel Oder 3: Niedrig .
    Kleiner als [Anzahl Neuzuweisungen][ANY_LT][2] BELIEBIG_LT Reassignation_countANY_LT2 Jeder Datensatz, in dem der Wert in Anzahl der Neuzuweisungen Feld ist eine beliebige Zahl kleiner als (aber ungleich) 2 .
    Beliebig kleiner als oder gleich [Anzahl Neuzuweisungen][ANY_LTE][2] BELIEBIG_LTE Reassignation_countANY_LTE2 Jeder Datensatz, in dem der Wert in Anzahl der Neuzuweisungen Feld ist eines der folgenden:
    • Eine Zahl kleiner als 2
    • 2
    Beliebig ungleich [Impact][ANY_NEQ][1 – hoch] BELIEBIG_NEQ ImpactANY_NEQ1 Jeder Datensatz, in dem der Wert in Auswirkung Feld ist alles außer 1: Hoch .
    Beliebig nicht leer [Impact][ANY_NOTEMPTY] BELIEBIG_NOTEMPTY ImpactANY_NOTEMPTY Jeder Datensatz, in dem Auswirkung Feld hat einen beliebigen Wert.
    Beliebig, nicht eins von [Impact][ANY_NOTONEOF][1 – hoch, 2 – Mittel] BELIEBIG_NOTONEOF ImpactANY_NOTONEOF1,2 Jeder Datensatz, in dem Auswirkung Feld wird mit einem beliebigen Wert ausgefüllt, außer mit den folgenden Werten:
    • 1 - Hoch
    • 2 - Mittel
    Beliebiger von [Impact][ANY_ONEOF][1 – hoch, 2 – Mittel] BELIEBIG_ONEOF ImpactANY_ONEOF1,2 Jeder Datensatz, in dem Auswirkung Feld wird mit einem der folgenden Werte ausgefüllt:
    • 1 - Hoch
    • 2 - Mittel
    VERKETTUNG CONCAT(Wert) VERKETTUNG CONCAT("Willkommen, ",@context.session.user.firstName) Erstellen Sie eine neue Zeichenfolge, die alle bereitgestellten Zeichenfolgen in einer kombiniert
    LEER LEER (Wert) LEER LEER(@context.session.user.roles) Gibt „wahr“ zurück, wenn der Wert null oder nicht definiert ist
    WENN WENN(wenn, dann, sonst) WENN IF(@context.props.bare,"bare Seite“,„nicht leere Seite“) Wenn die Bedingung „wahr“ ist, geben Sie den Wert dann zurück. Wenn die Bedingung „falsch“ ist, geben Sie den Wert „sonst“ zurück.
    LEN LEN(Liste) LEN LEN([1,2,3]) Gibt die Anzahl der Elemente im Array zurück
    Auswählen PICK(Array, Feld) Auswählen AUSWÄHLEN (@context.session.user.preferences,"name") Erstellt ein neues Array, in dem jedes Element aus dem Feld in jedem Element im Array ausgewählt wird. Wenn das Feld nicht vorhanden ist, ist das Element im neuen Array LEER
    Bereich BEREICH (von, bis) Bereich BEREICH (1,10) Erstellt ein Array von Zahlen, beginnend mit bis zu, und wird schrittweise erhöht
    Summe SUMME (Array) Summe SUMME([1,2,3]) Fügen Sie ab 0 den Zahlenwert jedes Elements im Array hinzu, und geben Sie die resultierende Summe zurück
    Übersetzen ÜBERSETZEN (Text) Übersetzen TRANSLATE("Willkommen zurück") Gibt die Zeichenfolge aus dem ersten Argument zurück, nachdem die im zweiten Argument angegebenen Zeichen in die im dritten Argument angegebenen Zeichen übersetzt wurden.
    Ist leer [Kurzbeschreibung][WHERE_EMPTY] WO_LEER Short_descriptionWHERE_EMPTY Extrahieren Sie Datensätze, bei denen kein Wert in vorhanden ist Kurzbeschreibung Feld.
    Wobei gleich [Kurzbeschreibung][WHERE_EQ][Netzwerkspeicher nicht verfügbar] WO_EQ Short_descriptionWHERE_EQNetwork-Speicher nicht verfügbar Datensätze extrahieren, bei denen Kurzbeschreibung Feld ist gleich „Netzwerkspeicher ist nicht verfügbar“.
    Wobei größer als ist [Impact][WHERE_GT][2 – Mittel] WO_GT ImpactWHERE_GT2 Datensätze extrahieren, bei denen Auswirkung Feld hat einen Wert von 3: Niedrig
    Wobei größer als oder gleich ist [Impact][WHERE_GTE][2 – Mittel] WO_GTE ImpactWHERE_GTE2 Datensätze extrahieren, bei denen Auswirkung Feld hat einen Wert von 2: Mittel Oder 3: Niedrig .
    Wobei kleiner als [Anzahl Neuzuweisungen][WHERE_LT][2] WO_LT Reassignation_CountWHERE_LT2 Extrahieren Sie Datensätze, in denen der Wert in enthalten ist Anzahl der Neuzuweisungen Feld ist eine beliebige Zahl kleiner als (aber ungleich) 2 .
    Wobei kleiner als oder gleich ist [Anzahl Neuzuweisungen][WHERE_LTE][2] WO_LTE Reassignation_CountWHERE_LTE2 Extrahieren Sie Datensätze, in denen der Wert in enthalten ist Anzahl der Neuzuweisungen Feld ist eines der folgenden:
    • Eine Zahl kleiner als 2
    • 2
    Wobei ungleich [Impact][WHERE_NEQ][1 – hoch] WO_NEQ ImpactWHERE_NEQ1 Extrahieren Sie Datensätze, in denen der Wert in enthalten ist Auswirkung Feld ist alles außer 1: Hoch .
    Wobei nicht leer ist [Impact][WO_NOTEMPTY] WO_NOTEMPTY ImpactWHERE_NOTEMPTY Datensätze extrahieren, bei denen Auswirkung Feld hat einen beliebigen Wert.
    Wobei nicht einer von [Impact][WHERE_NOTONEOF][1 – hoch, 2 – Mittel] WO_NOTONEOF ImpactWHERE_NOTONEOF1,2 Datensätze extrahieren, bei denen Auswirkung Feld wird mit einem beliebigen Wert ausgefüllt, außer mit den folgenden Werten:
    • 1 - Hoch
    • 2 - Mittel
    Wobei einer von [Impact][WHERE_ONEOF][1 – hoch, 2 – Mittel] WO_EINS VON ImpactWHERE_ONEOF1,2 Datensätze extrahieren, bei denen Auswirkung Feld wird mit einem der folgenden Werte ausgefüllt:
    • 1 - Hoch
    • 2 - Mittel