Hiding Empty SharePoint Web Parts Using JavaScript/jQuery on a Dashboard Page

Note: The technique described below is designed for SharePoint 2013.  It could be adapted to 2010, but it’s not likely to work in 2010 with a simple copy/paste.

Note 2: This also should work just fine in Office 365, so get ready to knock some socks off.

In SharePoint 2013 we at itgroove have a lot of dashboards that we use for various purposes (the consultant dashboard, the GM dashboard, the president’s dashboard, and about 20 or so more) and one of the problems we always had was trying to jam more relevant content on to each dashboard, while simultaneously trying to reclaim as much space as possible (show the user what they need to see).

Enter the solution below.  It’s a piece of code designed to hide empty web parts on a SharePoint dashboard, if the contents of that web part is empty.  The reason this code works is that many of our web parts are simply list views of content already in SharePoint.  This code is mainly only going to hide empty list view web parts – so if you have a dashboard with other empty web parts (whatever those may be), you may be out of luck, or you may be able to adapt it somehow, but this is all you get from me for free. 

Note: We’re already including a jQuery library in our masterpage, and as such, I haven’t included a reference to bring in the jQuery library.  Essentially, if you don’t already have jQuery elsewhere on the page (or in the masterpage like I do), you can include the following line above the code below.

/* If you don’t have jQuery already included, use this */
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>

Essentially what the code below is doing is as follows.  The waitForSPReady method is essentially sitting in a loop waiting for SharePoint to be ready to perform the action in the main body of code.  If the method “SP.ClientContext.get_current” isn’t yet ready, SharePoint isn’t ready, so it will wait another 100ms and try again.  Once SharePoint is ready, cleanupEmptyWebParts is called, which gathers a collection of all the web parts on the page that have the CSS class “ms-list-emptyText-compact”.  It then iterates over that collection and for each valid item, it hides the web part if it successfully finds a match for the CSS class “ms-list-emptyText-compact” (you can never be too sure – that’s why there’s a bunch of code to test for it’s presence properly, and traverse around the DOM to find the right thing to hide).

Note: The variable “itgDebugEnabled” allows you to manually turn the functionality on or off, by setting this in a JavaScript variable somewhere in the page (set the variable to “true” to stop the code from processing).  If you want to set the variable, either you can set it in this code (somewhere earlier/outside the method) or it can be set in any other included file / script block on the page.

To add this code to a web part page, just add a “Script Editor” web part to the page, and include the code in there.

Note: The code below should work in all major (modern) browsers that are supported by SharePoint.  It’s been tested on all of the latest major browser versions (as of the publishing of this article).  I do not know how well it will work on significantly older browsers (like IE 7/8/9).

The code:
[code language=”javascript”]
<script type="text/javascript">
$(document).ready(function(){
setTimeout(waitForSPReady, 100);
});

function waitForSPReady()
{
if (typeof SP == "object" && typeof SP.ClientContext == "function" && typeof SP.ClientContext.get_current == "function")
{
cleanupEmptyWebParts();
}
else
{
setTimeout(waitForSPReady, 100);
}
}

function cleanupEmptyWebParts()
{
if (typeof itgDebugEnabled != "undefined" && itgDebugEnabled == true)
{
return;
}
var outerEltClass = "ms-webpartzone-cell";
var eltList = $(".ms-list-emptyText-compact");
var outermostID = "_invisibleIfEmpty";

if (eltList.size() > 0)
{
var iter = null;
var curItem = null;
for (iter = 0; iter < eltList.size(); iter++)
{
curItem = eltList[iter];
if (curItem.id == outermostID)
{
continue;
}
else
{
while (curItem.id != outermostID)
{
var foundItem = false;
var cIter = -1;
var maxIter = curItem.classList.length;
if (maxIter > 0)
{
do
{
cIter++;
if (curItem.classList[cIter] == outerEltClass)
{
foundItem = true;
break;
}
}
while (curItem.classList[cIter] != outerEltClass && cIter < (maxIter – 1))
if (foundItem == true)
{
$(curItem).css("display", "none");
break;
}
}
curItem = curItem.parentNode;
}
}
}
}
}
</script>
[/code]

Before:
(Note the 5 empty list view web parts + my tasks)

After:
(Now only my tasks are left – I’d show you all the empty whitespace on the screen, but there’s not a lot of point )

Hopefully you find this as useful as I did.