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. Reportingg widgets can follow the dashboard breakdown, 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 your breakdown is based on a field type that interactive filters do not support.
Having some widgets filtered and some not is a problem. How is the user to know if the widget they are looking at is based on filtered data or not? In the end, this can lead to the user losing trust in your dashboard.
You can try and handle this scenario in different ways, none of them very good. You can add text containers to your dashboard trying to explain it to the user, taking up valuable screen space and potentially causing confusion. Or you can stick to only using widgets that can be filtered, limiting what you can visualize. Or you can have separate dashboard the user has to switch between.
A much better solution would be if the filter could be hidden for specific tabs to which it does not apply. Well, there is a way to do just that. This is something I do not recommend you add to your dashboard in most cases. It is not something that is intended to be done, and might stop working as changes are made to dashboard in updated version. Basically, it is not best practice.
But it works, and in some cases you just need it.
Applying Content Blocks
We have very limited access to change the behavior of our dashboard. We cannot, and do not want, to modify the source files making up the dashboard. And we cannot use normal form tools like UI policies or Client Scripts.
What we do have is dynamic content blocks. These can contain javascript functions, which can run as the widget is loaded on the dashboard.
Using this functionality, we can create a function that uses DOM-manipulation to hide the breakdown filter.
Start by adding a new dynamic content block to your dashboard:
The open the form to configure the widget. Name the widget "HideBreakDown" and add the following script into the script field:
<script>
var breakdownSelector = document.getElementById("snCanvasBreakdownBar");
breakdownSelector.style.display = "none";
</script>
This script will find the element with the id "snCanvasBreakdownBar" and set it to not display. This is the container of the dashboard breakdown. When the widget loads, the filter will be hidden. Here it is in action:
Now we have our solution for hiding the filter. The problem is that it will stay hidden on all tabs, until the dashboard is reloaded. So we also need a widget to make the filter visible on other tabs.
Create another dynamic content block and name it "ShowBreakDown". The script will be almost the same, but instead of setting display to "none" we will remove the property, causing the filter to appear:
<script>
var breakdownSelector = document.getElementById("snCanvasBreakdownBar");
breakdownSelector.style.display = "";
</script>
With our new widget on the other tabs, the filter will now hide and appear as we switch between the dashboard tabs:
Hiding the widget
One problem is that we have a big blank widget on our dashboard. We need this widget to be at the top of the dashboard as it needs to load as soon as the tab is selected. Placing it at the bottom might cause it to be beneath the visible part of the screen, which means it wont load until the user scrolls. If the widget doesn't load, it wont run the function.
We can se the widget to not have a header or border, and drag it down to the minimum size. The problem is that no widget can be lower than 86 pixels, so we'll end up with a big white space:
We could use this widget to display additional information, like a nice looking header or some text. But in most cases we don't want it to show at all.
The easiest way to do this while still maintaining functionality is to manipulate the margins. Update your dynamic content block to use this script:
<?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>
What this will do is to first identify the container for the the dashboard canvas, and push it up 76 pixels. This will place the widget outside visible part of the canvas:
But as the widget is now outside the canvas, we can't access the header icons to update or remove it. So what the next part of the script does is to find the widget based on its name, and push it down. This will place it behind the other widgets. The end effect is that you will be able to access the header icons, while still hiding the widget if not in edit mode:
We need to do the same update for both the "HideBreakDown" and "ShowBreakDown" widgets.
The finals scripts will be:
HideBreakDown:
<?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>
ShowBreakDown:
<?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's the completed widgets in action, as well as an example of how the header is still accessible:
Like I wrote at the start, this is not a solution I recommend using for all your dashboards. But if you have a specific hard requirement for this, its use can be motivated. Don't forget to add either the show or hide widget to all the tabs in the dashboard. Also be aware that when exporting the dashboard, our newly added widgets will show up as white boxes.
If you found this article useful, check out some of the my other ones:
- Making Reporting and Day-To-Day Operations Easier by Adding SLA Fields To Tasks [Update Set]
- 6 Color Schemes To Give Your Dashboards a New Look - Including Update Sets
- Understanding How and When SLAs Are Calculated, and How It Might Affect Your Reports
You can also read more on my blog performinganalytics.com
/Niklas Engren
