![\"Winking](\"https:\/\/mmman.itgroove.net\/wp-content\/uploads\/mmman\/2014\/06\/wlEmoticon-winkingsmile.png\")
<\/p>\nNote: The technique described below is designed for SharePoint 2013.\u00a0 It could be adapted to 2010, but it\u2019s not likely to work in 2010 with a simple copy\/paste.<\/p>\n
Note 2: This also should work just fine in Office 365, so get ready to knock some socks off.<\/p>\n
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\u2019s 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).<\/p>\n
Enter the solution below.\u00a0 It\u2019s a piece of code designed to hide empty web parts on a SharePoint dashboard, if the contents of that web part is empty.\u00a0 The reason this code works is that many of our web parts are simply list views of content already in SharePoint.\u00a0 This code is mainly only going to hide empty list view web parts \u2013 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.\u00a0 <\/p>\n
Note: We\u2019re already including a jQuery library in our masterpage, and as such, I haven\u2019t included a reference to bring in the jQuery library.\u00a0 Essentially, if you don\u2019t already have jQuery elsewhere on the page (or in the masterpage like I do), you can include the following line above the code below.<\/p>\n
\/* If you don\u2019t have jQuery already included, use this *\/ Essentially what the code below is doing is as follows.\u00a0 The waitForSPReady<\/span> method is essentially sitting in a loop waiting for SharePoint to be ready to perform the action in the main body of code.\u00a0 If the method \u201cSP.ClientContext.get_current<\/span>\u201d isn\u2019t yet ready, SharePoint isn\u2019t ready, so it will wait another 100ms and try again.\u00a0 Once SharePoint is ready, cleanupEmptyWebParts<\/span> is called, which gathers a collection of all the web parts on the page that have the CSS class \u201cms-list-emptyText-compact<\/span>\u201d.\u00a0 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 \u201cms-list-emptyText-compact<\/span>\u201d (you can never be too sure \u2013 that\u2019s why there\u2019s a bunch of code to test for it\u2019s presence properly, and traverse around the DOM to find the right thing to hide).<\/p>\n Note: The variable \u201citgDebugEnabled<\/span>\u201d 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 \u201ctrue\u201d to stop the code from processing).\u00a0 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.<\/p>\n To add this code to a web part page, just add a \u201cScript Editor\u201d web part to the page, and include the code in there.<\/p>\n Note: The code below should work in all major (modern) browsers that are supported by SharePoint.\u00a0 It\u2019s been tested on all of the latest major browser versions (as of the publishing of this article).\u00a0 I do not know how well it will work on significantly older browsers (like IE 7\/8\/9).<\/p>\n The code: function waitForSPReady() function cleanupEmptyWebParts() if (eltList.size() > 0) Before: After:
\n<script type=”text\/javascript” src=”http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.2\/jquery.min.js”><\/script><\/span><\/p>\n
\n[code language=”javascript”]
\n<script type="text\/javascript">
\n $(document).ready(function(){
\n setTimeout(waitForSPReady, 100);
\n });<\/p>\n
\n {
\n if (typeof SP == "object" && typeof SP.ClientContext == "function" && typeof SP.ClientContext.get_current == "function")
\n {
\n cleanupEmptyWebParts();
\n }
\n else
\n {
\n setTimeout(waitForSPReady, 100);
\n }
\n }<\/p>\n
\n {
\n if (typeof itgDebugEnabled != "undefined" && itgDebugEnabled == true)
\n {
\n return;
\n }
\n var outerEltClass = "ms-webpartzone-cell";
\n var eltList = $(".ms-list-emptyText-compact");
\n var outermostID = "_invisibleIfEmpty";<\/p>\n
\n {
\n var iter = null;
\n var curItem = null;
\n for (iter = 0; iter < eltList.size(); iter++)
\n {
\n curItem = eltList[iter];
\n if (curItem.id == outermostID)
\n {
\n continue;
\n }
\n else
\n {
\n while (curItem.id != outermostID)
\n {
\n var foundItem = false;
\n var cIter = -1;
\n var maxIter = curItem.classList.length;
\n if (maxIter > 0)
\n {
\n do
\n {
\n cIter++;
\n if (curItem.classList[cIter] == outerEltClass)
\n {
\n foundItem = true;
\n break;
\n }
\n }
\n while (curItem.classList[cIter] != outerEltClass && cIter < (maxIter – 1))
\n if (foundItem == true)
\n {
\n $(curItem).css("display", "none");
\n break;
\n }
\n }
\n curItem = curItem.parentNode;
\n }
\n }
\n }
\n }
\n }
\n <\/script>
\n[\/code]<\/p>\n
\n(Note the 5 empty list view web parts + my tasks)<\/p>\n![\"image\"](\"https:\/\/mmman.itgroove.net\/wp-content\/uploads\/mmman\/2014\/06\/image3.png\" "\\"image\\"")
<\/a><\/p>\n
\n(Now only my tasks are left \u2013 I\u2019d show you all the empty whitespace on the screen, but there\u2019s not a lot of point )<\/p>\n