---
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 Experience ein modales Viewport-Element hinzu
=============================================================

Fügen Sie Ihrer Experience ein modales Viewport-Element 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 einen Viewport innerhalb eines modalen Elements in Ihrer Experience hinzu.

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

Erforderliche Rolle: ui_builder_admin

Warum und wann dieser Vorgang ausgeführt wird
---------------------------------------------

Verwenden Sie Viewport-Modale, um Unterseiten oder andere Experiences innerhalb eines Modals auf Ihrer übergeordneten Seite oder Experience einzubetten. Viewport-Modals können über Ereignisse oder Skripts geöffnet werden. Viewport-Modals sind auf eine Unterroute pro Viewport-Modal beschränkt. Sie können zusätzliche Viewport-Modale für zusätzliche Routen erstellen.  
Hinweis:  
Veraltete Viewport-Dialogfelder können nicht aktualisiert werden und müssen neu erstellt werden, um die neuen Funktionen nutzen zu 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 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 oder erstellen Sie eine Seite.  
   Wenn Sie eine vorhandene Seite öffnen, vergewissern Sie sich, dass Sie sich im selben Bereich wie die ursprüngliche Seite befinden. Wenn nicht, ändern Sie den Bereich, 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, welche Teile einer Anwendung für andere Anwendungen zugänglich sind. Der Anwendungsbereich schützt Daten und Anwendungsdateien. Weitere Informationen zum Anwendungsbereich finden Sie unter [Informationen zu Sicherheit und Rollen](https://servicenow-prod.fluidtopics.net/eEIG~pBNMjPGjgFCNVvCuA "Richten Sie die Sicherheit und die Rollen für die Instanz UI Builder ein.").
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 in der Inhaltsstruktur neben Modals (Modale) die Option + aus.
7. Wählen Sie Viewport-Modal in der Liste aus.  
   Abbildung : 1. Viewport-Modal  
   Über Ihrer Seite wird ein Viewport-Modell angezeigt.
8. Klicken Sie auf Speichern.
9. Wählen Sie den Viewport in der Inhaltsstruktur aus.  
10. Wählen Sie auf der Registerkarte „Konfigurieren" neben Seitensammlungen die Option + Hinzufügen aus.  
11. Wählen Sie eine Seitensammlung aus, oder erstellen Sie eine neue.  
    Weitere Informationen 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. Klicken Sie auf Hinzufügen.
13. Klicken Sie auf Speichern.
14. Fügen Sie eine Komponente hinzu, die das Viewport-Modal öffnet.  
    Im folgenden Beispiel wird das Viewport-Modal mithilfe einer Schaltfläche geöffnet.

15. Wählen Sie die Registerkarte Events aus.
16. Wählen Sie + Ereignishandler hinzufügen aus.  
17. Wählen Sie Modalen Dialog öffnen oder schließen aus.
18. Aktivieren Sie den modalen Dialog öffnen.
19. Wählen Sie das Viewport-Modal aus, das Sie in der Dropdown-Liste „Modal" erstellt haben.  
    Die Viewport-ID wird automatisch ausgefüllt.
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.]().