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 
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.
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).
-
Latest released 01/2017 version conflicts with PDF download functionality. We are currently on V6.5.2.11007 and whenever we try PDF download of a dashboard with Tabbers, it gives "Error:Can't find variable:left at at http://localhost:8081/js/common.js?g=gofocobbAAc:61:1506 at forEach([native code]) at trigger...." So can you provide a fixed version or share link of latest version.
-
Hi everyone,
I've been using Tabber for a little while now and I love this plugin. But I find it's a bit difficult to manage the script when you have more than two tabs. I'm not a Javascript expert at all but after a little experimenting I came up with the following code to make managing the different tabs a little easier.
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*/
});
var tab1 = ["5a65dd3aacc5a4c19d92b08a","5a6aec7f3d2ebb0df8439b34"];
var tab2 = ["5a65dd4bacc5a4c19d92b093","5a6aec7f3d2ebb0df8439b35"];
var tab3 = ["5a685a59b1af8dbb8cc23497","5a6aec7f3d2ebb0df8439b36"];
widget.tabs = [{title: "TAB1", displayWidgetIds : tab1,
hideWidgetIds : tab2.concat(tab3)}
,{title: "TAB2", displayWidgetIds : tab2,
hideWidgetIds : tab1.concat(tab3)}
,{title: "TAB3", displayWidgetIds : tab3,
hideWidgetIds : tab1.concat(tab2)}
];
widget.tabsConfig = 'multiply';Basically I've created three arrays (tab1, tab2 and tab3), one for each tab I would like to display, containing the IDs of the widgets that should be visible on each of these tabs. This allows you to define the arrays once and then reference them when you're displaying and hiding widgets. So there's no more reason to repeat the same long character sequences for every time you're displaying or hiding specific widgets.
I'm using concat to combine the values of multiple arrays into a single array which is required if you're working with more than two tabs. You can keep chaining the concat-method if you have more than three tabs like this:
tab1.concat(tab2).concat(tab3).concat(tabx)...
Hope this is useful for those of you who have more than two tabs and are having difficulty managing the Tabber-script.
-
Is there a way to get the titles of the tabs not to be in upper case, and respect the cases of the titles you give them?
If this is the first line for my tabs:
{title: "Tab1", displayWidgetIds : ["5a7b4fe719a5hd3fe8bc1e85"], hideWidgetIds : ["5a7b50d329a5ba3fe8bc1f8b"]}
I would want the tab on the widget to read Tab1, not TAB1.
-
Hi Emma,
I haven't tested this myself yet, but I think you can make the widget respect the case of the titles you give them by modifying the file called widget.css, generally found in the folder C:\Program Files\Sisense\PrismWeb\plugins\WidgetsTabber on the server that's running Sisense.
There's a section called .defaultCSS that contains the style text-transform: uppercase;. That's most likely the code that's transforming your tab titles into uppercase. Removing this line of code should solve your problem. You can also comment it out instead by enclosing it within comment tags like this /*text-transform: uppercase;*/
Let me know if that worked for you.
Rolf
-
For some reason, one of the widgets associated with my dashboard Tabber Add-On is not displaying any data when the tab is selected. I have to hit F5 or Ctrl+F5 to retrieve the required metric. As you may understand, I cannot ask my end user to hit F5 anytime she wants to see the information from that tab. Does anyone have a take on this issue?
-
I have used this plugin and is working but I have faced two issues which I would like to mention here:
1 - I have create two rows in the tabber and each row shows two indicator. Two is on for first row and the same is hidden for second row. Now when switch to first tab then it shows me two indicator and when I switch to second tab then it shows me only one. In order to see the second indicator I have to drag the visible indicator to the bottom and then I see the second indicator.
2 - Tabber widget is showing the header of the widget where I can see the title tootip and other options. How can I hide and unhide the tool bar of this widget.
Can anyone please help me on this?
Thanks,
Ravi
-
Hi Jim,
Confirming, are you placing two widgets side by side and then hiding one of them, causing the other to expand?
If so, have you tried stacking the two widgets instead? That way they're full-width on PDF export (though, again, the hiding function of the tabber is moot at that point).
-
Huanan & Kara -
I was having the same problem. I was using "prism.activeDashboard.widgets.toArray()" via the console to grab widget IDs. If you are doing something similar, make sure you're using the "oid" within that array rather than the first "_id" shown. This solved my issue.
Additionally, if you copy/paste the following from the first page, the script will not show an error and ignore everything. Something with the way the quotations are formatted around the "multiply" causes an issue.
widget.tabsConfig = 'multiply';
-
@Huang,
You can add "old school" on.click listeners to the tab's buttons.
Ping me if you need assistance
-
I'm also having the issue where the tooltip text is showing up in the tabber, which is kind of bizarre. We're on version 7.1.3 and seeing this with the latest tabber version.
I will add that the PDF export behavior for tabber is frustrating when it shows all widgets, so we avoid using it in most cases. Frustrating behavior for a plugin that's officially supported.
Please sign in to leave a comment.
Comments
64 comments