Hide your dashboard breakdown on specific tab

Learn how to hide and show the dashboard breakdown selector depending on which tab is selected.

Dashboards can contain both Performance Analytics widgets as well as reporting widgets. With PA, your indicators should have a fair number of useful breakdowns. To empower users to gain a better understanding of the information presented, as well as tailoring it to their needs, you’ll want to add a dashboard breakdown. This enables the dashboard to be filtered, so the widgets following the filter only show a subset of data.

But while Performance Analytics excels at showing trends and historic data, its real-time data capabilities are limited to only single score-widgets. Oftentimes in order to get your dashboard to tell the full story, you also need to include regular reporting widgets. And sure, these widgets can follow the dashboard breakdown as well, if you have a corresponding interactive filter set up. The problem is that sometimes, the dashboard filter cannot be applied to reporting widgets. This could be the case for scripted breakdowns, or if you want to leverage a custom interactive filter.
Or maybe you just want a special dashboard tab containing a list widget with multiple interactive filters next to it, to really let the users dynamically dig into the data in a way dashboard breakdowns just can’t offer.

This can become a problem causing confusion to the user. There is a filter at the top of the dashboard, but it does not apply to every widget. How will they know if the data they are looking at is from only high priority incidents, or all incidents? Users will start to lose trust in the dashboard, which is really bad.

So you’ll start looking for a way to only show the dashboard breakdown on specific tabs, only to find you can’t. Or you’ll start adding text to your dashboard trying to explain which widgets are filtered, taking up valuable screen space and distracting the user. Or you’ll restrict yourself to only using one kind of widget on each dashboard.

But actually, there is a way to hide the filter for specific tabs. It’s not pretty, and I really can’t recommend it. But it does work.

The hack to hide the dashboard breakdown

Since we have no setting to hide the filter, and no desire to modify the angular source scripts for dashboard, we have to look to using the tools we’re given to accomplish this. We can’t use client script or any of the normal tools applied to forms, since dashboards are a complete different application. We also need to tie our solution to specific tabs on the dashboard.

So we’ll use the dynamic content block. It gives us the ability to add and run our own javascript in the dashboard, which we can use to do DOM manipulation. As I said, it’s not the pretties solution.

Start by adding a new Dynamic Content block from the side panel, you’ll find it under “Content Blocks”:

It’ll render on the dashboard, click the link in the widget to get to the edit form:

Next, name the widget “HideBreakDown” and paset the following code on the third line:

	<script>
	var breakdownSelector = document.getElementById("snCanvasBreakdownBar");
        breakdownSelector.style.display = "none";
	</script>

The form should now look like this:

Click submit to be redirected back to the dashboard. As the widget loads in, you’ll see the dashboard breakdown quickly show up then disappear.

This javascript will look for an element with the id “snCanvasBreakdownBar” in the dashboard, and set it to not display. The container for the breakdown source and breakdown element selector has that ID, so it becomes hidden. The problem is that as you switch tabs, the page itself is never reloaded. And so the dashboard breakdown remains hidden.

So we have to create an additional widget to show the filter again. Then we can and add it to all the tabs where we want the dashboard breakdown to display.

We add a new dynamic content block and paste the following code at line 3:

	<script>
	var breakdownSelector = document.getElementById("snCanvasBreakdownBar");
        breakdownSelector.style.display = "";
	</script>

Name the block “ShowBreakDown”:

This code sets the display property to none, basically removing the attribute set by the other content block. Now the dashboard breakdown will show and hide as we switch between the tabs:

Making our widget invisible

Notice however, that the widget containing the javascript is visible. We can set it to not have a header or border, and drag its size down to a minimum, but the minimum height of a widget in a dashboard is always 86 pixels:

Se let’s just place it on the bottom of the page right? Unfortunately we can’t do that. Since dashboards load widgets as we scroll, a widget at the bottom of the tab might be outside the screen and wont load until we scroll down to it. That means the javascript wont run and the dashboard breakdown’s visibility wont change. Ideally, we want our dynamic content block at the very start of the page.

If we go into our browser inspector, we can see that not only is the min-height of the widget 86 pix, but the row below automatically get a static top-element of 96px, meaning that even if we reduce the height of our hidebreakdown-widget, there will still be a blank space on the dashboard canvas unless we also iterate through all the rows and change the positions.

An easier solution would be to simply move the entire canvas up 86 pixels. So we’ll add the following code to our widget:

var gridContainer = document.getElementsByClassName("grid-stack-container");
gridContainer[0].style.marginTop = '-66px';

This will find the element with the class “grid-stack-container” and apply a negative top margin to it, thus moving it up an hiding the top row.

The result is that the top grid row, containing our widget, is now slightly outside the tab canvas, marked by red in this image:

Now it looks better, but functionality wise it is worse. Since we cannot access the widget’s header, which is outside the screen, we cannot edit or remove it.

So we’ll add the following code to our widget:’

	        var y = document.querySelector("[aria-label='HideBreakDown Widget']");
		var yx = y.childNodes;
		var yxx = yx[0];
		yxx.style.height = "25px";
		yxx.style.marginTop = "66px";

This will find the element with a label “aria-label” and value “HideBreakDown Widget”. This is the container for our widget. With this element identified, we then find all the child nodes and return them in an array. The first element in that array will be the header div of the widget, to which we will apply a height and top margin. This will push our widget header down and outside the actual widget container.

This is the solution that I’ve found works. Simply setting the position of the header to the bottom of the widget div will not work, as this breaks the buttons. So we have to keep the headers position in the “top” position, and the apply a margin to move it down.

When viewing the dashboard the widget is not visible, provided we have removed the header and border:

But when we open the dashboard panel and maneuver the pointer over the top of the dashboard canvas, the header row of our widget will show up and we can click the buttons:

Well paste the code into our other widget, “ShowBreakDown” and that’s it!

The final version of the widget to hide the dashboard breakdown:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<script>
		var breakdownSelector = document.getElementById("snCanvasBreakdownBar");
        breakdownSelector.style.display = "none";
		
		var gridContainer = document.getElementsByClassName("grid-stack-container");
		gridContainer[0].style.marginTop = '-76px';
		
		var y = document.querySelector("[aria-label='HideBreakDown Widget']");
		var yx = y.childNodes;
		var yxx = yx[0];
		yxx.style.height = "25px";
		yxx.style.marginTop = "66px";
	</script>

</j:jelly>

And the final version of the widget to show the dashboard breakdown, don’t forget to add this to every tab where the breakdown should be displayed:

And the script is pretty much the same except the styli tag on the breakdownselector:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<script>
		var breakdownSelector = document.getElementById("snCanvasBreakdownBar");
        breakdownSelector.style.display = "";
		
		var gridContainer = document.getElementsByClassName("grid-stack-container");
		gridContainer[0].style.marginTop = '-76px';
		
		var y = document.querySelector("[aria-label='HideBreakDown Widget']");
		var yx = y.childNodes;
		var yxx = yx[0];
		yxx.style.height = "25px";
		yxx.style.marginTop = "66px";
	</script>

</j:jelly>

Here it is in action:

2 Comments

Leave a Reply

Your email address will not be published.

  1. A brilliant solution for this limitation! Just what we needed, works perfectly. You’ve already helped me several times in SNOW Community. Glad I found this post through google.

    Thank you, Nik.