Replace a tab with a viewport-enabled tab

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 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 on creating experiences.

3. Create or open a page with existing tabs, or add a Tabs component to your page.

For more information on how to add a Tabs component to a page, see [Add tabbed content to UI Builder pages](tabs-components.md).

1. Select the tabs component that you want to replace with viewport tabs in the content tree.

2. 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.

1. Select Replace with viewport tabs.

1. Click Edit content to add a viewport-enabled tab.

For more information on viewport components, see [Add a viewport component to your page](work-with-viewport-components.md).

1. Select Save and continue.

   The sub-page overview page appears.

2. Select Create new page.

3. In the Name field, enter a name for your viewport-enabled tab.

4. Keep the default path, or change it to your preference.

5. Select Continue.

6. In the Name field, enter a name for the page variant or leave it as Default.

7. 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.

8. 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.

9. Select Open in editor.

10. Add components to your tab as you would to a page.

11. 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.

12. Select ← Back to (name of page) to return to your original page.

1. 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).

1. Choose where the viewport-enabled tab labels appear on the page and decide whether to hide tab labels so you only see the icons.

Parent Topic:Extend your UI experience with viewport components