Use the Tabs component to add tabbed content to pages in UI Builder.

Create additional navigation on your UI Builder page by adding a Tabs component to your page. Use the Tabs component to nest components within tabs on your page. Tabs can be configured as either horizontal tabs at the top of the content, or as vertical tabs on the left or right side of the content.
Figure 1. Tab component example
Tabs being selected in a UI Builder page preview.

Tabs can be organized in the configuration panel to reorder how they are displayed on the UI Builder page. Add custom labels and icons to tabs to provide unique visual identifiers for navigating across tabs. These changes can be viewed in real-time as you edit the Tabs component.

You can add one of the following types of tabs to your UI Builder page:
  • Empty container tab
  • Repeater tab
  • Related list tab
  • Page collection tabs

The tabs component supports any combination of static tabs, repeated tabs, related list tabs, and page collection tabs. Alternatively, you can still use the Viewport tab mode to add a series of viewports.

Add empty container tabs

Use an empty container tab to manually create a static set of tabs on your page.

Before you begin

Role required: admin

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 or page variant.
    For more information about how to create a page in UI Builder, see Create a page in UI Builder.
  4. Select the + Add content button on the stage to open the toolbox.
    Arrow pointing to the + icon that opens the toolbox.
  5. Select a Single column layout.
  6. Next, select the + icon in the column to open the toolbox.
  7. Add a Tabs component to your page.
    Arrow pointing to tabs component in the toolbox.

    For more information on how to add a component to a page, see Add and configure components.

  8. Select + Add tab on the stage.
    Arrow pointing to the tabs + add option in the configuration panel.
  9. Select Start from an empty container.
    Start from an empty container option selected.
  10. Select Next.
  11. On the form, fill in the fields.
    Table 1. Tab settings form
    Field Description
    Tab label Label for the tab to display on your page.
    Icon Icon to appear next to the tab label. Icons are not required.
    Hide tab Whether to hide or display the tab.
  12. Select Create.
    The new tab displays in the Tabs component.
  13. Select the new tab.
  14. Select + icon.
    Arrow pointing to the + icon to add a component to the demo tab.
  15. Select the component that you want to add to the tab.
    Components display under the tab in which they’re nested in the content tree. For more information, see Add and configure components.

Result

Your page shows the two tabs that you created. Select each tab to further configure them, add styling, or add an event handler. For more information on styling, see Change the default appearance of components. For more information on adding an event handler, see Manage actions in UI Builder pages.

Add repeater tabs

Use the Tabs component to create a set of repeater tabs by linking tabs to a data array.

Before you begin

Role required: admin

About this task

You can use repeater tabs to create multiple tabs based on the data array you provide. You can pass the icon, label, count, and fields as a key in the object. Use the label key to add names to tabs. Use the field key to pass information to repeater tabs. You can bind a data broker, client state, or a client script to the data array provider to return the array of objects with the correct schema.

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 or page variant.
    For more information about how to create a page in UI Builder, see Create a page in UI Builder.
  4. Select the + Add content button on the stage to open the toolbox.
    Arrow pointing to the + on the stage that opens the toolbox.
  5. Select a Single column layout.
  6. Next, select the + icon in the column to open the toolbox.
  7. Add a Tabs component to your page.
    Arrow pointing to the tabs component in the toolbox.

    For more information on how to add a component to a page, see Add and configure components.

  8. Select + Add tab on the stage.
    Arrow pointing to + Add option in the configuration panel.
  9. Select Use a repeater.
    Use a repeater selected in the tab selection modal.
  10. Select Next.
  11. Enter a label for the repeater tab in the Placeholder tab label field.
    This label is assigned to the first repeater tab and is the only tab displayed in the page preview.
  12. Select Edit in the Data array field.
    Open the data array editing modal.
  13. Configure the data array in the JSON editor.
  14. Select Apply.
    The data array field displays the data array configuration.

    Repeater settings with a custom data array.

  15. Select Create.
    The new repeater tab appears on the page and in the content tree.

    Placeholder repeater tab highlighted on the page.

  16. Select Save.
  17. Add components to the repeater tab.
  18. Select Preview button that opens your page in runtime, which is a preview of how the page looks on a web page. to verify that the repeater tabs display correctly on your page.

Add page collection tabs

Use page collection tabs to recreate the same tabs across multiple pages in UI Builder.

Before you begin

Role required: admin

About this task

A page collection is a group of prebuilt globally available pages. Use page collection tabs to render each page in a page collection as a tab. You can select an existing page collection or can create your own. A controller is required to add a page collection. For more information about page collections, see Page collections.

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 or page variant.
    For more information about how to create a page in UI Builder, see Create a page in UI Builder.
  4. Select the + Add content button on the stage to open the toolbox.
    Arrow pointing to the + on the stage that opens the toolbox.
  5. Select a Single column layout.
  6. Next, select the + icon in the column to open the toolbox.
  7. Add a Tabs component to your page.
    Arrow pointing to the tabs component in the toolbox.

    For more information on how to add a component to a page, see Add and configure components.

  8. Select + Add tab on the stage.
    Arrow pointing to + Add option in the configuration panel.
  9. Select Add a page collection.
    Tab selection modal with add a page collection option highlighted.
  10. Select Next.
  11. Select a page collection from the list or create a collection by selecting + Create collection.
    To create your own page collection, see Create a page collection across multiple UI pages.

    Page collection selection screen with option to create a collection.

  12. Select Add.
    The new page collection tab displays in the Tabs section of the configuration panel. Only one placeholder tab displays in the page preview.

    Page collection tab highlighted on the page.

  13. Select Save.
  14. View and test your page by selecting Preview button that opens the page variant..