Hide Widget Titles
Download: Hide Titles
Introduction
This article explains how to hide widget titles in Sisense.
Purpose/Benefits
Sisense widgets come with white header bars meant to show titles. Depending on your widget, you may want to remove this title bar. This plugin adds a menu option for hiding the title bar.
Steps
The following steps will walk through the process of adding the plugin and creating a custom filter.
Step 1 - Add the Plugin
Download the attachment and unzip the contents into your C:\Program Files\Sisense\PrismWeb\plugins\ folder. If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder. If the plugins folder doesn't exist, just create it. After those files have been unzipped there, you may also have to restart the web server. Now when you create/edit a widget, there should be a settings menu for hiding the widget title.
Notes
- This plugin supports the native Sisense charts, along with the Custom Filters Plugin. If you want to adjust this for additional plugin chart types, then open the hideTitles.js file and modify the chartTypes object. Each object in this dictionary represents a chart type and provides a jQuery selector (required) for the container element and a customerFormatter function (optional) if anything custom is required to reformat this chart type. Simply add your custom chart type to this dictionary and apply any custom formatting as needed.
- Normally moving widgets around on the dashboard is done by dragging from the widget's title bar. When you hide the title bar, you are reducing the area available to click on for this drag and drop positioning. An easy solution is to remember that the top left corner of each chart has six white dots, which represents the dragging option. You can always click here to drag your widget around the dashboard.
- This plugin still displays the edit widget, widget menu, and clear selection icons in Designer mode.
- UPDATED July 5, 2016 - Updated to work with the new image widget
- UPDATED September 26, 2018 - Updated to work with Smart Label widgets
-
This is nice idea to gain valuable real estate in your dashboard. Does it require a custom object for pie charts and indicators? With pie charts you can see in sisense_hidetitle1.png (with plugin applied) that the pie chart is not vertically center-aligned... it is shifted slightly up. When I try to shrink the widget size vertically to remove the extra white space at the bottom, it instead automatically re-sizes the content of the widget in an undesirable way (see sisense_hidetitle2.png). Also, indicator widgets don't seem to benefit from the extra real estate this plugin provides, as far as I can tell.
If custom JS is needed for vertical alignment & re-sizing behavior, can you provide some guidance for pies and indicators?
sisense_hidetitle1.png
sisense_hidetitle2.png -
Great plugin,
But... there seems to be a problem with this plugin and the Pivot Table Widget.
When using a Pivot Table and activating the "Hide Title Bar" option, the page numbers at the bottom of the widget disappear after clicking one of them.It took me a while to figure out what was causing my page number to vanish, so I though I should let you guys know.
And if someone would have a look at it, this plugin could become even more useful.
Anyway thanks !
-
Pascal, I had the same problem. I know why it happens, just not clear on how to fix it. Basically, the p-container div height gets larger by the titleHeight (default 32px) every time the pivot widget draws itself. Clicking a page number re-draws the widget, which increments the p-container div height and makes the pagination controls that are part of the footer (p-foot div) get pushed down out of the visible widget window.
Unfortunately the plug-in JS has no custom formatting for pivot widgets, although there is some custom formatting consideration for pagination on table widgets. I assumed it might be similar and tried replicating that to pivots, but it didn't work. Maybe someone with a better understanding of pivot widget elements can provide some guidance?
-
Hi Evan,
I can see the behavior you're describing in version 6.6, but a coming change to the pivot table (version 6.7) actually resolves this issue. I think in previous versions of Sisense, the pivot table got completely redrawn. In the latest version (currently beta), the rendering is a bit more efficient about redrawing. Check out the screenshot below to see what it looks like.
-
You can hide the header of the widget using this under script editor:
var titleBar = $('[widgetid='+widget.oid+']').find('widget-header');
titleBar.hide();The drawback is that this operation cannot be reversed (not easily, however).
So, if you want to go back and edit the script behind the widget, you need to navigate the DOM through "Inspect" option and change 'display: none' to 'display: all' for "widget-header" element
-
How do I find the jQuery Selector for the Tabber plugin?
It looks like the .js file has a section called Utility Functions, and one of those is titled "get the selector" but I am also not sure how to use these functions to get that information.
I presume it will be something like the following, but I don't know how to verify the selector section (I just guessed based on the other chart types in the file)
Tabber: {
selector: '.Tabber-Container',
}, -
For Smart Label widgets, edit the JavaScript file 'hideTitles.js' and add the following within the 'Formatting Options for each chart type' and above 'Utility Functions'. Note, depending on where you add it, you may not need the final comma
smartLabel: {
selector: '.smartLabelContainer',
customFormatter: function(widgetElement, widgetContainer){
// Apply default formatting
defaultFormatter(widgetElement,widgetContainer);widgetContainer.css('position','relative');
}
}, -
We have a pretty significant usability issue when we use this for bar charts that allow filtering by selecting a bar, the "clear selection" option is visible on the widget but clicking it has no effect when viewing the dashboard. So in order to remove the filter, you have to go through the filters sidebar, which isn't terrible, but the fact that the clear selection button does not work is unintuitive.
-
You can download the plugin from the https://support.sisense.com/hc/en-us/articles/115009313608-Sisense-Plugins-List page by selecting the download option.
-
Hi Hendrik,
If you go to the edit screen of the Blox widget > Snippets > Attributes > Hide Widget Title, it'll show you the code to hide the title. Here's the script in case you don't find it, and it goes into the Blox Editor, not in the widget script window:
"titleStyle": [{"display": "none"}], -
Has anyone been able to apply this to WISER or TABBER plug-ins, as the space used for the TITLE bar is quite a bit of real estate --- being able to show/hide that bar by widget would be IMMENSELY useful....
Please let me know if you have any code/updates (specifically for WISER/TABBER) to hide their respective title bars.
Thanks very much!!
Please sign in to leave a comment.
Comments
31 comments