---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/application-development

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Add a viewport component to your page

# Add a viewport component to your page {#ariaid-title1}

* Versão de lançamento: Australia
* 
* Atualizado 12 de mar. de 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 min. de leitura

Add a viewport component to your page and create a subpage to create separate content
on the page.

## Antes de Iniciar

Role required:
ui_builder_admin

## Procedimento

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://servicenow-prod.fluidtopics.net/dUVGdKGQs6AbFNSw~vNKcQ "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. Open the editor for the page variant that you want to add the viewport to.  
   If you haven't created a page for your experience, follow the steps to [Create a page in UI Builder](https://servicenow-prod.fluidtopics.net/SclXrv5libg5iBN91G7scQ "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
4. Select + Add content in the content tree.
5. Select a Single column layout.
6. Next, select the + icon in the column to open the toolbox.
7. Enter <kbd class="ph userinput">viewport</kbd> in the search box.
8. Select Viewport.  
   Figura 1. Viewport component
9. Select the viewport component in the content tree.
10. Select + Add in the configuration panel.  
11. Select a [page collection](https://servicenow-prod.fluidtopics.net/6GM5kqI2j9Oag95wjD6VGg#gloss-page-collection-ui-builder "Group of pages that can be reused in experiences within tabs or modals.") from the list or create a collection by selecting + Create collection.  
    For more information on creating your own page collection, see [Create a page collection across multiple UI pages](https://servicenow-prod.fluidtopics.net/daBWTjHTLcUqGP5zxdlOlg "Create a page collection to accommodate tabbed content that can be used across experiences.").

12. Select Add.  
    The page collection displays in the Page collections section of the configuration panel. Only one page of the page collection displays in the staging area.
13. Select Save.
14. Locate the viewport ID and route.  
    You can see the ID and route in the Config panel as shown in the following figure.
15. Add a component to your page to open the viewport you just added, such as a button component.  
    For more information, see [Add and configure components](https://servicenow-prod.fluidtopics.net/cbYaV7wlkZDBulAnOqnPNA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").
16. Select the Events tab in the configuration panel.
17. Select + Add event handler to view the viewport.  
18. From Page-level event handlers, select UXF Macroponent Viewport Load Requested.  
19. In the viewportElementID element, replace the <kbd class="ph userinput">null</kbd> value with the viewport ID that you located in a previous step.  
    In this example, it is, <kbd class="ph userinput">"viewport_1"</kbd>.
20. Select Add.  
21. Select Save.
22. View and test your page by selecting ![Preview button that opens the page variant.]().