Widget Tabs enhancement

Layer multiple widgets into a single location on a Page with the Widget Tabs enhancement. Use this to 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 click 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. 

Examples

Horizontal tabs.

 

Vertical tabs.

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. 
  • Accordion enhancement: The Accordion enhancement may be used with this 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 properly. For example, in a multi-tab setup:
    • Widget 1: Displays the tabs.
    • Widget 2: Placeholder widget that holds the Title field for the first tab.
    • Widget 3-6: Holds the 1-3rd accordions for the first tab.
    • Widget 7: Placeholder widget that holds the Title field for the 2nd tab.
    • Widget 8-10: Holds the 1-3rd accordions for the second tab.
  • 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 on them 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. 

How to create horizontal tabs

Create Horizontal Tabs by placing an HTML widget above the widgets that will act as tabs. 

Configuration for horizontal tabs, detailed instructions after the image.

  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 if you need help applying CSS classes to a widget.
  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.

How to create vertical tabs

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

Configuration for vertical tabs, detailed instructions after the image.

  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. If you need help applying CSS classes to a 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.

How to 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, detailed instructions before the image.

How to 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, detailed instructions before the image.

How to 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