Widget Tabs enhancement

With the Widget Tabs enhancement, multiple widgets can be layered into a single location on a page. This can reduce clutter and information overload on information-dense pages by presenting content based on the user's needs. Widgets sharing this enhancement display their titles in a list of tabs. Users can select a tab to show the content of the associated widget.

Widget Tabs always involve an HTML Content widget that acts as an index of the contained tabs and then any number of other widgets that you want to appear as tabs. How you place the HTML Content widget and what classes you use determines whether the tabs will appear horizontally or vertically.

If your digital workplace already has this enhancement, you can find configuration steps on your Styles page.

Sections in this article:

Request enhancement

To request this enhancement, please complete and submit an Enhancement Request Form. 

Considerations

Follow these best practices when creating widget tabs:

  • Horizontal tabs: When using horizontal tabs, limit the maximum number of tabs to 4 to ensure that the tab titles are easily readable.
  • Widget placement: Place widgets that share a tab group in the same Page Row section. 
  • Group-based widgets enhancement: Do not use the Widget Tabs enhancement in combination with the Group-based widgets enhancement.  
  • Widgets: Do not use the following widgets with the Widget Tabs enhancement:
  • Language classes: Widgets with language classes will not function as expected when used with the Widget Tabs enhancement. Instead of only showing widgets that match the user's current language, all widgets will be displayed. 

Create horizontal tabs

Create horizontal tabs by placing an HTML Content widget above the widgets acting as tabs. 

Configuration for horizontal tabs.

  1. Place the widgets you want to layer into tabs within the same Page Row section.
  2. Place an HTML Content widget above the widgets that will act as tabs. 
  3. Add the ps-tabs class to the HTML Content widget. See Applying custom CSS to widgets.
  4. Add the ps-tab class and a title to each widget you want to be a tab. You can enter a title into the Title text box on the Options tab of the widget. These titles will appear on the tabs.

Create vertical tabs

Create vertical tabs by placing an HTML Content widget next to the widget acting as tabs. 

Configuration for vertical tabs.

  1. Place the widgets you want to layer into tabs within the same Page Row section.
  2. Place an HTML Content widget next to the widget acting as tabs. 
  3. Add ps-tabs and tabs-style-vertical classes to the HTML Content widget. See Applying custom CSS to widgets.
  4. Add the ps-tab class and a title to each widget you want to be a tab. You can enter a title into the Title textbox on the Options tab of the widget. These titles will appear on the tabs.

Create tabs that contain multiple widgets

In addition to setting up your tabs, add the multi-tab-x (replacing x with a meaningful name that contains only lowercase characters) class to the widgets you want to group in the same tab. In the image below, widgets with the multi-tab-first class will appear in tab 1, while widgets with multi-tab-second will appear in tab 2. The label on the tab will be the title of the first widget in the group.

Configuration for tabs with multiple widgets.

Create multiple groups of tabbed widgets

In addition to setting up your tabs, add the tab-group-X (replacing X with a meaningful name) class to the widgets you want together. You don't need to do this if you only use one group of tabs on a page. In the image below, widgets with the tab-group-cat class are grouped, and widgets with the tab-group-dog class are grouped.

Configuration for multiple tab widgets.

Create tabs with the content in accordions

Before using the Accordion enhancement with the Widget Tabs enhancement, you must add the following code to your Custom CSS or Theme for the digital workplace. See Adding CSS to your digital workplace.

/* Support accordions AND tabs together */
div.ps-tab.accordion .ig-cpt-title {
display: inherit !important;
}

The accordion class can added to widgets with the Widget Tabs enhancement only if the Accordion enhancement is not placed in the first widget in the tab. Using a placeholder widget allows the Widget Tabs enhancement to be titled appropriately without interrupting the Accordion enhancement's titles, as both enhancements require using the Title field to work correctly. See the following list and image for an example of vertical tabs where each tab has three content accordions. 

  • Widget: Located in the left-hand column, it displays the tabs.
  • Widget A: Placeholder widget that holds the Title field for the first tab.
  • Widget B-D: Holds the first-third accordions for the first tab.
  • Widget E: Placeholder widget that holds the Title field for the second tab.
  • Widget F-H: Holds the first-third accordions for the second tab.

Configuration using multiple vertical tabs with accordions.

Add icons to tab labels

In addition to setting up your tabs, add the graphical class to the HTML widget with the ps-tab class and the icon-X class to the related widgets (these should already have the ps-tab class). When using icon-X, replace X with the name of a Font Awesome icon (only version 4 icons are supported). In the image below, the icon-fa-twitter is added to the first widget, and the icon-fa-instagram class is added to the second widget.

Configuration for using icons with tabs.