---
sourceDocument: Zurich Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/zurich/application-development

 Release :

    - zurich

ft:locale :

    - en-US

ft:publication_title :

    - Zurich Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Add a viewport modal to your experience

# Add a viewport modal to your experience {#ariaid-title1}

* Release version: Zurich
* 
* Updated July 31, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

Add a viewport within a modal in your experience.

## Before you begin

Role required: ui_builder_admin

## About this task

Use viewport modals to embed subpages or other experiences within a modal in your parent page or experience. Viewport modals can be opened via events or scripts. Viewport modals are limited to one subroute per viewport modal. You can create additional viewport modals for extra routes.  
Note:  
Legacy viewport modals cannot be upgraded and must be recreated to take advantage of the new functionality.

## Procedure

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/iNIKh5D0WTwLggJ~MxG1qQ "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information.
3. Open or create a page.  
   If you open an existing page, ensure you are in the same scope as the original page. If not, change the scope before you start editing the page. Application scoping protects applications by identifying and restricting access to application files and data. Administrators set the scope to specify what parts of an application are accessible to other applications. Application scope protects data and application files. See [Learn about security and roles](https://www.servicenow.com/docs/H2O83_2KmzxLMFz6i45bnQ "Set up the security and roles for your UI Builder instance.") for more information on application scope.
4. Select + Add content in the content tree.
5. Select a Single column layout.
6. Select + next to Modals in the content tree.
7. Select Viewport Modal in the list.  
   Figure 1. Viewport Modal  
   A viewport model appears above your page.
8. Click Save.
9. Select the viewport in the content tree.  
10. Select + Add next to Page collections in the configure tab.  
11. Select a page collection or create a new one.  
    For more information, see [Create a page collection across multiple UI pages](https://www.servicenow.com/docs/zVr~qqmzFcCufrJ0WhvBUQ "Create a page collection to accommodate tabbed content that can be used across experiences.").

12. Click Add.
13. Click Save.
14. Add a component that opens the viewport modal.  
    The following example uses a button to open the viewport modal.

15. Select the Events tab.
16. Select + Add event handler.  
17. Select Open or close modal dialog.
18. Enable Open modal dialog.
19. Select the viewport modal that you created in the Modal dropdown.  
    The Viewport ID auto populates.
20. Select Add.
21. Select Save.
22. View and test your page by selecting ![Preview button that opens the page variant.]().

*[\>]: and then