Tabbed Widget

The Tabbed widget type offers a convenient method for organizing and displaying content within distinct horizontal tabs.

Much like the Side Panels feature, you can use the Tabbed widget to organize data from various WebUI pages into separate tabs.

Each tab has a header display text, a tooltip that appears on hover, an associated WebUI page and more properties. When a user clicks on a tab, the corresponding page and its widgets are displayed within the Tabbed widget. This setup allows for intuitive navigation and information presentation, enhancing the overall user experience. Additionally, this widget lets you display relevant pages with their widgets, removing the need to configure all widgets on a single page and manage their visibility settings.

Important

The Tabbed widget type was introduced in WebUI Library version 24.7.

Please note that the Tabbed widget is exclusively supported on pages featuring a grid layout and is incompatible with Classic pages.

Placing a Tabbed widget on a page with a classic layout (e.g., through copy and paste) renders it unusable and displays an incompatibility message.

Data Setup

Similar to the data setup for Side Panels on a page, the Tabbed widget requires configuration with data related to the tabs. This includes the tab header display text, the corresponding page to load when the tab is selected, the state of each tab, any icon to be prefixed to the display text, and the color to be applied to the icon.

This widget accepts a string parameter indexed on the ExtensionOrder set with webui::indexNoOfTabs and SidePanelSpecification set with webui::indexTabSpec indices.

For example TabbedWidgetContents(webui::indexNoOfTabs,webui::indexTabSpec).

Note

When creating the string parameter to configure tabs, the first index needs to be in a subset of integers. You can create your subset of integers and use the respective index as well. To make it convenient you can use the index from the pre-declared set ExtensionOrder for this purpose i.e. indexNoOfTabs.

Right click the string parameter and click on the Data option in order to open the data page.

Add the details about the Tabs you would like to show within this widget.

This data input gets presented as below on the widget.

Note

• Tabs are presented horizontally, following the same order from left to right as they are arranged in the data of the string parameter.

• Case sensitivity applies to the mapping of the pageIds.

• Only tabs linked to regular pages of grid-layout type are loaded. Other page types and incorrect pageId values will not be displayed.

• Case insensitivity applies to the mapping of the state. Only tabs with active and inactive states are displayed within the widget. Inactive tabs are shown but appear greyed out and are non-interactive.

• Any state other than “active” and “inactive” is considered hidden, and tabs with such states are not shown on the widget.

• When a tab is open in the widget and if the displayText, tooltip, icon, or iconcolor are changed or updated, the currently selected tab remains active. Only when the pageId or state are changed or updated, then the first active tab in the data is selected.

Configuring the string parameter on the widget

In the Tabbed widget, open the options editor. Add the string parameter to the Tabs option.

Based on the configured data, appropriate tabs with display text, icon and state are shown.

Note

• While the linked page is displayed within a tab of this Tabbed widget, please note that the page and its widgets will be confined to the viewable area of the Tabbed widget. For optimal display, we recommend placing this Tabbed widget in a wider and larger widget area.

• This Tabbed widget can be placed on a regular page, in a Sidepanel, or on Dialog pages.

• There is no limitation on the number of Tabbed widgets that can be placed on a page.

• If the current page is configured as a tab within this widget, clicking on such a tab will display an appropriate error message.

• Nested Tabbed widgets are not supported. If a Tabbed widget is configured to be displayed within a tab on a page, an appropriate error message will be displayed to handle this scenario.

Interacting with Tabs

Each tab displays the respective configured display text. Depending on the available space to accommodate the tabs, either the entire display text or a truncated version with an ellipsis will be shown. Hovering over a tab, its respective configured tooltip is displayed.

By default, the first active tab is selected, displaying its corresponding page below. Clicking on any tab opens its respective page underneath.

Only tabs with an active state are interactive and selectable. Inactive tabs are displayed but appear greyed out and are not interactive. Tabs with hidden state are not displayed.

Note

• If all Tabs are either in an inactive or hidden state, a banner with the appropriate error message will be shown.

Special Settings

The Tabbed widget type includes several settings that enhance content presentation.

Within the Contents option editor tab, you will find several settings that improve data presentation. Here are the details.

• Hide Tab Headers:

  While the Tabbed widget typically displays horizontal Tabs, you have the option to hide all tab headers.

  By default, the tab headers are shown. However, you can choose to hide them by toggling this boolean switch or using a scalar binary parameter.

  If you set the UI Editable application option to 0 and show a Tabbed widget with such hidden tab headers on a PRO environment, you will not see an empty row at the top of the widget (which would normally show the cogwheel to change the widget settings) anymore. This increases the available area for displaying the widgets within the Tabbed widget a bit.

• Active Tab:

  By default, when the Tabbed widget loads, the first active tab is selected, displaying the corresponding page below. It is beneficial to have control over which tab is loaded by default when the widget loads, as well as to know which tab the user has brought into focus.

  The “Active Tab” option lists the display text of the various configured tabs, allowing you to choose one to be selected upon page load. Alternatively, you can control this through the model by selecting a scalar Element Parameter ranged over webui::AllRegularPages or a subset of it. The corresponding tab is then selected based on the pageId mapping from this element parameter. If the configured value for this option is incorrect or the tab is not in an active state, a banner with an appropriate error message will be shown.

  When a scalar Element Parameter is configured, the information about the tab that the user has brought into focus is saved into the configured Element Parameter.

Note

• Each WebUI page can have its own Page-Upon-Load and Page-Upon-Leave options configured. When a page linked to a tab is selected and brought into focus, the configured Page-Upon-Load procedure for that page will be executed.

• Currently, the Page-Upon-Leave procedure for the page linked to a tab is not executed. Support for this feature will be added in a future version.