Add a viewport modal to your experience

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 All > Now Experience Framework > UI Builder.
2. Open an experience to work in or create an experience by selecting Create > Experience.
   See Configure how users interact with your applications in UI Builder 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 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.

    

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 .