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
Navigate to All > Now Experience Framework > UI Builder.
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.
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.
Select + Add content in the content tree.
Select a Single column layout.
Select + next to Modals in the content tree.
Select Viewport Modal in the list.
Pointer selecting the viewport modal in the modal list.
A viewport model appears above your page.
Click Save.
Select the viewport in the content tree.
Arrow pointing at the viewport added in the previous step.
- Select + Add next to Page collections in the configure tab.
Arrow pointing to + Add in the Configure panel
Select a page collection or create a new one.
For more information, see Create a page collection across multiple UI pages.
Page collection selection screen with option to create a collection.
Click Add.
Click Save.
Add a component that opens the viewport modal.
The following example uses a button to open the viewport modal.
Arrow pointing to a button component used to open a viewport modal.
Select the Events tab.
Select + Add event handler.
Arrow pointing to + Add event handler in the events tab of a button component.
Select Open or close modal dialog.
Enable Open modal dialog.
Select the viewport modal that you created in the Modal dropdown.
Configure the event handler for your viewport modal.
The **Viewport ID** auto populates.
Select Add.
Select Save.
View and test your page by selecting
Preview button that opens the page variant..
Parent Topic:Extend your UI experience with viewport components