Widget Tabber
Dashboards are designed to deliver clarity, but they often become cluttered, sluggish, and difficult to navigate. The Widget Tabber solves this by introducing clean, tab-based navigation with lazy loading for faster performance. Instead of overwhelming users with crowded pages or scattered dashboards, it organizes widgets into intuitive tabs.
The Widget Tabber makes it simple to switch views, maintain context, and uncover insights without the wait.
Release Notes for Widget Tabber can be found here.
Installation and configuration
The Widget Tabber plugin can be installed by an Admin, following the directions in Installing QBeeQ Plugins.
Operating system and version support:
- Linux - Latest
- Windows - Latest
Creating a new Widget Tabber
To create a new Widget Tabber widget:
Before you begin, ensure that the widgets are built and added to the dashboard.
- Choose QBeeQ Advanced Widget Tabber from the widget dropdown list
- Select data as KPIs from the data panel
- Set the tab count and display names
- Define widgets to show and hide for each tab
- Apply settings to each tab in the design panel
- Configure AS Of Date (optional)
- Apply settings to the individual and global tab styling in the design panel
- Save
- Refresh the dashboard
When first created, the widget will display as blank. Refresh the dashboard and the widget content should appear.
Select data
Data set as KPIs can be displayed as a primary metric or a trend metric on each tab. Add up to 20 KPIs in the Data Panel. KPIs can include formulas as well as standard columns.
As you add KPIs, they will not appear in the Design Panel.
If you do not want to display a primary or trend metric on the tabs, you do not need to add data in the data panel.
Set the tab count and display names
Define the number of tabs you want to display; you are limited to a maximum of 10 tabs.
Once the tab number is set, provide a display name for each tab.
The tab names are not related to the column or formula name in the Data Panel, and can be different. Changes made in one panel will not affect the settings in the other panel.
Apply settings to each tab in the design panel
Widgets to display and hide
For each tab, define which widgets are visible on the dashboard and which ones should be hidden by providing the widget’s ID. You can separate multiple widget IDs with commas.
Setting | Description |
Widgets to display | These widgets will be displayed to the user when the tab is selected |
Widgets to hide | These widgets will not be displayed to the user when the tab is selected |
Advanced Configurations
Click the check box to set additional tab configurations.
Setting | Description | Notes |
Show Primary Metric | The value that displays on the tab, below the tab name | |
Show Trend Metric | The value that displays on the tab, below the Primary Metric | The trend metric will automatically display as green when positive, and red when negative. |
As Of Date | Displays the oldest date available, if a date filter is added to the dashboard | |
Color | Sets the color that displays at the top of the tab when it is selected |
Configure AS Of Date
To display an As Of date on tabs, make sure there is at least one date filter on the dashboard
Apply settings to the individual and global tab styling in the design panel
For each tab, the size, color, and font type can be set for
Setting | Description |
Title Font Style | Sets the size, color and font for the tab Title |
Sub Title Font Style | Sets the size, color and font for the Primary Metric |
As Of Date Font Style | Sets the size, color and font for the As Of value |
Tab Style Settings
Setting | Description |
Active Tab Font Color | Sets the font color of the KPI on the tab when it is clicked by the user |
Active Tab Background Color | Sets the background color of the tab when it is clicked by the user |
Inactive Tab Font Color | Sets the font color of the KPI on all tabs other than the active tab |
Inactive Tab Background Color | Sets the background color of all tabs other than the active tab |
Inactive Hover Font Color | Sets the font color of the KPI on the tab when hovered over by the user |
Inactive Hover Tab Color | Sets the tab color of the KPI on the tab when hovered over by the user |
Tab Border | Controls the corner radius of the tab corners |
Tab Border Color | Sets the color of the border of the tab when it is clicked by the user |
Using the Widget Tabber
To use the Widget Tabber, select the tab you wish to view. The tabber will dynamically change the display of the dashboard based on how the tab has been configured.
Limitations
When using the Widget Tabber in Sisense, please be aware of the following limitations:
Export
- Exporting content directly from the Tabber Widget is not supported.
Dashboard Layout and Drag-and-Drop
- The Tabber Widget may affect the standard widget layout on dashboards. In some cases, Sisense’s drag-and-drop functionality may behave unexpectedly, including:
- Moving the Tabber Widget on the dashboard.
- Dragging widgets between tabs, or moving them in and out of tabs.
Row Layout and Resizing
- When multiple widgets are placed in the same row as a Tabber Widget, all visible widgets are automatically distributed evenly across the row. Horizontal resizing of widgets in that row is disabled.
Edit Mode Restrictions
- While in Edit Mode, switching between tabs inside the Tabber Widget is disabled.
Filters
- The Tabber Widget does not support Widget Filters applied to itself.
Fixed issues where the newly created tabber widget did not show a preview and where changes to existing tabbers didn’t fully apply on the dashboard without a refresh. The dashboard now reloads automatically after clicking Apply, ensuring tab additions and layout changes take effect immediately and behave as expected.