Tabber

By:
Sisense
The Tabber add-on creates a new widget that allows you to switch between views easily and quickly without changing the dashboard. 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 ). This widget is designed to be used only once per dashboard. Note: The Tabber add-on does not support saving the Tabber state after refreshes or filter changes.

To install the Tabber add-on:

  1. Download the attachment.
  2. Extract the .zip folder into the plugins folder. If the folder does not exist, create it prior to extracting the .zip file.
    For V7.1 and earlier
    : C:\Program Files\Sisense\PrismWeb\plugins
    For V7.2 and later
    : C:\Program Files\Sisense\app\plugins
  3. In the Sisense Web Application, create a new widget. The Tabber widget is displayed in the list of options.
  4. Click Apply to create the widget.
  5. Open the script editor of the Tabber widget.
  6. Paste the following code 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"]}
    		];
  7. Each row represents a different tab. The order of the tabs is according to the rows as the appear in the code.
    displayWidgetIds: Within the [] , write all the widgets ID’s you wish to display under the specific tab in “”, separated by comma.
    hideWidgetIds: In the [] write all the widgets ID’s you wish to hide from the specific tab in “”, separated by comma. The widget ID appears in the widget URL. You can view the URL when editing a widget. The widget ID is displayed at the end of the widget URL, for example:
    http://localhost:8081/app/main#/dashboards/55797a3542f03101100002c/widgets/55797a9459ef031011000032. The widget ID is: 55797a9459ef031011000032.
    You can change the Tabber design such as the font color. See the available options as comments in the code example above.
  8. Click Save and close the window.
  9. Refresh the widget and click Apply.
  10. To place multiple widgets under one tab, copy the JavaScript code below into the script editor at the end of your script and save the changes:
    widget.tabsConfig = ‘multiply’
This is a free add-on, click here to get it now.
  • Category:
    • Navigation
  • Last Updated
    9 months ago
  • Earliest Supported Version
    6.7
  • Latest Supported Version
    7.2
  • Tags
    • tabs
    • transition
    • visualization