--- sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development Release : - yokohama ft:locale : - de-DE ft:publication_title : - Yokohama Erstellen oder ändern Sie Anwendungen ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Passen Sie die Seiten UI Builder mithilfe von Komponenten an ============================================================ Passen Sie die Seiten UI Builder mithilfe von Komponenten an {#ariaid-title1} ============================================================================= * Freigeben Version: Yokohama * * Aktualisiert 30. Januar 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 Minuten Lesedauer Erfahren Sie, was eine Komponente in UI Builderist. Sehen Sie sich auch an, wie -Komponenten in UI Builder funktionieren. Komponenten sind die Basiselemente Ihrer Seite UI Builder. Komponenten reichen von Kernelementen wie Schaltflächen und Bezeichnungen bis hin zu Komponenten für komplexere Erfahrungen wie Listen und Formulare. Sie können diese Komponenten Ihrer Seite UI Builder hinzufügen, um Ihre Arbeitsbereichs- oder Portal-Experience zu erstellen oder anzupassen. Beispiel: Hinzufügen einer Aktivitätenstrom- Komponente zu Ihrer Seite, mit der Anwender ihre Reiseanforderungsaktivität sehen können. Sie können Ihrer Seite UI Builder wie folgt Komponenten hinzufügen. {#work-components__addcomponentstable__entry__2} | Standort | Beispiel | |---------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------| | Direkt von einer Seite in UI Builder (Option 1) | Wählen Sie das Symbol zum Hinzufügen von Inhalten (Plus), wählen Sie die Registerkarte Komponenten und dann eine Komponente aus. | | Direkt von einer Seite in UI Builder (Option 2) | Wählen Sie bei einem Spaltenlayout oder einer Komponente das Symbol „Vor" (Plus) oder „Nach" (Plus) hinzufügen, und wählen Sie dann eine Komponente aus. | | Aus der Inhaltsstruktur in UI Builder | Wählen Sie in der Inhaltsstruktur + Inhalt hinzufügen und anschließend eine Komponente aus. | | Über das unverankerte Menü über der Seite in UI Builder | Wählen Sie in einem Spaltenlayout oder einer Komponente das Menüsymbol, dann Hinzufügen vor oder Hinzufügen nach, und wählen Sie dann eine Komponente aus. | [Tabelle : 1. Möglichkeiten zum Hinzufügen einer Komponente zu einer Seite] {#work-components__addcomponentstable} Spaltenlayouts in UI Builder {#work-components__section_krt_tdk_znb} -------------------------------------------------------------------- Fügen Sie Ihrer Seite UI Builder zuerst Spaltenlayouts und Spalten hinzu. Fügen Sie dann den Spalten in einem Spaltenlayout Komponenten hinzu, um Ihre Seite zu erstellen und anzupassen. Stellen Sie sich ein Spaltenlayout als einen definierten Teil des Bildschirms vor, dem Sie Komponenten wie Listen und Überschriften hinzufügen. Sie können beliebig viele Spaltenlayouts auf einer Seite UI Builder verwenden, mit bis zu sechs Spalten pro Spaltenlayout. Einer einzelnen Spalte können mehrere Komponenten hinzugefügt werden. Zeigen Sie die Struktur Ihrer Seite in der Inhaltsstruktur an. Weitere Informationen finden Sie unter [Spaltenlayouts](https://servicenow-prod.fluidtopics.net/tKEUQCHvqBYbAXwd89uDGw#column-layout "Spaltenlayouts werden zum Entwerfen und Organisieren von UI Builder -Seiten verwendet."). Konfigurieren Sie Komponenten in UI Builder {#work-components__config_components} --------------------------------------------------------------------------------- Es gibt drei Möglichkeiten, eine Komponente im Konfigurationsbereich zu konfigurieren. * Konfigurieren Sie die Komponenteneigenschaften. * Fügen Sie CSS-Stilüberschreibungen hinzu. * Richten Sie [Ereignishandler](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-event-handler-ui-builder "Eine Aktion, die ausgeführt wird, wenn ein Ereignis auftritt.") für die Komponenten ein. {#work-components__ul_lxw_c2k_znb} ![Registerkarten des Konfigurationsbereichs, die zum Konfigurieren, Formatieren und Hinzufügen von Ereignissen zu Komponenten verwendet werden.]() Registerkarte „Konfigurieren" : Die Komponenteneigenschaften variieren je nach Komponente. Die Konfiguration von Komponenten kann einfach sein, ebenso wie einfache Elemente wie Schaltflächen, Überschriften und Bezeichnungen. Komponenten wie Listen und Formulare erfordern eine umfangreiche Konfiguration. Wählen Sie für Symbol- und Bildkomponenten aus einer Vielzahl von Optionen aus, oder verwenden Sie ein anwenderdefiniertes Symbol oder Bild. Sie können Komponenteneigenschaften mit dem Low-Code-JSON-Editor von UI Builderändern. Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter [Next Experience-Komponenten](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?&query=&order_by=nameAsc&limit=120&offset=0&categories%5B%5D=uib_component&categories%5B%5D=uib_macroponent-component&categories%5B%5D=uib_facades). : Für jede Eigenschaft auf der Registerkarte „Komponentenkonfiguration" können Sie aus den folgenden Optionen auswählen. * Statisch: Verwenden Sie Daten aus einer Liste, oder geben Sie Ihre eigenen Daten ein. Die Daten stellen keine Verbindung zu einer externen Datenquelle her. * Dynamische [Datenbindung](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-data-binding-ui-builder "Prozess der Zuordnung von Daten zu einem UI-Element, das die Informationen anzeigt"): Eine Möglichkeit, eine Komponenteneigenschaft an eine Datenressource, eine Seiteneigenschaft oder einen Clientstatus zu binden. * Skript: Geben Sie JavaScript-Code ein, um einen Eigenschaftswert auszufüllen. {#work-components__ul_uh3_dh4_trb} Registerkarte „Stile". : Sie können die Cascading Style Sheets (CSS)-Stile für einzelne Komponenten ändern. Ändern Sie Rahmenfarben, Schriftgröße usw. Registerkarte „Events" : Konfigurieren Sie [Event-Zuordnungen](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-event-mapping-ui-builder "Prozess zum Identifizieren eines Ereignis-Handlers, der ausgeführt werden soll, wenn ein Ereignis auftritt.")auf Seiten- und Variantenebene. Fügen Sie außerdem gesendete Ereignisse und behandelte Ereignisse für Ihre Variante hinzu. Die komplexeren Experience-Komponenten stützen sich stark auf dynamische Daten, die von einer [Datenressource](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-data-resource-ui-builder "Eine dynamische, wiederverwendbare Methode zum Definieren, welche Daten für die Komponenten einer Seite abgerufen werden sollen.")bereitgestellt werden. Das Binden dynamischer Daten an eine Komponente ist eine wichtige Funktion. Sie stellen Daten aus Tabellen, Datensätzen oder anderen Elementen auf Ihrer Seite dynamisch bereit. Durch das Verfügbarmachen von Daten können Sie Ihre Komponenten wiederverwenden. Außerdem können Sie auf die Konfigurationsfelder zeigen, um Symboldaten oder Skriptoptionen für jedes Feld anzuzeigen. Während Sie auf der Seite Komponenten hinzufügen und konfigurieren, zeigt die Phase Ihre Arbeit. Wenn Sie Änderungen vornehmen und die Updates nicht in der Phase geladen werden, wählen Sie das Menüsymbol Öffnen und dann Entwickler \> Phase neu ladenaus. Wenn Sie die Phase neu laden, werden Ihre Änderungen zwar angezeigt, aber nicht gespeichert. Um Ihre Arbeit zu speichern, wählen Sie oben rechts Speichern. Komponentenvoreinstellungen in UI Builder {#work-components__section_cnm_cpt_25b} --------------------------------------------------------------------------------- Verwenden Sie [Komponentenvoreinstellungen](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-component-preset-ui-builder "Voreinstellungen wenden vordefinierte Konfigurationswerte und Ereigniszuordnungen auf Komponenten an. Voreinstellungen wenden vorgefertigte Konfigurationen auf Komponenteneigenschaften und Ereignishandler an. Voreinstellungen sind nur für bestimmte Komponenten verfügbar."), um Komponenten auf kompatiblen Seiten automatisch zu konfigurieren. Die Seitenvorlagen UI Builder enthalten Controller, die von Voreinstellungen zum Definieren von Komponentenkonfigurationswerten verwendet werden. Weitere Informationen finden Sie unter [Komponenten mithilfe von Voreinstellungen automatisch konfigurieren](https://servicenow-prod.fluidtopics.net/B3Ha6xhIEAa4DZDyJhbPmA#presets "Verwenden Sie Komponentenvoreinstellungen, um Komponenten auf kompatiblen Seiten automatisch zu konfigurieren."). Abschnitte mit Komponenteneigenschaften {#work-components__section_esm_5gk_dsb} ------------------------------------------------------------------------------- Komponenteneigenschaften sind in Abschnitte mit ähnlichen Eigenschaften gruppiert. Öffnen und schließen Sie Abschnitte, indem Sie die Pfeile rechts neben den Eigenschaftsüberschriften auswählen. UI Builder-Administratoren können auswählen, welche Komponentenkonfigurationseigenschaften basierend auf UI-Richtlinien angezeigt oder ausgeblendet werden. Komponentenformeleditor {#work-components__section_mkq_ydx_trb} --------------------------------------------------------------- Verwenden Sie den Komponentenformeln-Editor UI Builder im Konfigurationsbereich, um Formeln zu binden oder zu ändern. Sie können Text, Datenbindungen und/oder Formeln eingeben. Formeln können aus einer beliebigen Kombination der drei Eingabetypen bestehen. Der Komponentenformel-Editor unterstützt logische, arithmetische, Vergleichs-, Negations- und funktionale Transformationstypen. Jede Funktion, die dem Komponentenformel-Editor hinzugefügt wird, wird automatisch vervollständigt. Der Komponentenformel-Editor zeigt eine Bezeichnung für jede Eingabe der Funktion an, damit Sie wissen, welche Parameter jede Funktion benötigt. Weitere Informationen zu den unterstützten Funktionen im Komponentenformeleditor finden Sie unter [Unterstützte Funktionen im Formeleditor der Komponente UI Builder](https://servicenow-prod.fluidtopics.net/u0roCpbWC9yIy7XURU_kKw#uib_supported_functions "Erfahren Sie mehr über die verschiedenen Funktionen, die im Komponentenformel-Editor UI Builder unterstützt werden."). Komponenten-ID {#work-components__component_id} ----------------------------------------------- Verwenden Sie die Komponenten-ID, wenn Sie der Komponente ein Skript hinzufügen oder Daten binden, um auf die Komponente zu verweisen. Eine Komponenten-ID wird automatisch erstellt und basiert auf der Komponentenbezeichnung, wenn Sie einer Seite eine Komponente hinzufügen. Sie können die Komponenten-ID beliebig ändern, solange sie eindeutig ist. Wählen Sie im Konfigurationsbereich den Namen der Komponente aus, um die Komponenten-ID anzuzeigen. Transparenz der Komponenten {#work-components__section_ljd_ydk_znb} ------------------------------------------------------------------- Wählen Sie im Konfigurationsbereich das Augensymbol, um die Sichtbarkeit der Komponenten festzulegen. Die Transparenz der Komponente basiert auf einer Eigenschaft der Komponente selbst, nicht auf der Person, die sie anzeigt. Sie können eine Komponente basierend auf Bedingungen anzeigen oder ausblenden. Beispielsweise können Sie ein Bild ausblenden, wenn es einen defekten Link enthält. Sie können die Sichtbarkeit basierend auf der dynamischen Datenbindung oder durch Bearbeiten eines geskripteten Eigenschaftswerts festlegen. Legen Sie den Wert Test fest, um zu testen, was passiert, wenn die Sichtbarkeit auf „true", „false" oder „keine" festgelegt ist. Doppelte Komponenten {#work-components__section_fwf_bc5_x5b} ------------------------------------------------------------ Erstellen Sie eine exakte Kopie einer konfigurierten Komponente auf Ihrer Seite UI Builder, mit Ausnahme des Namens und der ID. Eine duplizierte Komponente kopiert alle Eigenschaften, Bindungen und Ereignisse. Weitere Informationen finden Sie unter [Duplizieren Sie eine Komponente](https://servicenow-prod.fluidtopics.net/fs2tCrbGQtnZcJ8Shkngww "Duplizieren Sie eine konfigurierte Komponente, um sie auf einer Seite wiederzuverwenden."). * **[Komponenten mithilfe von Voreinstellungen automatisch konfigurieren](https://servicenow-prod.fluidtopics.net/B3Ha6xhIEAa4DZDyJhbPmA#presets)** Verwenden Sie Komponentenvoreinstellungen, um Komponenten auf kompatiblen Seiten automatisch zu konfigurieren. * **[Erstellen Sie anwenderdefinierte Voreinstellungen für Komponenten](https://servicenow-prod.fluidtopics.net/DZP0hovweavPy791qtJM7Q)** Erstellen Sie Voreinstellungen, um Zeit zu sparen und Ihre Komponentenkonfigurationen für verschiedene Experiences wiederverwendbar zu machen. * **[Ändern Sie die Standarddarstellung von Komponenten](https://servicenow-prod.fluidtopics.net/TurKTKXf06hwCHKUEtlw8Q#add-styling-to-component)** Legen Sie die Stile für Komponenten und Wrapper fest, um die Standarddarstellung zu ändern. * **[Verbessern Sie die Barrierefreiheit mit der Fokusverwaltung](https://servicenow-prod.fluidtopics.net/Ri8adUtNb~1APRDFGkxCSQ)** Legen Sie den Fokus auf bestimmte Elemente, um sicherzustellen, dass Anwender mithilfe von Sprachausgabeprogrammen effektiv mit ihnen interagieren können. * **[Duplizieren Sie eine Komponente](https://servicenow-prod.fluidtopics.net/fs2tCrbGQtnZcJ8Shkngww)** Duplizieren Sie eine konfigurierte Komponente, um sie auf einer Seite wiederzuverwenden. * **[Zeigen Sie Inhalte dynamisch mit bedingten Renderern an](https://servicenow-prod.fluidtopics.net/PXJ5RyKJlDiW8IBNIb0tyQ)** Verwenden Sie die Komponente des bedingten Renderers, um Inhalte oder Komponenten basierend auf angegebenen Bedingungen anzuzeigen. * **[Seitensammlungen](https://servicenow-prod.fluidtopics.net/7uSU3XW3b_KngVeA6hhFPw)** Seitensammlungen sind Gruppen von Seiten, die in mehreren Experiences verwendet werden können. * **[Change-Datenvisualisierungen in UI Builder](https://servicenow-prod.fluidtopics.net/YmTuJ6ho3ioCPoZxFLR9rA)** Ändern Sie Datenvisualisierungen in Echtzeit mithilfe einer Dropdown-Liste, um eine Vorschau der Daten in Ihrer Experience anzuzeigen. * **[UI Builder-Seiten Inhalte mit Registerkarten hinzufügen](https://servicenow-prod.fluidtopics.net/~TOPz0YCFcCZ1oSqpUBSZg#tabs-components)** Verwenden Sie die Komponente „Registerkarten", um Seiten in UI BuilderInhalte in Registerkarten hinzuzufügen. * **[Fügen Sie eine kontextabhängige Sidebar hinzu](https://servicenow-prod.fluidtopics.net/NtlU61YPbJS6Wtm0DPHqNA)** Fügen Sie einer Seite mit UI Builder eine kontextbezogene Seitenleiste hinzu, um zugehörige Inhalte mithilfe einer vertikalen Registerkartenstruktur anzuzeigen. * **[Fügen Sie UI Builder-Seiten Formulare hinzu](https://servicenow-prod.fluidtopics.net/9MxXVqi0PmDXcwBw~k9Fhw)** Verwenden Sie die Formularkomponente, um ein oder mehrere Formulare zu Seiten UI Builder hinzuzufügen. * **[Erstellen Sie modale Elemente in UI Builder](https://servicenow-prod.fluidtopics.net/CHV1CGf67JwjIEppTWCysg)** Verwenden Sie modale Elemente in UI Builder mit Komponenten, um Warnungen oder Handlungsaufforderungen für einen Benutzer bereitzustellen. UI Builder enthält modale Elemente, um Zeit und Aufwand zu sparen. * **[Erweitern Sie Ihre UI-Experience mit Viewport-Komponenten.](https://servicenow-prod.fluidtopics.net/BaMRr0PjTGHNW7CZcgFmtg)** Viewports sind spezialisierte Komponenten, mit denen Sie Ihre Experience erweitern können, ohne Besitzer der übergeordneten Seite in UI Buildersein zu müssen. Sie können auf drei Arten mit Viewports arbeiten. Sie können einer Seite eine Viewport-Komponente oder eine Viewport-fähige Registerkarte oder der kontextbezogenen Sidebar-Komponente einen Viewport hinzufügen. * **[Erstellen Sie Popover in UI Builder](https://servicenow-prod.fluidtopics.net/29jtOj~HddcN6R72D~gnqw#uib-popover)** Verwenden Sie Popovers auf einer UI Builder-Seite, um kontextbezogene Informationen oder Funktionen zu überlagern und Anwendern beim Ausführen von Aufgaben zu helfen. * **[Erstellen Sie Dialogfelder ohne Modus in UI Builder](https://servicenow-prod.fluidtopics.net/wCfDBwkcM6_ADR0mOUlY3g)** Verwenden Sie Dialogfelder ohne Modus auf einer UI Builder-Seite, um ein unverankertes Fenster hinzuzufügen, in dem Sie mit dem Fensterinhalt und dem Seiteninhalt darunter interagieren können.