The Tabber Widget Switcher Plugin

*This plugin is officially supported by Sisense. You can find the latest version of this plugin on the Sisense Add-Ons page.

Introduction

The Tabber Plugin creates a new widget that allows the user to switch between views easily and quickly without changing the dashboard.

Please note this widget is designed to be used only once per dashboard. It also does not yet support saving the tabber state after refreshes or filter changes.

Example

Tabber Widget can be used to view data in different time zone (Current Month , Last Month) or to view data in different categories (Revenues, Sales,Orders ).

Also, the Tabber can be used to view the same data in different ways (chart, numeric, table).

You can add many Tabber names as long it fits in the same row.

Also, you can add more than one Tabber Widget in the same Dashboard if necessary.

Steps

A Tabber widget can be added to all Dashboards and can be used with all widgets.

In order to add a Tabber widget, please follow the listed steps below:

Step 1:

Download and extract the enclosed folder into the plugins folder:

C:\Program Files\Sisense\PrismWeb\plugins\WidgetsTabber, if the "plugins" folder is not there, please create it

Step 2:

Create a new Tabber Widget - Press Choose

and choose TABBER:

click apply to create the widget

Step 3:

Open the Tabber widget editor, edit script.

Copy the js code below into the script editor.

widget.on('render',function(w, e) {
  e.prefixText = '';
  e.suffixText = '';
  e.selectedColor = '#86b817'; /*The color of the chosen title*/
  e.fontColor = '#cccccc'; /*The color of the unchosen titles*/
  e.elementWidth = '103%';
  e.descColor = '#a5a5a5';
  e.parentMarginLeft = '-15px';
  e.height = 32; /* affects the tabber widget default high*/
});

widget.tabs = [
  {
    title: "Column Chart", 
    displayWidgetIds : ["55797a9459ef031011000032"], 
    hideWidgetIds : ["557d408a4630ccdc11000019"]
  },
  { 
    title: "Table", 
    displayWidgetIds : ["557d408a4630ccdc11000019"], 
    hideWidgetIds : ["55797a9459ef031011000032"]
  }
];

Code configuration:

Each row represents a different tab. The order of the tabs is according to the rows as the appear in the code.

displayWidgetIds: In the [] write all the widgets ID's you with to display under the specific tab in “”, seperated by comma.

hideWidgetIds: In the [] write all the widgets ID's you with to hide from the specific tab in “”, seperated by comma.

The widget ID appear in the widget url: Go to Edit Widget and copy the widget ID from the end of the widget url address- for example: http://localhost:8081/app/main#/dashboards/55797a3542f03101100002c/widgets/55797a9459ef031011000032
The widget number is: 55797a9459ef031011000032
In order to change the Tabber design - see design definition in the code (explanations are documented in the code).
Press SAVE
Close the Script window
Refresh the widget and click apply
The chart should appear with the Tabber widget and configuration.

Step 4:

Edit dashboard script to define hidden widgets.

Copy the js code below into the script editor.

dashboard.hideWidgetIds = ["556eb860106eb3f42100002f","556c26f88a6b1c68290000f8"];

hideWidgetIds: In the [] list ALL hidden widgets for ALL tabs in the Tabber between “”, seperated by comma

Step 5 Multiple widgets

To place multiple widgets under one tab,please copy the js code below into the script editor:

 widget.tabsConfig = 'multiply'

Example:

Place two widgets on top of others:

Copy the js code below into the script editor: (do not forget to change widget ids)

widget.on('render',function(w, e){e.prefixText = '';
e.suffixText = '';
e.selectedColor = '#86b817'; /*The color of the chosen title*/
e.fontColor = '#cccccc'; /*The color of the unchosen titles*/
e.elementWidth = '103%';
e.descColor = '#a5a5a5';
e.parentMarginLeft = '-15px';
e.height = 32; /* affects the tabber widget default high*/
}); 

