Komponenten hinzufügen und konfigurieren
Erfahren Sie, wie Sie Ihrer Seite in UI BuilderKomponenten hinzufügen. Eine Seite wird durch das 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 anwenderdefinierter 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 Developer Site ServiceNow.
Prozedur
-
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 Ihrer Seite hinzu. Sie können beispielsweise eine Überschrift, Datenvisualisierungen usw. hinzufügen. Die folgende Tabelle zeigt die verschiedenen Möglichkeiten zum Hinzufügen einer Komponente zu einer Seite.
Zum Hinzufügen einer Komponente Vorgehensweise Direkt von Ihrer Seite aus Wählen Sie auf Ihrer Seite + und dann eine Komponente aus der Toolbox aus. Sie können nach einer Komponente suchen oder durch die Liste scrollen. Schwebendes Menü über Seite Wählen Sie das unverankerte Menü über Ihrer Komponente aus. - Wählen Sie Vor dem hinzufügen oder Nach hinzufügen.
- Wählen Sie eine Komponente aus der Toolbox.
Inhaltsstruktur Sie können eine Komponente auf folgende zwei Arten aus der Inhaltsstruktur hinzufügen. - Wählen Sie unter einem Container in der Inhaltsstruktur die Option +Inhalt hinzufügen aus. Wählen Sie dann eine Komponente aus der Toolbox aus.
- Bewegen Sie die Maus über einen Container in der Inhaltsstruktur, wählen Sie das Menüsymbol und dann Komponente hinzufügen. Wählen Sie dann eine Komponente aus der Toolbox aus.
-
Konfigurieren Sie nun die Eigenschaften der soeben hinzugefügten Komponenten.
Wenn Sie Komponenten konfigurieren, können Sie sie an Ihre Bedürfnisse anpassen. Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter Next Experience Komponenten.
-
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 JSON-Editor-UI zeigt alle verfügbaren Eigenschaften an, auch Eigenschaften, die nicht in den Dummy-Daten oder definierten Werten definiert sind. Im JSON-Editor können Sie Eigenschaften aktualisieren oder eigene anwenderdefinierte Eigenschaften 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 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 oder Null-Werten auszublenden und die Bearbeitung zu vereinfachen.
-
Wenn Sie mit einer Containerkomponente arbeiten, können Sie einige Stile mithilfe der unverankerten Bereiche bearbeiten.
Wählen Sie das Menüsymbol, um ein Menü anzuzeigen.
Wählen Sie die Option Layout, Größeoder Abstand aus, um ein unverankertes Fenster mit den gängigsten Optionen zu öffnen. Ziehen Sie den unverankerten Bereich bei Bedarf an einen anderen Ort. Es kann jeweils nur ein unverankerter Bereich geöffnet sein.
Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter Next Experience Komponenten. -
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.
- Wahlweise:
Fügen Sie Ihrer Seite weitere Komponenten hinzu, indem Sie oben oder unten neben den Komponenten auf der Seite das + auswählen (das +ändert sich in + Hinzufügen).
- 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, um eine Komponente danach einzufügen.
- Ziehen Sie eine Komponente aus der Komponentenliste, um die Komponente vor oder nach einer vorhandenen Komponente einzufügen.
Nächste Maßnahme
Sie haben auf Ihrer Seite Komponenten hinzugefügt und konfiguriert. Weitere Informationen finden Sie unter Daten in 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 in verschiedenen Experiences wiederzuverwenden und die Komponenten auf einer Seite dynamisch zu machen.
Unterstützte Funktionen im Formeleditor der Komponente UI Builder
Erfahren Sie mehr über die verschiedenen Funktionen, die im Komponentenformel-Editor UI Builder unterstützt werden.
In der folgenden Tabelle sind die Funktionen aufgeführt, die Sie im Formeleditor der Komponente UI Builder verwenden können. Weitere Informationen zum Komponentenformeleditor finden Sie unter Passen Sie die Seiten UI Builder mithilfe von Komponenten an.
| Operator-Bezeichnung | Beispielbedingung | Entsprechender Abfrageoperator | Beispielanfrage | Beispielausgabe |
|---|---|---|---|---|
| Alle leer | [Kurzbeschreibung][ALL_EMPTY] | ALL_EMPTY | short_descriptionALL_EMPTY | Alle Datensätze, in denen im Feld Kurzbeschreibung kein Wert angegeben ist. |
| 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 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 als oder gleich | [Auswirkung][ALL_GTE][2 – Mittel] | >= | Auswirkung>=2 | Alle Datensätze, in denen das Feld „Auswirkung “ einen Wert von 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 (aber nicht gleich) 2ist. |
| Alle kleiner als 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 Werte ist:
|
| Nicht alle gleich | [Auswirkung][ALL_NEQ][1 – Hoch] | != | Auswirkung!=1 | Alle Datensätze, in denen der Wert im Feld „ Auswirkung “ etwas anderes als „ 1 – Hoch“ ist. |
| Nicht alle leer | [Auswirkung][ALL_NOTEMPTY] | ALL_NOTEMPTY | ImpactALL_NOTEMPTY | Alle Datensätze, in denen das Feld „Auswirkung “ einen Wert enthält. |
| Alle, nicht einer von | [Auswirkung][ALL_NOTONEOF][1 – Hoch, 2 – Mittel] | ALL_NOTONEOF | ImpactALL_NOTONEOF1,2 | Alle Datensätze, in denen das Feld „ Auswirkung “ mit einem beliebigen Wert außer den folgenden Werten gefüllt ist:
|
| Alle eins von | [Auswirkung][ALL_ONEOF][1 – Hoch, 2 – Mittel] | ALL_ONEOF | ImpactALL_ONEOF1,2 | Alle Datensätze, in denen das Feld „ Auswirkung “ mit einem der folgenden Werte gefüllt ist:
|
| Beliebig leer | [Kurzbeschreibung][ANY_EMPTY] | ANY_EMPTY | short_descriptionANY_EMPTY | Beliebiger Datensatz, in dem im Feld Kurzbeschreibung kein Wert angegeben ist. |
| 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 mit „Netzwerkspeicher nicht verfügbar“ übereinstimmt. |
| Beliebiger größer als | [Auswirkung][ANY_gt][2 – Mittel] | ANY_gt | ImpactANY_gt2 | Alle Datensätze, in denen das Feld „ Auswirkung “ den Wert 3 – Niedrigaufweist |
| Beliebig größer als oder gleich | [Auswirkung][ANY_GTE][2 – Mittel] | ANY_GTE | ImpactANY_GTE2 | Jeder Datensatz, in dem das Feld „ Auswirkung “ einen Wert von 2 – Mittel oder 3 – Niedrigaufweist. |
| Beliebiger Wert 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. |
| Beliebiger kleiner als 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 Werte ist:
|
| Beliebige ungleiche Werte | [Auswirkung][ANY_NEQ][1 – Hoch] | ANY_NEQ | ImpactANY_NEQ1 | Jeder Datensatz, in dem der Wert im Feld „ Auswirkung “ einen anderen Wert als 1 – Hochaufweist. |
| Beliebiger, nicht leerer | [Auswirkung][ANY_NOTEMPTY] | ANY_NOTEMPTY | ImpactANY_NOTEMPTY | Beliebiger Datensatz, in dem das Feld „ Auswirkung “ einen beliebigen Wert enthält. |
| Beliebiger, nicht einer von | [Auswirkung][ANY_NOTONEOF][1 – Hoch, 2 – Mittel] | ANY_NOTONEOF | ImpactANY_NOTONEOF1,2 | Jeder Datensatz, in dem das Feld „ Auswirkung “ mit einem beliebigen Wert außer den folgenden Werten gefüllt wird:
|
| Beliebiger von | [Auswirkung][ANY_ONEOF][1 – Hoch, 2 – Mittel] | ANY_ONEOF | ImpactANY_ONEOF1,2 | Jeder Datensatz, in dem das Feld „ Auswirkung “ mit einem der folgenden Werte gefüllt wird:
|
| CONCAT | CONCAT(Wert) | CONCAT | CONCAT("Willkommen, ",@context.session.user.firstName) | Erstellen Sie eine neue Zeichenfolge, die alle bereitgestellten Zeichenfolgen zu einer kombiniert |
| LEER | LEER (Wert) | LEER | LEER (@context.session.user.roles) | Gibt „wahr“ zurück, wenn der Wert NULL oder nicht definiert ist |
| IF | IF(if, dann, sonst) | IF | IF(@context.props.bare,"bare Seite","nicht leere Seite") | Wenn die Bedingung „wahr“ ist, wird der Wert zurückgegeben. Wenn die Bedingung „falsch“ ist, wird der sonst zurückgegebene Wert zurückgegeben. |
| LEN | LEN (Liste) | LEN | LEN([1,2,3]) | Gibt die Anzahl der Elemente im Array zurück |
| Auswählen | AUSWÄHLEN(Array, Feld) | Auswählen | PICK (@context.session.user.preferences,"name") | Erstellt ein neues Array, in dem jedes Element aus einem 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 von bis zu, und wird Schritt für Schritt erhöht |
| Summe | Summe (Array) | Summe | SUMME([1,2,3]) | Beginnend bei 0, addieren Sie den Zahlenwert jedes Elements im Array, 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. |
| Wobei leer | [Kurzbeschreibung][WHERE_EMPTY] | WHERE_EMPTY | short_descriptionWHERE_LEER | Extrahieren Sie Datensätze, bei denen das Feld Kurzbeschreibung keinen Wert enthält. |
| Wenn 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 den Wert „Netzwerkspeicher ist nicht verfügbar“ aufweist. |
| Wobei größer als | [Auswirkung][WHERE_gt][2 – Mittel] | WHERE_gt | ImpactWhere_gt2 | Extrahieren Sie Datensätze, bei denen das Feld „ Auswirkung “ den Wert „ 3 - Niedrig“aufweist |
| Wobei größer oder gleich | [Auswirkung][WHERE_GTE][2 – Mittel] | WHERE_GTE | ImpactWHERE_GTE2 | Extrahieren Sie Datensätze, bei denen das Feld Auswirkung den Wert 2 – Mittel oder 3 – Niedrigaufweist. |
| Wobei kleiner als | [Anzahl Neuzuweisungen][WHERE_LT][2] | WHERE_LT | reassignment_countWHERE_LT2 | Extrahieren Sie Datensätze, bei denen der Wert im Feld „Anzahl der Neuzuweisungen “ eine beliebige Zahl kleiner (aber nicht gleich) 2ist. |
| Wobei kleiner als 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 Werte ist:
|
| Wobei ungleich | [Auswirkung][WHERE_NEQ][1 – Hoch] | WHERE_NEQ | ImpactWHERE_NEQ1 | Extrahieren Sie Datensätze, bei denen der Wert im Feld „ Auswirkung “ etwas anderes als 1 – Hochist. |
| Wobei nicht leer | [Auswirkung][WHERE_NOTEMPTY] | WHERE_NOTEMPTY | ImpactWHERE_NOTEMPTY | Extrahieren Sie Datensätze, bei denen das Feld „ Auswirkung “ einen beliebigen Wert aufweist. |
| Wobei keiner von | [Auswirkung][WHERE_NOTONEOF][1 – Hoch, 2 – Mittel] | WHERE_NOTONEOF | ImpactWHERE_NOTONEOF1,2 | Extrahieren Sie Datensätze, bei denen das Feld „ Auswirkung “ mit einem beliebigen Wert außer den folgenden Werten gefüllt ist:
|
| Wobei einer von | [Auswirkung][WHERE_ONEOF][1 – Hoch, 2 – Mittel] | WHERE_ONEOF | ImpactWHERE_ONEOF1,2 | Extrahieren Sie Datensätze, bei denen das Feld „ Auswirkung “ mit einem der folgenden Werte gefüllt ist:
|