Fügen Sie Komponenten hinzu, und konfigurieren Sie sie

Erfahren Sie, wie Sie Ihrer Seite in UI BuilderKomponenten hinzufügen. Eine Seite wird durch Hinzufügen von Komponenten erstellt.

Vorbereitungen

Erforderliche Rolle: ui_builder_admin

Warum und wann dieser Vorgang ausgeführt wird

Komponenten sind die Bausteine, die zum Erstellen benutzerdefinierter Seiten in UI Builderverwendet werden. 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 in der Komponentendokumentation auf der ServiceNow Developer Site.

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenwählen.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
3. Öffnen oder erstellen Sie eine Seite.
   Wenn Sie eine vorhandene Seite öffnen, stellen Sie sicher, dass Sie sich im selben Bereich 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 Bereich fest, um anzugeben, auf welche Teile einer Anwendung andere Anwendungen zugreifen können. Der Anwendungsbereich schützt Daten und Anwendungsdateien. Weitere Informationen zum Anwendungsbereich finden Sie unter Erfahren Sie mehr über Sicherheit und Rollen.
4. Wählen Sie einen vorhandenen Container aus, oder erstellen Sie ein Spaltenlayout.
   Weitere Informationen finden Sie unter Organisieren Sie Komponenten auf UI Builder-Seiten.
5. Fügen Sie Ihrer Seite Komponenten hinzu.
   UI Builder enthält eine Bibliothek mit Komponenten, aus denen Sie auswählen können. Sie fügen Komponenten als Bausteine der Seite hinzu. Sie können beispielsweise eine Überschrift, Datenvisualisierungen usw. hinzufügen. Die folgende Tabelle zeigt die verschiedenen Möglichkeiten, wie Sie einer Seite eine Komponente hinzufügen können.

   So fügen Sie eine Komponente hinzu:	Vorgehensweise
   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.
   Schwebendes Menü über der Seite	Wählen Sie das schwebende Menü über Ihrer Komponente aus. Wählen Sie Hinzufügen vor oder Hinzufügen nach. Wählen Sie eine Komponente aus der Toolbox aus.
   Inhaltsstruktur	Sie können eine Komponente aus der Inhaltsstruktur auf zwei Arten hinzufügen. Wählen Sie unter einem Container in der Inhaltsstruktur +Komponente hinzufügen aus. Wählen Sie dann eine Komponente aus der Toolbox aus. Bewegen Sie Ihre Maus über einen Container in der Inhaltsstruktur, wählen Sie das Menüsymbol und dann Komponente hinzufügen aus. Wählen Sie dann eine Komponente aus der Toolbox aus.

6. Konfigurieren Sie nun die Eigenschaften der Komponenten, die Sie gerade hinzugefügt haben.
   Wenn Sie Komponenten konfigurieren, müssen Sie sie an Ihre Anforderungen anpassen. 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 im Konfigurationsbereich in UI Builderdie Registerkarte Konfigurieren aus.
   3. Passen Sie die Komponenteneigenschaften für die Komponente an.
      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 über unterschiedliche Konfigurationseigenschaften, die auf den Anforderungen und Optionen für jede Komponente basieren. Zum Beispiel ist die Konfiguration der Schaltflächenkomponente einfach, während eine Listenkomponente mehr Konfiguration erfordert.
   4. Für Komponenten mit konfigurierbaren JSON-Eigenschaften können Sie den Low-Code-JSON-Editor von UI Builderverwenden, um Komponenteneigenschaften zu bearbeiten, ohne den JSON-Code bearbeiten zu müssen.

      Die Benutzeroberfläche 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 Ihre eigenen benutzerdefinierten 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 über ein Schema verfügen und deren JSON-Eingabe mit diesem Schema übereinstimmt.

      Der Low-Code-JSON-Editor unterstützt einfache Objekte, einfache Array-Eigenschaften, komplexe Arrays, 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 Nicht festgelegte Elemente ausblenden auswählen, um Objekte mit leeren Werten oder Nullwerten auszublenden und die Bearbeitung zu vereinfachen.

      
   5. Wenn Sie mit einer Containerkomponente arbeiten, können Sie einige Stile mithilfe der schwebenden Fenster bearbeiten.

      Wählen Sie das Menüsymbol aus, um ein Menü anzuzeigen.

      

      Wählen Sie die Option Layout, Größeoder Abstand aus, um ein schwebendes Fenster mit den gängigsten Optionen zu öffnen. Ziehen Sie den schwebenden Bereich nach Bedarf an eine andere Position. Es kann jeweils nur ein schwebender Bereich geöffnet sein.

      
   Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter Next Experience Komponenten.
