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

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Replace a tab with a viewport-enabled tab

# Replace a tab with a viewport-enabled tab {#ariaid-title1}

* Release version: Yokohama
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

Convert a tab on a page to a viewport-enabled tab. Use viewport-enabled tabs to
display third-party custom data, assign audiences, and create variants.

## Before you begin

Role required: admin

## About this task

Replace your tab or tabs with viewport-enabled tabs.  
Note:  
Replacing a tab with a viewport-enabled tab is a permanent and one-way process. You lose any existing tab content and must recreate the viewport tab content.

## 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/nDWg0NsWQpdF_OppvTVe5g "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. Create or open a page with existing tabs, or add a Tabs component to your page.  
   Figure 1. Tabs component

   For more information on how to add a Tabs component to a page, see [Add tabbed content to UI Builder pages](https://www.servicenow.com/docs/dOmVwptLxVxAu_ZXmjkd5A#tabs-components "Use the Tabs component to add tabbed content to pages in UI Builder.").
4. Select the tabs component that you want to replace with viewport tabs in the content tree.
5. Select Replace with viewport tabs in the configuration panel.  
   Note:  
   Replacing a tab with a viewport-enabled tab is a permanent and one-way process. You lose any existing tab content and must recreate the viewport tab content.

6. Select Replace with viewport tabs.  
7. Click Edit content to add a viewport-enabled tab.  
   Figure 2. Edit content

   For more information on viewport components, see [Add a viewport component to your page](https://www.servicenow.com/docs/cvLDnKM3I9L4GQkprSWCTg "Add a viewport component to your page and create a subpage to create separate content on the page.").
8. Select Save and continue.  
   The sub-page overview page appears.
9. Select Create new page.
10. In the Name field, enter a name for your viewport-enabled tab.
11. Keep the default path, or change it to your preference.
12. Select Continue.
13. In the Name field, enter a name for the page variant or leave it as Default.
14. Add one or more audiences for this page.  
    If an audience you need is not listed, you can choose the View all available audiences to create one.
15. **Optional:** Declare conditions for when to display the page or tab by either using the provided dropdown menus or writing an encoded query string.  
    For more information on writing encoded queries, see [Encoded query strings](https://www.servicenow.com/docs/access?context=c_EncodedQueryStrings&version=yokohama&pubname=yokohama-platform-user-interface&ft:locale=en-US).
16. Select Open in editor.
17. Add components to your tab as you would to a page.
18. Add an event handler to any components to make them perform actions, such as loading page content.  
    For more information about event handlers, see [Manage actions in UI Builder pages](https://www.servicenow.com/docs/AaUhb8SxjN3p6v8m~liNsw "Learn how to work with events so that you can add actions to components, pages, data resources, and declarative actions in UI Builder.").
19. Select ← Back to (name of page) to return to your original page.  
20. In Data driven tabs, select a data source to bind data to your viewport-enabled tab using data resources to dynamically expose your data from tables and records.  
    You then bind these data properties to components in your tab. For more information about using data resources, see [Dynamically expose data in UI Builder pages (advanced feature)](https://www.servicenow.com/docs/L~6cRs4KlJY_GTLaEaXA4A "Sync data between ServiceNow tables and data with the pages you build with UI Builder. Pages display synced data in real time and update data/tables when a user inputs information.").
21. Choose where the viewport-enabled tab labels appear on the page and decide whether to hide tab labels so you only see the icons.  

*[\>]: and then