---
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


---

Fügen Sie Ihrer Seite eine Viewport-Komponente hinzu
====================================================

Fügen Sie Ihrer Seite eine Viewport-Komponente hinzu {#ariaid-title1}
=====================================================================

* Freigeben Version: Yokohama
* 
* Aktualisiert 30. Januar 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 Minute Lesedauer

Fügen Sie Ihrer Seite eine Viewport-Komponente hinzu, und erstellen Sie eine Unterseite, um separate Inhalte auf der Seite zu erstellen.

Vorbereitungen
--------------

Erforderliche Rolle: ui_builder_admin

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. Öffnen Sie den Editor für die Seitenvariante, der Sie den Viewport hinzufügen möchten.  
   Wenn Sie keine Seite für Ihre Experience erstellt haben, führen Sie die Schritte bis [Erstellen Sie eine Seite in UI Builder](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.")aus.
4. Wählen Sie in der Inhaltsstruktur die Option + Inhalt hinzufügen aus.
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. Geben Sie <kbd class="ph userinput">Viewport</kbd> in das Suchfeld ein.
8. Wählen Sie Viewportaus.  
   Abbildung : 1. Viewport-Komponente
9. Wählen Sie die Viewport-Komponente in der Inhaltsstruktur aus.
10. Wählen Sie im Konfigurationsbereich + Hinzufügen aus.  
11. Wählen Sie eine [Seitensammlung](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-page-collection-ui-builder "Gruppe von Seiten, die in Experiences auf Registerkarten oder modalen Elementen wiederverwendet werden können.") aus der Liste aus, oder erstellen Sie eine Sammlung, indem Sie + Sammlung erstellenauswählen.  
    Weitere 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 Seitensammlung wird im Abschnitt „Seitensammlungen" des Konfigurationsbereichs angezeigt. Im Bereitstellungsbereich wird nur eine Seite der Seitensammlung angezeigt.
13. Wählen Sie Speichern.
14. Suchen Sie die Viewport-ID und die Route.  
    Sie können die ID und Route im Bereich Konfiguration anzeigen (siehe folgende Abbildung).
15. Fügen Sie Ihrer Seite eine Komponente hinzu, um den soeben hinzugefügten Viewport zu öffnen, z. B. eine Schaltflächenkomponente.  
    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.").
16. Wählen Sie im Konfigurationsbereich die Registerkarte Ereignisse.
17. Wählen Sie + Ereignishandler hinzufügen aus, um den Viewport anzuzeigen.  
18. Wählen Sie unter Ereignishandler auf Seitenebenedie Option UXF -- Laden von Macroponent-Viewport angefordert aus.  
19. Ersetzen Sie im Element viewportElementID den <kbd class="ph userinput">Nullwert</kbd> durch die Viewport-ID, die Sie in einem vorherigen Schritt gefunden haben.  
    In diesem Beispiel ist dies <kbd class="ph userinput">„viewport_1“</kbd>.
20. Wählen Sie Hinzufügen.  
21. Wählen Sie Speichern.
22. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie ![die Schaltfläche Vorschau wählen, die die Seitenvariante öffnet.]().