7. Wahlweise: Wählen Sie die Registerkarte Events aus, um Ihrer Komponente einen Event Handler hinzuzufügen.
   Fügen Sie einen Ereignishandler hinzu, um den Komponenten auf Ihrer Seite Aktionen hinzuzufügen. Beispielsweise ist eine Schaltflächenkomponente statisch und führt erst Aktionen aus, wenn Sie eine Event-Aktion an sie binden, z. B. das Speichern eines Datensatzes. Auf einige Komponenten wird keine Ereignisaktion angewendet, z. B. auf eine Überschriftenkomponente. Viele Komponenten erfordern jedoch, dass Sie Ihrer Komponente ein Ereignis zuordnen, damit sie tatsächlich eine Aktion ausführt. Weitere Informationen zum Hinzufügen von Event-Handlern zu Ihrer Komponente finden Sie unter Binden Sie ein Event an eine Komponente.
8. Wahlweise: Sie können alle Stile für eine Komponente überschreiben, indem Sie auf der Registerkarte Stile CSS-Stile hinzufügen.
   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 Verwalten Sie den visuellen Stil von UI Builder-Experiences.
9. Wahlweise: Fügen Sie Ihrer Seite zusätzliche Container hinzu, um Ihre Komponenten organisiert anzuzeigen.
   Zum Beispiel könnte ein Container eine Überschriftenkomponente haben. Ein weiterer Container darunter könnte eine Listenkomponente, eine Schaltflächenkomponente usw. enthalten.
   1. Wählen Sie das + am oberen Rand Ihres Containers aus, um eine Containerkomponente vor der vorhandenen Komponente hinzuzufügen, und wählen Sie das + am unteren Rand einer Komponente aus, um eine Containerkomponente nach ihr einzufügen.
   2. Ziehen Sie eine Containerkomponente aus der Liste „Komponenten“ in den vorhandenen Container auf der Seite. Halten Sie den Mauszeiger über die oberste Zeile des Containers, um den neuen Container vor dem vorhandenen Container einzufügen, oder über die untere Zeile des vorhandenen Containers, um ihn nach hinzuzufügen.
10. Wahlweise: Fügen Sie Ihrer Seite weitere Komponenten hinzu, indem Sie oben oder unten auf den Komponenten auf der Seite das + auswählen (das +ändert sich in + Hinzufügen).
    
    1. Wählen Sie das + am oberen Rand Ihrer Komponente aus, um eine Komponente vor der vorhandenen Komponente hinzuzufügen, oder wählen Sie das + am unteren Rand einer Komponente aus, 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 Modal angezeigt wird, wenn Sie eine Komponente wie eine Schaltfläche auswählen, müssen Sie das Modal zuerst der Komponente hinzufügen.
    Ein Modal ist ein Bestätigungsfenster, 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 Benutzer aufzufordern, das Löschen des Datensatzes zu bestätigen. Weitere Informationen finden Sie unter Erstellen Sie modale Elemente in UI Builder.
12. Wählen Sie während der Arbeit auf Ihrer Seite die Option „Häufig speichern “ aus.
13. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie auf die Schaltfläche Vorschau klicken.

Nächste Maßnahme

Sie haben auf Ihrer Seite Komponenten hinzugefügt und konfiguriert. Weitere Informationen finden Sie unter Daten auf UI Builder-Seiten dynamisch verfügbar machen (erweiterte Funktion). Eine Datenressource in UI Builder sind 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 gestalten.

Unterstützte Funktionen im Komponentenformel-Editor von UI Builder .

Erfahren Sie mehr über die verschiedenen Funktionen, die im Komponentenformel-Editor von UI Builder unterstützt werden.

In der folgenden Tabelle sind die Funktionen aufgelistet, die Sie im Komponentenformel-Editor von UI Builder verwenden können. Weitere Informationen zum Komponentenformel-Editor finden Sie unter Passen Sie UI Builder Seiten mithilfe von -Komponenten an.

Tabelle : 1. Für Bedingungsgeneratoren verfügbare Operatoren

