fbpx

Company News

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

June 22, 2014

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.  Winking smile

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:

<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>

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

image

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 Smile)

image

Hopefully you find this as useful as I did.

13 Responses

  1. mattia says:

    I tried to follow your procedure . I put the js file into :

    C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTS1040

    And in my SD I modified the masterpage with that code , but it seems not work :

    I probably made ​​a mistake….but Where ?

  2. Swap says:

    @mattia

    Just add script editor webpart and insert above script.

    Swap

  3. Sylvain says:

    I confirm that is not working for IE8.
    Do you have another saolution for IE 8 with SharePoint 2013 … other to change the browser ?

    • phil says:

      I know this post is a few months old, but I have verified this works with IE8,

      _spBodyOnLoadFunctionNames.push(“HideEmptyWP”);
      function HideEmptyWP() {
      jQuery(“td:contains(‘There are no items to show in this view’)”).closest(‘[id^=”MSOZoneCell_WebPart”]’).hide();
      }

  4. Chris says:

    I have tried to add this to a new SP2013 environment but it does not work. Added using a script editor. Included the call to the external jQuery library. Also added my own jQuery library to the site collection root and pointed there. Still nothing. Anyone else have problems but resolve them?

  5. Mel says:

    I’m having the same issue as Chris.
    1. Create new page. Text layout, single column.
    2. Add a few web parts, one of them being an empty library.
    3. Add Script Editor web part and paste in the code above.
    4. Save page.

    The empty web part is still showing. I’m on SharePoint 2013 Standard and this is a Team Site. Do you know if there’s a site feature that needs to be enabled. For some reason Managed Navigation and Filtering had to be enabled before the javascript on another page would work. I have screen shots if need them.

  6. Keefer says:

    Is it possible to hide empty web part zones in a similar manner?

  7. Ann says:

    Thank you for the code! It work perfectly. I’m wondering if there a way to do the same for cross-site list view?

  8. Richard says:

    Hi there, further to my previous thread, I have just done a quick test and can confirm the script cannot affect the Content Search Web Part. I have added a normal list web part on the same page and it works perfectly. Is there any way to improve the script?
    thanks,

  9. Carlos says:

    Hello, i just have a doubt.
    I have 3 lists:
    – Users
    – Laptops
    – Screens

    Where the Name of user is the link between Users and Laptops and Screens.

    The main List is the Users.

    And i’ve just used your code to hide laptops or screens if they are attach to a user.

    But, now i have a situation, in my Display View for each user, i can see the data from the User, and the data of Laptops and Screens.

    But in the web part of Laptops and Screens i want to hide the related column, “Name”, from the Laptops/Screens webparts.

    How can i do it?

    Thank you!

Leave a Reply

Colin Phillips

itgroove Alumni

Colin Phillips

Subscribe via Email

Categories

Powered by...

itgroove Corporate Profile
Connect With Us