widget.tabs = [{title: "TAB 1 ", displayWidgetIds : ["57613637b2ea62dc36000004","57613637b2ea62dc36000006"],   hideWidgetIds : ["57613637b2ea62dc36000007","57613637b2ea62dc36000005"]},
               {title: "TAB 2", displayWidgetIds : ["57613637b2ea62dc36000007","57613637b2ea62dc36000005"], hideWidgetIds : ["57613637b2ea62dc36000004","57613637b2ea62dc36000006"]}
              ]; 

widget.tabsConfig = 'multiply';

Result:

03/09/2016 update:
Fixed column resizer issue
Added config to create multiple widgets in one row for one tab: (Add widget.tabsConfig = 'multiply' to widget edit script)

10/06/2015 update:

New implementation of the tabber.
Several assumptions that needed to take under consideration:

Widgets and tabber are divided to 2 different rows per column.
Each row contains only tabber/ tabbed widgets.
The # of widgets that will be shown at the same time is equal to the number of tabbers in the row above (so, not capable of toggling 2 widgets from the same tabber).

JJ Chritton April 15, 2019 15:33

It would also be nice to be notified when new versions come out, since it looks like Sisense released a new version on April 4 2019.

Are there any functionality changes with this new version? I didn't see any new release notes in the original post.

Dot Q May 15, 2019 16:55

Anybody been able to resolve Hunan and Kara's issues with not seeing any widgets at all? I am still seeing this error on version 7.3. Tried a lot of different options and none of them have been successful.

Mitch Siwy August 14, 2019 17:06

On 7.4.1 and have not been able to get widgets to display similar to Hunan, Kara and Dot Q. Sisense any advise?

Vivek makan October 16, 2019 17:49

Has anyone been able to successfully encode IMAGES instead of text for the TABBER plug-in. So instead of the word 'chart' it would be an image of a chart icon, same for 'graph' (displaying instead as a graph icon)?

This would be helpful if anyone has any of that code within the script.

Thanks!!

Ido Darnell October 22, 2019 09:11

Hi All,

Just jumping in here to tell you about our new plugin, the Dashboard Tabber

This plugin enables one to navigate quickly and easily between various dashboards from within the actual dashboard, without the need to navigate via the dashboard navigation pane. The various selected dashboards are independent by their Elasticube, widgets and filters, and can hold different filters between them. If they are all pulling data from the same Elasticube, they can have the same filters applied and these filters will stick during the navigation.

This plugin improves query performance as the various dashboards are loaded on demand, improving user experience by taking optimal advantage of dashboard real-estate and telling more with less.

Feel free to reach out for a live demo

Thanks

Ido

ido.darnell@qbeeq.pl

QBeeQ.pl

Sisense Partner of the Year 2019

Sisense Admin Bold November 26, 2019 16:24

Hello Guys,

We saw that using tabber plugins actually impacts the UX in terms of render time. So when you inspect element on a dashboard using tabber plugin, You will see the JAQL request as cancelled for all those widgets which are marked as hidden for the respective widget. These cancelled JAQL's actually adds stall time in the upcoming JAQL requests and hence increases the overall dashboard load time.

Anyone faced this issue and can suggest an alternative?

Thanks in advance!

Ankit Jindal

Ido Darnell November 26, 2019 16:58

Hi Sisense Admin Bold

Our Dashboard Tabber as detailed in the comment above, does just that,

Hendrik Hanneman December 02, 2019 19:17

Hi, great plugin, it is really helping with our dashboards.

One question: Is it possible to change the background color for the widget? I can change the text color but can't find code to change background color.

Thank you!

B RGDS

Hendrik Hannemann

Aaron Moyer December 30, 2019 22:16

Is there a way to use an IMAGE (ex: a simple grid icon) instead of the word 'Grid' within my Tabber application on a dashboard?

Thanks in advance!!

The Tabber Widget Switcher Plugin

Download and extract the enclosed folder into the plugins folder:

Comments

Didn't find what you were looking for?