Operatorbezeichnung	Beispielbedingung	Äquivalenter Abfrageoperator	Beispielanfrage	Beispielausgabe
Alle leer	[Kurzbeschreibung][ALL_EMPTY]	ALLE_LEER	short_descriptionALL_EMPTY	Alle Datensätze, in denen das Feld Kurzbeschreibung keinen Wert enthält.
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 das Feld „ Kurzbeschreibung “ „Netzwerkspeicher ist nicht verfügbar“ lautet.
Alle größer als	[Auswirkung][ALL_gt][2 – Mittel]	>	Auswirkung>2	Alle Datensätze, in denen das Feld Auswirkung den Wert 3 - Niedrigaufweist
Alle größer oder gleich	[Auswirkung][ALL_GTE][2 – Mittel]	>=	Auswirkung>=2	Alle Datensätze, in denen das Feld Auswirkung den Wert 2 – Mittel oder 3 – Niedrigaufweist.
Alle kleiner als	[Anzahl Neuzuweisungen][ALL_LT][2]	<	reassignment_count <2	Alle Datensätze, in denen der Wert im Feld Anzahl der Neuzuweisungen eine beliebige Zahl kleiner als (aber nicht gleich) 2ist.
Alle kleiner oder gleich	[Anzahl Neuzuweisungen][ALL_LTE][2]	<=	reassignment_count<=2	Alle Datensätze, in denen der Wert im Feld „Anzahl der Neuzuweisungen“ einer der folgenden ist: eine Zahl kleiner als 2 2
Nicht alle gleich	[Auswirkung][ALL_NEQ][1 – Hoch]	!=	Auswirkung! = 1	Alle Datensätze, in denen der Wert im Feld Auswirkung anders als 1 - Hochist.
Alle nicht leer	[Auswirkung] [ALL_NOTEMPTY]	ALL_NOTELEER	auswirkungALL_NOTEMPTY	Alle Datensätze, in denen das Feld Auswirkung einen beliebigen Wert hat.
Alle, nicht einer von	[Auswirkung][ALL_NOTONEOF][1 – Hoch, 2 – Mittel]	ALL_NOTONEOF	auswirkungALL_NOTONEOF1,2	Alle Datensätze, in denen das Feld Auswirkung mit etwas anderem als den folgenden Werten ausgefüllt wird: 1 - Hoch 2 - Mittel
Alle eine von	[Auswirkung][ALL_ONEOF][1 – Hoch, 2 – Mittel]	ALL_ONEVON	auswirkungALL_ONEOF1,2	Alle Datensätze, in denen das Feld Auswirkung mit einem der folgenden Werte ausgefüllt wird: 1 - Hoch 2 - Mittel
Beliebig leer	[Kurzbeschreibung][ANY_EMPTY]	ANY_EMPTY	short_descriptionANY_EMPTY	Jeder Datensatz, in dem das Feld Kurzbeschreibung keinen Wert enthält.
Beliebig gleich	[Kurzbeschreibung][ANY_EQ][Netzwerkspeicher nicht verfügbar]	ANY_EQ	short_description=Netzwerkspeicher nicht verfügbar	Jeder Datensatz, in dem der Wert für das Feld Kurzbeschreibung „Netzwerkspeicher ist nicht verfügbar“ lautet.
Beliebig größer als	[Auswirkung][ANY_gt][2 – Mittel]	ANY_G	auswirkungANY_gt2	Alle Datensätze, in denen das Feld Auswirkung den Wert 3 - Niedrigaufweist
Beliebig größer oder gleich	[Auswirkung][ANY_GTE][2 – Mittel]	ANY_GTE	auswirkungANY_GTE2	Jeder Datensatz, in dem das Feld Auswirkung den Wert 2 – Mittel oder 3 – Niedrigaufweist.
Beliebig kleiner als	[Anzahl Neuzuweisungen][ANY_LT][2]	ANY_LT	reassignment_countANY_LT2	Jeder Datensatz, in dem der Wert im Feld Anzahl der Neuzuweisungen eine beliebige Zahl kleiner als (aber nicht gleich) 2ist.
Beliebig kleiner oder gleich	[Anzahl Neuzuweisungen][ANY_LTE][2]	ANY_LTE	reassignment_countANY_LTE2	Jeder Datensatz, in dem der Wert im Feld Anzahl der Neuzuweisungen einer der folgenden ist: eine Zahl kleiner als 2 2
Beliebig ungleich	[Auswirkung][ANY_NEQ][1 – Hoch]	ANY_NEQ	auswirkungANY_NEQ1	Jeder Datensatz, in dem der Wert im Feld Auswirkung anders als 1 - Hochist.
Alle nicht leer	[Auswirkung] [ANY_NOTEMPTY]	ANY_NOTEMPTY	auswirkungANY_NOTEMPTY	Jeder Datensatz, in dem das Feld Auswirkung einen beliebigen Wert hat.
Beliebig, nicht einer von	[Auswirkung][ANY_NOTONEOF][1 – Hoch, 2 – Mittel]	ANY_NOTONEOF	auswirkungANY_NOTONEOF1,2	Jeder Datensatz, in dem das Feld Auswirkung mit Ausnahme der folgenden Werte ausgefüllt wird: 1 - Hoch 2 - Mittel
Eines der	[Auswirkung][ANY_ONEOF][1 – Hoch, 2 – Mittel]	ANY_ONEOF	auswirkungANY_ONEOF1,2	Jeder Datensatz, in dem das Feld Auswirkung mit einem der folgenden Werte ausgefüllt wird: 1 - Hoch 2 - Mittel
CONCAT	CONCAT (Wert)	CONCAT	CONCAT("Willkommen, ",@context.session.user.firstName)	Erstellen Sie eine neue Zeichenfolge, die alle angegebenen Zeichenfolgen zu einer kombiniert
LEER	LEER (Wert)	LEER	LEER (@context.session.user.roles)	Gibt „true“ zurück, wenn der Wert null oder undefiniert ist
IF	IF (wenn, dann, sonst)	IF	IF (@context.props.bare,"nackte Seite","nicht leere Seite")	Wenn die Bedingung erfüllt ist, geben Sie den Wert zurück. Wenn die Bedingung „falsch“ ist, geben Sie den Wert „else“ zurück.
LEN	LEN (Liste)	LEN	LEN([1,2,3])	Gibt die Anzahl der Elemente im Array zurück
Wählen Sie	PICK (Array, Feld)	Wählen Sie	PICK (@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	RANGE (von, bis)	Bereich	BEREICH (1,10)	Erstellt ein Array von Zahlen, beginnend mit von, bis zu, schrittweise erhöht
Summe	SUM (Array)	Summe	Summe([1,2,3])	Fügen Sie beginnend bei 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.
Wo leer	[Kurzbeschreibung][WHERE_EMPTY]	WO_LEER	short_descriptionWHERE_EMPTY	Extrahieren Sie Datensätze, in denen das Feld Kurzbeschreibung keinen Wert enthält.
Wobei gleich	[Kurzbeschreibung][WHERE_EQ][Netzwerkspeicher nicht verfügbar]	WHERE_EQ	short_descriptionWHERE_EQNetzwerkspeicher nicht verfügbar	Extrahieren Sie Datensätze, bei denen das Feld Kurzbeschreibung gleich „Netzwerkspeicher ist nicht verfügbar“ ist.
Wobei größer als	[Auswirkung][WHERE_gt][2 – Mittel]	WHERE_G	auswirkungWHERE_GT2	Extrahiert Datensätze, in denen das Feld Auswirkung den Wert 3 - Niedrighat
Wobei größer oder gleich	[Auswirkung][WHERE_GTE][2 – Mittel]	WHERE_GTE	auswirkungWHERE_GTE2	Extrahieren Sie Datensätze, in denen das Feld Auswirkung den Wert 2 – Mittel oder 3 – Niedrigaufweist.
Wobei kleiner als	[Anzahl Neuzuweisungen][WHERE_LT][2]	WHERE_LT	reassignment_countWHERE_LT2	Extrahiert Datensätze, in denen der Wert im Feld Anzahl der Neuzuweisungen eine beliebige Zahl kleiner als (aber nicht gleich) 2ist.
Wobei kleiner oder gleich	[Anzahl Neuzuweisungen][WHERE_LTE][2]	WHERE_LTE	reassignment_countWHERE_LTE2	Extrahieren Sie Datensätze, bei denen der Wert im Feld Anzahl der Neuzuweisungen einer der folgenden ist: eine Zahl kleiner als 2 2
Wenn nicht gleich	[Auswirkung][WHERE_NEQ][1 – Hoch]	WHERE_NEQ	auswirkungWHERE_NEQ1	Extrahieren Sie Datensätze, bei denen der Wert im Feld Auswirkung anders als 1 – Hochist.
Wobei nicht leer	[Auswirkung] [WHERE_NOTEMPTY]	WHERE_NOTEMPTY	auswirkungWHERE_NOTEMPTY	Extrahiert Datensätze, in denen das Feld Auswirkung einen beliebigen Wert hat.
Wobei nicht einer von	[Auswirkung][WHERE_NOTONEOF][1 – Hoch, 2 – Mittel]	WHERE_NOTONEOF	auswirkungWHERE_NOTONEOF1,2	Extrahieren Sie Datensätze, bei denen das Feld Auswirkung mit etwas anderem als den folgenden Werten ausgefüllt wird: 1 - Hoch 2 - Mittel
Wobei einer von	[Auswirkung][WHERE_ONEOF][1 – Hoch, 2 – Mittel]	WHERE_ONEOF	auswirkungWHERE_ONEOF1,2	Extrahieren Sie Datensätze, bei denen das Feld Auswirkung mit einem der folgenden Werte ausgefüllt wird: 1 - Hoch 2 - Mittel