Add a viewport to a contextual sidebar component

Adding a viewport to your page lets you create separate content that is viewed when you click a tab on your page. You create tabs within a component. Then, within those tabs, you can create custom pages or even third-party custom user interfaces.

Before you begin

Role required: ui_builder_admin

About this task

Create a viewport by adding a tab to a contextual sidebar component on your page. Then create content for the tab.

Procedure

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience to work in or create an experience by selecting + Create.
   See Configure how users interact with your applications in UI Builder for more information on creating experiences.
3. Open or create a page variant.
   For more information about how to create a page in UI Builder, see Create a page in UI Builder.
4. Add a contextual sidebar component to your page.
5. Select the contextual sidebar component in the content tree.
6. Move your mouse over the contextual sidebar component on the stage and select Edit content.
7. Select Save and continue.
8. Select the + icon in the Pages and variants section.
   
9. Enter a unique name for the page in the Name field.
10. Specify a path for your page in the URL Path field. UI Builder generates a default path based on the name that you provided in the previous step.
    A default path is added based on your page name. You can also create your own path. The path is required and must be unique. The path can include digits (0-9), letters (A-Z, a-z), and a few special characters ("-", ".", "_", "~"), with the words separated by a forward slash or hyphen. The URL preview shows the path of your page.

    

    Note:

    The application scope defaults to the scope that the user is currently in within the ServiceNow AI Platform®. For more information about the application scope, see Learn about security and roles.
11. Select Continue.
12. Select Create.
13. Select Editor next to the page you created.
14. Design your content for the tab.

    Notice you’re designing it in the edit sub-page mode of UI Builder and not on the page itself. You can build the tab just like you would build a page. You can add components, change layouts, and so on. This example shows adding a tab to a contextual sidebar component.

    
15. Click Save.
16. Select ← Back to the parent page.
    
17. Optional: Click the Configure panel to edit the tab you created.
    When you add viewport tabs to a component in UI Builder, the Configure panel changes to show the Tabs configuration. When you click a tab in the Configure panel, the tab information changes in the corresponding component on the page.
18. Click Save.