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).
-
Hi Michal,
I'm glad you like our new plugin. I believe you will find it very useful.
The reason I did not attach the dashboard is because it's per URL.
I'm attaching it here as a .dash file but keep in mind that you need to change all widget ID in the code to the new ID the dashboard will present.
Best,
Inbal
EcommerceTabber.dash -
This is a great plugin, but I get problems when adding 2 Tabber widgets in the same dashboard.
My scenario -
Tabber 1 controls 2 widgets - Departments and Employees.
Tabber 2 control 2 widgets - Local Tasks and Master Tasks.When I click 'Master Tasks' on Tabber 2 it also switches the Tabber 1 widgets (But not vice versa). I have checked all the widget ID's and everything appears to be setup correctly.
Would having both Tabbers in the same dashboard column cause this issue?
Thanks
Jason
-
Hi Inbal,
I applied this plugin to add 3 tabs on my dashboard, each tab displays 1 table and 2 charts. But somehow every time i load the dashboard the 2 charts on each tab are overlapping resulting in poor visibility/understanding of the charts. What can I do to resolve this ?
Regards
Pooja
-
Hello there,
This is a great plugin, solves a lot of our issues. After implementing this to our dashboards we have the following issues:
1. When we change the tab to tab 2, we are losing part of our bar chart. (screenshot2).
2. In every refreshing or filter changing or hide filterbar tabber switch to the first selection.
Is there any way to solve these issues?
thanks
-
I'm having the same issue as Michael. The Tabber widget works perfectly, up until you change something. If I expand/collapse the filter pane, change a filtered value, etc the tabber loses focus on the widget it is suppose to display. Is there a way to persist the Tabber selection during a change to the dashboard state?
-
Hi Everyone,
Thank you for all your comments.
We understand the incidents you are having.
You have to keep in mind that the Plugins are not features within the system and therefore there is a chance it will not work with some of the other features.
With that said the Tabber Plugin is a Plugin that a lot of our users use and we received a lot of comments about it good and bad.
We are doing our best to solve all Tabber issues and will upload a new version of the plguin soon.
Best Regards,
Inbal
-
I have added the code to my dashboard to hide the widgets, however, the query is still showing that is is loading all of the widgets. In the attached image, I have only 4 visible widgets when the dashboard loads, but the UI shows that it is loading 0/11. I feel like it really is running all of the queries because when I go to another tab, it comes up immediately, with no lag at all. This is the code in my dashboard:
dashboard.hideWidgetIds = ["5662f8e8a668bc6033000113","5662f8e8a668bc6033000111","5662f8e8a668bc603300011c", "5662f8e8a668bc6033000119", "5662f8e8a668bc6033000117", "5662f8e8a668bc603300011a"];
Do i need anything else around this code to stop the queries from running?
-
Helps if I attach the image... :-)
Demographics.PNG -
I believe what it is currently doing is just HIDING the widget. The widget itself is still loaded and the accompanying query against it is still being executed. What the Tabber simply doing is allowing you to get more out of your valuable real-estate. I agree with you that it should actually stop the execution of any hidden widget.
-
In Step 4, the comment about improving performance made me think that the query wouldn't run:
"In order for the Tabber to not affect dashboard performance, we first hide all Tabber widgets from dashboard and run the widget only when the are called through the Tabber ."
But I agree, after working with it, it appears that it doesn't affect the query performance, just the UI.
-
Thanks for this plugin!
We've noticed one issue on our install - with Tabber installed the ability to resize dashboard columns - even without the widget running - is gone. Is this a known behavior? Is this possibly due to a conflict with another plugin?
We're running 6.1, planning on upgrading to 6.2 shortly. Thanks for any help you can provide!
-
@Geoffry - Yes we have the same problem. This widget has caused various knock on effects since it was released, the latest version fixed a bunch of those, but introduced this problem. It clearly has not gone through any sort of testing despite it being written by a Sisense employee, but thats the risk we take using these officially unsupported widgets. Also we just upgraded to 6.2 this evening and as expected this issue remains. So we are going to refactor several dashboards so we can get rid of the plugin.
-
Thanks for the Plugin,
Can i hiding Text Widget? cause in Text Widget i can't know the widget number.
3-24-2016 3-55-01 PM.jpg -
Morning all,
There seems to be an issue with the plugin, where individual widgets can't be resized. Instead of being able to 'drag up' or 'drag down' when resizing, a red bar appears and nothing happens. This can be worked around by re-adding the widget, but this can get a bit annoying after a while :-)
Is this a known issue?
-
I'm having trouble setting up tabber with 3 tabs with 2 widgets each. The first tab always loses the 2nd widget. Also, I keep having issues with widgets vanishing in the area where the tabber is created, preventing me from doing any work on the widgets in the tabs after the tabber is created. If I need to make any kind of change, I have to delete everything (the tabber widget and all related widgets) and start from scratch. Any ideas?
Here's the code:
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: "Business Breakdown", displayWidgetIds : ["57ec22f7ba56358c8e001xxx","57ec2305ba56358c8e001yyy"],
hideWidgetIds : ["57ec24afba56358c8e001aaa","57ec2305ba56358c8e001bbb","57ec253cba56358c8e001ccc","57ec2547ba56358c8e001ddd"]},
{title: "Country Breakdown", displayWidgetIds : ["57ec24afba56358c8e001aaa","57ec2305ba56358c8e001bbb"],
hideWidgetIds : ["57ec22f7ba56358c8e001xxx","57ec2305ba56358c8e001yyy","57ec253cba56358c8e001ccc","57ec2547ba56358c8e001ddd"]},
{title: "Office Breakdown", displayWidgetIds : ["57ec253cba56358c8e001ccc","57ec2547ba56358c8e001ddd"],
hideWidgetIds : ["57ec22f7ba56358c8e001xxx","57ec2305ba56358c8e001yyy","57ec24afba56358c8e001aaa","57ec2305ba56358c8e001bbb"]}];
widget.tabsConfig = 'multiply';
-
Rob you should try using Notepad++ do write out this script...I always name out all of my widget in note lines that way you can highlight and track where it is Displayed and Hidden and verify you have it setup correctly. Check out my PNG attached.
Tabber.PNG -
@Jayesh @Itai I noticed that if we add a tabber widget and immediately tried to edit the script, it would not show until we apply the widget to add to the dashboard and then go back into the editor and edit script. If this is not the case, can you please describe what exactly is happening in further detail?
@Louise Do you have any scripts or plugins applied on that dashboard?
Please sign in to leave a comment.
Comments
76 comments