Add tabbed content to UI Builder pages

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.

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.

Parent Topic:Customize UI Builder pages using components

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.

1. Select a Single column layout.

2. Next, select the + icon in the column to open the toolbox.

3. Add a Tabs component to your page.

For more information on how to add a component to a page, see [Add and configure components](add-components.md).

1. Select + Add tab on the stage.

1. Select Start from an empty container.

1. Select Next.

2. On the form, fill in the fields.

   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.

3. Select Create.

   The new tab displays in the Tabs component.

4. Select the new tab.

5. Select + icon.

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

1. Select a Single column layout.

2. Next, select the + icon in the column to open the toolbox.

3. Add a Tabs component to your page.

For more information on how to add a component to a page, see [Add and configure components](add-components.md).

1. Select + Add tab on the stage.

1. Select Use a repeater.

1. Select Next.

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

3. Select Edit in the Data array field.

1. Configure the data array in the JSON editor.

   Key	Data type	Description
   icon	String	Name of the icon that appears in UI Builder.
   label	String	Required. Display name of the tab in UI Builder.
   count	Number	Value to provide on the tab label. Dynamically bind to a data broker or a client script that will be displayed on the label.
   fields	Object	Object that can be used to store information and to pass down to the components in the tabs.

2. Select Apply.

   The data array field displays the data array configuration.

1. Select Create.

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

1. Select Save.

2. Add components to the repeater tab.

3. Select

Add related list tabs

Create a set of tabs on a page by linking to a related list.

Before you begin

Role required: admin

About this task

The related list tab automatically populates tabs based on the record that your page is displaying. For example, by default the related lists for the user table are Roles, Groups, Delegates, and Visibility domains. If your page is displaying a user record, then creating a related list tab adds all four of these related lists as tabs on your page. You can preview the page to see the related lists that were added. A record controller is required to create related list tabs. To add a controller to your page, see Bind data to UI Builder pages using controllers (advanced feature) for more information.

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.

1. Select a Single column layout.

2. Next, select the + icon in the column to open the toolbox.

3. Add a Tabs component to your page.

For more information on how to add a component to a page, see [Add and configure components](add-components.md).

1. Select + Add tab on the stage.

1. Select Display related lists for a record.

1. Select Next.

2. On the form, fill in the fields.

   Field	Description
   Placeholder tab label	Placeholder label to appear on the preview tab of your page.
   Hide tab	Whether you want to hide or display the tab.
   Record Controller	Record controller with the related list.

3. Select Create.

   The new related list tab displays in the Tabs section of the configuration panel. Only one placeholder tab appears in the page preview. The green icon next to the related list tab in the content tree shows how many tabs appear on your page.

1. Select Save.

2. View and test your page by selecting

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.

1. Select a Single column layout.

2. Next, select the + icon in the column to open the toolbox.

3. Add a Tabs component to your page.

For more information on how to add a component to a page, see [Add and configure components](add-components.md).

1. Select + Add tab on the stage.

1. Select Add a page collection.

1. Select Next.

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

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

1. Select Save.

2. View and test your page by selecting