Add a contextual sidebar

Add a contextual sidebar to a page with UI Builder to display related content using a vertical tab structure.

始める前に

Role required: ui_builder_admin

このタスクについて

You can configure the contextual sidebar in the same way you would configure a tab component. Each vertical tab in the contextual sidebar renders custom content. You can place components in each tab for quick access directly from the page.

For example, a document creation page might have the attachments component on one tab, enabling you to attach files related to the document that you're working on. On another tab, there could be a nested comments component, enabling you to add and view comments related to the document.

手順

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 or page variant.
   For more information about how to create a page in UI Builder, see Create a page in UI Builder. For information about creating a page variant, see Create a page variant
4. On the stage, open the toolbox by selecting the + Add content button.
5. Select the Single column layout tile.
6. In the column, open the toolbox by selecting the + icon.
7. Select the Contextual sidebar component to add it to your page.

   

   The contextual sidebar appears on the stage, and the Tabs section appears in the configuration panel.
8. In the configuration panel under the Tabs section, select the settings icon () to configure the tab.
   1. On the form, fill in the fields.

      表 : 1. Tab settings form

      Field	Description
      Tab label	Label that displays on the tab for your page.
      Icon	Icon that appears next to the tab label. 注: Icons aren't required.
      Hide tab	Option to hide or display the tab.

   2. Select Save.
9. On the stage in the contextual sidebar, open the toolbox by selecting the + icon.
10. Select the component that you want to add to the tab.
    The component displays under the tab in the content tree. For more information, see Add and configure components.
11. オプション: To add another tab, select + Add under the Tabs section.

次のタスク

For detailed information about the configuration of the contextual sidebar and its properties, see Tabs UIB Setup on the ServiceNow Developer Site.