--- 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 --- UI Builder-Seiten Inhalte mit Registerkarten hinzufügen ======================================================= UI Builder-Seiten Inhalte mit Registerkarten hinzufügen {#ariaid-title1} ======================================================================== * Freigeben Version: Yokohama * * Aktualisiert 30. Januar 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 8 Minuten Lesedauer Verwenden Sie die Komponente „Registerkarten", um Seiten in UI BuilderInhalte in Registerkarten hinzuzufügen. Erstellen Sie zusätzliche Navigation auf Ihrer Seite UI Builder, indem Sie Ihrer Seite eine Registerkartenkomponente hinzufügen. Verwenden Sie die Registerkartenkomponente, um Komponenten innerhalb von Registerkarten auf Ihrer Seite zu verschachteln. Registerkarten können entweder als horizontale Registerkarten oben im Inhalt oder als vertikale Registerkarten links oder rechts vom Inhalt konfiguriert werden. Abbildung : 1. Beispiel für Registerkartenkomponente Registerkarten können im Konfigurationsbereich organisiert werden, um ihre Anzeige auf der Seite UI Builder neu zu sortieren. Fügen Sie Registerkarten anwenderdefinierte Bezeichnungen und Symbole hinzu, um eindeutige visuelle Bezeichner für die Navigation zwischen Registerkarten bereitzustellen. Diese Änderungen können in Echtzeit angezeigt werden, wenn Sie die Komponente „Registerkarten" bearbeiten. Sie können Ihrer Seite UI Builder eine der folgenden Arten von Registerkarten hinzufügen: * Leere Container-Registerkarte * [Registerkarte „Repeater".](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-repeater-ui-builder "In UI Builder ist ein Repeater eine Komponente, die als einfache Schleife fungiert und die von Ihnen in mehreren Komponenten angegebenen Daten wiederholt. Repeater verwenden ein Array oder ein Array von Objekten. Repeater binden Werte an eine Daten-Array-Eigenschaft. Beispiel: [{\"task\": \"A\"},{\"task\": \"B\"}] wiederholt den darin enthaltenen Inhalt zweimal.") * Registerkarte „Zugehörige Liste". * Registerkarten der Seitensammlung {#tabs-components__ul_anm_nst_c5b} Die Registerkartenkomponente unterstützt eine beliebige Kombination aus statischen Registerkarten, wiederholten Registerkarten, Registerkarten für zugehörige Listen und Registerkarten für Seitensammlungen. Alternativ können Sie weiterhin den Registerkartenmodus „Viewport" verwenden, um eine Reihe von Viewports hinzuzufügen. Fügen Sie leere Container-Registerkarten hinzu {#ariaid-title2} --------------------------------------------------------------- Verwenden Sie eine leere Containerregisterkarte, um manuell einen statischen Satz von Registerkarten auf Ihrer Seite zu erstellen. ### Vorbereitungen Erforderliche Rolle: Administrator ### Prozedur 1. Navigieren zu AlleNow-Experience-FrameworkUI Builder. 2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen ErstellenExperience. Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. Erstellen oder öffnen Sie eine Seite oder Seitenvariante. Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter [Seite in UI Builder erstellen](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen."). 4. Wählen Sie in der Phase die Schaltfläche + Inhalt hinzufügen aus, um die Toolbox zu öffnen. 5. Wählen Sie ein Einzelspalten -Layout aus. 6. Wählen Sie als Nächstes das Symbol + in der Spalte aus, um die Toolbox zu öffnen. 7. Fügen Sie Ihrer Seite eine Registerkarten -Komponente hinzu. Weitere Informationen zum Hinzufügen von Komponenten zu einer Seite finden Sie unter [Komponenten hinzufügen und konfigurieren](https://servicenow-prod.fluidtopics.net/u0roCpbWC9yIy7XURU_kKw#add-components "Erfahren Sie, wie Sie Ihrer Seite in UI BuilderKomponenten hinzufügen. Eine Seite wird durch das Hinzufügen von Komponenten erstellt."). 8. Wählen Sie in der Phase die Registerkarte + Registerkarte hinzufügen aus. 9. Wählen Sie Aus einem leeren Container starten aus. 10. Wählen Sie Weiter. 11. Füllen Sie die Felder des Formulars aus. {#add-a-tab-component__table_usy_s1c_wtb__entry__2} | Feld | Beschreibung | |---------------------------|---------------------------------------------------------------------------------------------------------| | Registerkartenbezeichnung | Bezeichnung für die Registerkarte, die auf Ihrer Seite angezeigt werden soll. | | Symbol | Symbol, das neben der Registerkartenbezeichnung angezeigt werden soll. Symbole sind nicht erforderlich. | | Registerkarte ausblenden. | Ob die Registerkarte ausgeblendet oder angezeigt werden soll. | [Tabelle : 1. Formular „Registerkarteneinstellungen".] {#add-a-tab-component__table_usy_s1c_wtb} 12. Wählen Sie Erstellen aus. Die neue Registerkarte wird in der Komponente „Registerkarten" angezeigt. 13. Wählen Sie die neue Registerkarte aus. 14. Wählen Sie das Symbol + aus. 15. Wählen Sie die Komponente aus, die Sie der Registerkarte hinzufügen möchten. Komponenten werden unter der Registerkarte angezeigt, auf der sie in der Inhaltsstruktur verschachtelt sind. Weitere Informationen finden Sie unter [Komponenten hinzufügen und konfigurieren](https://servicenow-prod.fluidtopics.net/u0roCpbWC9yIy7XURU_kKw#add-components "Erfahren Sie, wie Sie Ihrer Seite in UI BuilderKomponenten hinzufügen. Eine Seite wird durch das Hinzufügen von Komponenten erstellt."). ### Ergebnisse Ihre Seite zeigt die beiden von Ihnen erstellten Registerkarten. Wählen Sie die einzelnen Registerkarten aus, um sie weiter zu konfigurieren, Stile oder einen Ereignishandler hinzuzufügen. Weitere Informationen zu Stilen finden Sie unter [Ä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."). Weitere Informationen zum Hinzufügen eines Ereignishandlers finden Sie unter [Verwalten Sie -Aktionen auf UI Builder-Seiten](https://servicenow-prod.fluidtopics.net/0kWZk6GWAQYP8sM~DoLXGA "Erfahren Sie, wie Sie mit Ereignissen arbeiten, um Komponenten, Seiten, Datenressourcen und deklarativen Aktionen in UI BuilderAktionen hinzuzufügen."). Fügen Sie Repeater-Registerkarten hinzu {#ariaid-title3} -------------------------------------------------------- Verwenden Sie die Komponente Registerkarten, um einen Satz von Repeater-Registerkarten zu erstellen, indem Sie Registerkarten mit einem Daten-Array verknüpfen. ### Vorbereitungen Erforderliche Rolle: Administrator ### Warum und wann dieser Vorgang ausgeführt wird Sie können [Repeater](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-repeater-ui-builder "In UI Builder ist ein Repeater eine Komponente, die als einfache Schleife fungiert und die von Ihnen in mehreren Komponenten angegebenen Daten wiederholt. Repeater verwenden ein Array oder ein Array von Objekten. Repeater binden Werte an eine Daten-Array-Eigenschaft. Beispiel: [{\"task\": \"A\"},{\"task\": \"B\"}] wiederholt den darin enthaltenen Inhalt zweimal.") -Registerkarten verwenden, um mehrere Registerkarten basierend auf dem von Ihnen bereitgestellten Daten-Array zu erstellen. Sie können die Felder Symbol, Bezeichnung, Anzahl und als Schlüssel im Objekt übergeben. Verwenden Sie die Bezeichnungstaste, um Registerkarten Namen hinzuzufügen. Verwenden Sie den Feldschlüssel, um Informationen an Repeater-Registerkarten zu übergeben. Sie können einen Daten-Broker, Client-Status oder ein Client-Skript an den Daten-Array-Anbieter binden, um das Array von Objekten mit dem richtigen Schema zurückzugeben. ### Prozedur 1. Navigieren zu AlleNow-Experience-FrameworkUI Builder. 2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen ErstellenExperience. Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. Erstellen oder öffnen Sie eine Seite oder Seitenvariante. Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter [Seite in UI Builder erstellen](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen."). 4. Wählen Sie in der Phase die Schaltfläche + Inhalt hinzufügen aus, um die Toolbox zu öffnen. 5. Wählen Sie ein Einzelspalten -Layout aus. 6. Wählen Sie als Nächstes das Symbol + in der Spalte aus, um die Toolbox zu öffnen. 7. Fügen Sie Ihrer Seite eine Registerkarten -Komponente hinzu. Weitere Informationen zum Hinzufügen von Komponenten zu einer Seite finden Sie unter [Komponenten hinzufügen und konfigurieren](https://servicenow-prod.fluidtopics.net/u0roCpbWC9yIy7XURU_kKw#add-components "Erfahren Sie, wie Sie Ihrer Seite in UI BuilderKomponenten hinzufügen. Eine Seite wird durch das Hinzufügen von Komponenten erstellt."). 8. Wählen Sie in der Phase die Registerkarte + Registerkarte hinzufügen aus. 9. Wählen Sie Repeater verwenden aus. 10. Wählen Sie Weiter. 11. Geben Sie im Feld Bezeichnung der Platzhalter-Registerkarte eine Bezeichnung für die Repeater-Registerkarte ein. Diese Bezeichnung ist der ersten Repeater-Registerkarte zugewiesen und die einzige Registerkarte, die in der Seitenvorschau angezeigt wird. 12. Wählen Sie Bearbeiten im Feld Daten-Array. 13. Konfigurieren Sie das Daten-Array im JSON-Editor. {#add-repeater-tab__table_spf_5sb_5kb__entry__3} | Key | Datentyp | Beschreibung | |--------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | icon | Zeichenfolge | Name des Symbols, das in UI Builderangezeigt wird. | | label | Zeichenfolge | Erforderlich. Anzeigename der Registerkarte in UI Builder. | | count | Nummer | Wert, der auf der Registerkartenbezeichnung angegeben werden soll. Dynamisch an einen Daten-Broker oder ein Client-Skript binden, das in der Bezeichnung angezeigt wird. | | Felder | Objekt | Objekt, das zum Speichern von Informationen und zur Weitergabe an die Komponenten auf den Registerkarten verwendet werden kann. | [ ] {#add-repeater-tab__table_spf_5sb_5kb} 14. Wählen Sie Übernehmen. Das Feld „Daten-Array" zeigt die Konfiguration des Daten-Arrays an. 15. Wählen Sie Erstellen aus. Die neue Repeater-Registerkarte wird auf der Seite und in der Inhaltsstruktur angezeigt. 16. Wählen Sie Speichern. 17. Fügen Sie der Registerkarte „Repeater" Komponenten hinzu. 18. Wählen Sie ![die Schaltfläche Vorschau, mit der Ihre Seite zur Laufzeit geöffnet wird. Dies ist eine Vorschau der Darstellung der Seite auf einer Webseite.]() um zu überprüfen, ob die Repeater-Registerkarten auf Ihrer Seite ordnungsgemäß angezeigt werden. Fügen Sie Registerkarten für zugehörige Listen hinzu {#ariaid-title4} --------------------------------------------------------------------- Erstellen Sie eine Reihe von Registerkarten auf einer Seite, indem Sie eine Verknüpfung zu einer zugehörigen Liste erstellen. ### Vorbereitungen Erforderliche Rolle: Administrator ### Warum und wann dieser Vorgang ausgeführt wird Die Registerkarte „Zugehörige Liste" füllt die Registerkarten automatisch basierend auf dem Datensatz, der auf Ihrer Seite angezeigt wird. Standardmäßig lauten die zugehörigen Listen für die Benutzertabelle Rollen, Gruppen, Delegierteund Sichtbarkeitsdomänen. Wenn auf Ihrer Seite ein Anwenderdatensatz angezeigt wird, werden durch das Erstellen einer Registerkarte für zugehörige Listen alle vier zugehörigen Listen als Registerkarten auf Ihrer Seite hinzugefügt. Sie können eine Vorschau der Seite anzeigen, um die hinzugefügten zugehörigen Listen anzuzeigen. Zum Erstellen von Registerkarten für zugehörige Listen ist ein Datensatz-Controller erforderlich. Weitere Informationen zum Hinzufügen eines Controllers zu Ihrer Seite finden Sie unter [Daten mithilfe von Controllern an Seiten UI Builder binden (erweiterte Funktion)](https://servicenow-prod.fluidtopics.net/ZUrgQhS6trKSm32SOXgDaA#controllers "Controller vereinfachen die Verknüpfung von Daten und Ereignislogik, um Komponentenvoreinstellungen in UI Builderzu aktivieren."). ### Prozedur 1. Navigieren zu AlleNow-Experience-FrameworkUI Builder. 2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen ErstellenExperience. Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. Erstellen oder öffnen Sie eine Seite oder Seitenvariante. Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter [Seite in UI Builder erstellen](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen."). 4. Wählen Sie in der Phase die Schaltfläche + Inhalt hinzufügen aus, um die Toolbox zu öffnen. 5. Wählen Sie ein Einzelspalten -Layout aus. 6. Wählen Sie als Nächstes das Symbol + in der Spalte aus, um die Toolbox zu öffnen. 7. Fügen Sie Ihrer Seite eine Registerkarten -Komponente hinzu. Weitere Informationen zum Hinzufügen von Komponenten zu einer Seite finden Sie unter [Komponenten hinzufügen und konfigurieren](https://servicenow-prod.fluidtopics.net/u0roCpbWC9yIy7XURU_kKw#add-components "Erfahren Sie, wie Sie Ihrer Seite in UI BuilderKomponenten hinzufügen. Eine Seite wird durch das Hinzufügen von Komponenten erstellt."). 8. Wählen Sie in der Phase die Registerkarte + Registerkarte hinzufügen aus. 9. Wählen Sie Zugehörige Listen für einen Datensatz anzeigen. 10. Wählen Sie Weiter. 11. Füllen Sie die Felder des Formulars aus. {#add-related-list-tab__table_usy_s1c_wtb__entry__2} | Feld | Beschreibung | |------------------------------------------|----------------------------------------------------------------------------------------------| | Bezeichnung der Platzhalterregisterkarte | Platzhalterbezeichnung, die auf der Vorschauregisterkarte Ihrer Seite angezeigt werden soll. | | Registerkarte ausblenden. | Gibt an, ob Sie die Registerkarte ein- oder ausblenden möchten. | | Datensatz-Controller | Datensatz-Controller mit der zugehörigen Liste. | [Tabelle : 2. Formular „Registerkarteneinstellungen".] {#add-related-list-tab__table_usy_s1c_wtb} 12. Wählen Sie Erstellen aus. Die neue Registerkarte der zugehörigen Liste wird im Abschnitt „Registerkarten " des Konfigurationsbereichs angezeigt. In der Seitenvorschau wird nur eine Platzhalterregisterkarte angezeigt. Das grüne Symbol neben der Registerkarte der zugehörigen Liste in der Inhaltsstruktur zeigt an, wie viele Registerkarten auf Ihrer Seite angezeigt werden. 13. Wählen Sie Speichern. 14. Zeigen Sie Ihre Seite an, und testen Sie sie, indem ![Sie die Schaltfläche Vorschau wählen, die Ihre Seite zur Laufzeit öffnet. Dies ist eine Vorschau der Darstellung der Seite auf einer Webseite.](). Registerkarten „Seitensammlung" hinzufügen {#ariaid-title5} ----------------------------------------------------------- Verwenden Sie Seitensammlungsregisterkarten, um dieselben Registerkarten auf mehreren Seiten in UI Builderneu zu erstellen. ### Vorbereitungen Erforderliche Rolle: Administrator ### Warum und wann dieser Vorgang ausgeführt wird Eine Seitensammlung ist eine Gruppe vordefinierter global verfügbarer Seiten. Verwenden Sie Registerkarten für Seitensammlungen, um jede Seite in einer Seitensammlung als Registerkarte darzustellen. Sie können eine vorhandene Seitensammlung auswählen oder eine eigene erstellen. Zum Hinzufügen einer Seitensammlung ist ein Controller erforderlich. Weitere Informationen zu Seitensammlungen finden Sie unter [Seitensammlungen](https://servicenow-prod.fluidtopics.net/7uSU3XW3b_KngVeA6hhFPw "Seitensammlungen sind Gruppen von Seiten, die in mehreren Experiences verwendet werden können."). ### Prozedur 1. Navigieren zu AlleNow-Experience-FrameworkUI Builder. 2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen ErstellenExperience. Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. Erstellen oder öffnen Sie eine Seite oder Seitenvariante. Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter [Seite in UI Builder erstellen](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen."). 4. Wählen Sie in der Phase die Schaltfläche + Inhalt hinzufügen aus, um die Toolbox zu öffnen. 5. Wählen Sie ein Einzelspalten -Layout aus. 6. Wählen Sie als Nächstes das Symbol + in der Spalte aus, um die Toolbox zu öffnen. 7. Fügen Sie Ihrer Seite eine Registerkarten -Komponente hinzu. Weitere Informationen zum Hinzufügen von Komponenten zu einer Seite finden Sie unter [Komponenten hinzufügen und konfigurieren](https://servicenow-prod.fluidtopics.net/u0roCpbWC9yIy7XURU_kKw#add-components "Erfahren Sie, wie Sie Ihrer Seite in UI BuilderKomponenten hinzufügen. Eine Seite wird durch das Hinzufügen von Komponenten erstellt."). 8. Wählen Sie in der Phase die Registerkarte + Registerkarte hinzufügen aus. 9. Wählen Sie Seitensammlung hinzufügenaus. 10. Wählen Sie Weiter. 11. Wählen Sie eine Seitensammlung aus der Liste aus, oder erstellen Sie eine Sammlung, indem Sie + Sammlung erstellenwählen. Informationen zum Erstellen einer eigenen Seitensammlung finden Sie unter [Erstellen Sie eine Seitensammlung über mehrere UI-Seiten hinweg](https://servicenow-prod.fluidtopics.net/ChnmCqM~jCBOLlS6Jh8mkg "Erstellen Sie eine Seitensammlung, um Inhalte mit Registerkarten aufzunehmen, die in Experiences verwendet werden können."). 12. Wählen Sie Hinzufügen. Die neue Registerkarte „Seitensammlung" wird im Abschnitt „Registerkarten " des Konfigurationsbereichs angezeigt. In der Seitenvorschau wird nur eine Platzhalterregisterkarte angezeigt. 13. Wählen Sie Speichern. 14. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie ![die Schaltfläche Vorschau wählen, die die Seitenvariante öffnet.]().