11/03/2009

SharePoint: Hide a web part with zero rows

 

(I wrote this up a few months ago, and then forgot to post it. So here it is finally!)

 

Here’s a JavaScript trick to hide a list or library web part when there are no items in the list, or the current view used in the web part.

 

Steps:

  • On the same page as your web part, add a Content Editor Web Part (CEWP)
  • Select Edit and then Modify Shared Web Part
  • In the Advanced section set the Chrome to none
  • Click the Content Editor button and add the JavaScript from below
  • Replace "Test List" with your web part's name
    (If you don’t know the name or your guess does not work, view the HTML source of the page (View, Source in IE) and do a search for “summary=”.)

Note that the commented out section can be used to just hide the title bar instead of the entire web part.

 

<script>
function HideWebPartWithZeroRows()
{

  var a = document.getElementsByTagName("TABLE")
  for (var i=0;i<a.length;i++)
  {
    if (a[i].summary=="Test List")
    {
      if (a[i].rows.length==1)
      {
        //hide all but the title bar
        //var x =  a[i].parentNode.parentNode.parentNode.parentNode.parentNode

        //hide the entire web part
        var x =  a[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode

        x.style.display="none";
      }
    }
  }

}

_spBodyOnLoadFunctionNames.push("HideWebPartWithZeroRows") 

</script>

 

 

.

36 comments:

Anonymous said...

When I use this code, it hides the entire column (where I have another Content Editor Web Part) instead of just the web part with the empty list. Any ideas?

Mike Smith said...

Anonymous,

I should only hide the one empty web part. If that web part is the only one in the column, then the column might change width.

What you might try is to set the width property of the Content Editor Web Part to hold open the width of the column.

Mike

Italiano said...

I used the code as shown, just changed web part name and it will only hide the web part when I have one entry. Zero entries or 2 or more and it shows.

Mike Smith said...

Italiano,

You may be using a web part I have not tested with, or you may have set Chrome to None. In any case find this line:

if (a[i].rows.length==1)

and change the 1 to a 0 and see if it works.

Mike

Italiano said...

Thanks Mike, I am not sure what was happening, but it is working now. Thanks and thanks for the easy solution! This will come in very handy.

Unknown said...

None of my webparts on the page have a "summary" property.

Mike Smith said...

Ben,

> None of my webparts on the page have a "summary" property.

Which web parts do you have? The sample code should work on all web parts in the "Lists and Libraries" section of Add a Web Part.

Let me know which web part and I'll see what needs to be changed.

Mike

QQ said...

For some reason this doesn't work with Tasks for me. It used to, but then I changed the view to do a bit more filtering, and now even if empty it still returns rows==2..

Anonymous said...

SWEET! thank you for this - only thing it's not working with for me is announcements.... but I can live with that :) - THANKS!

Peter van der Smitte said...

BRILLIANT!

Exactly what I was looking for!

Thank you.

Anonymous said...

Excellent! Just what I needed.

not2technical said...

I have several lists I want to apply this to. Actually all lists on the page. I copied and duplicated the "if (a[i].summary==..." section and added the list names, one in each section. Unfortunately it works on 2 lists and not on two others. I copied and pasted the list names from the web page and SharePoint Developer. Any ideas?

Mike Smith said...

not2technical,

Which list types did it work on? And which did it not work on?

Also, SharePoint 2007 or 2010?

Mike

Josh Henninger said...

Can this be applied to SharePoint 2010? I was unsuccessful when attempting it.

Alan said...

I'd also like to know if this can be ported to SharePoint 2010.

Mike Smith said...

Alan and Josh,

Yes, it will work with 2010, with changes. In my book I have three versions of the JavaScript, one to hide a single empty web part, one to hide any number of empty web parts and one to hide all empty web parts.

I'll put adding this to the blog on my to-do list... it may be week or two.

Mike

Phil said...

I never saw the jQuery version of this, I am starting to learn it, figured I would give a little back :). Bit of a different take with jQuery, it searches for the "no items" text and hides the closest "MSOZoneCell", so it should work with any web part that displays the text. This would need the jQuery library loaded and script tags around it:

$(document).ready(function(){$("td .ms-vb:contains('There are no items to show in')").closest('td[id^="MSOZoneCell_WebPart"]').hide();
});

Anonymous said...

Very nice, thank you.

A question though - the web part appears on the page, then the script runs, then the web part disappears, making for a somewhat less than smooth experience. Is that expected? Is there a way to get around it?

Mike Smith said...

You could hide the web part first, using CSS or JavaScript, and then change the code above to show the web part if it has more than 1 row.

Mike

Cat said...

Phil, all the scripts weren't working for me (a few I found on many different sites) but yours worked! Thanks for posting the comment! :)

Anonymous said...

Mike,

I am using the code on a custom page. I am trying to hide 3 separate web parts, but each web part is a different view of the same list. Additionally, I am having a dickens of a time finding the web part name. Can I find the web part name in Designer?

Thank you for your help.

Carolyn

Mike Smith said...

Carolyn,

You will have to view the HTML source of the page (View, Source in IE) and do a search for "summary=". Watch for extra spaces. Copy everything in the quotes after the summary=.

Mike

Anonymous said...

Mike,
Thank you for the quick reply.
Unfortunately I am not able to locate the web part name. This is what I am doing...perhaps I am missing something.

> IE8
> Navigate to the desired page
> Select View from top menu and then select Source
> Search for "summary="
> Results: Summary= doesn't exist for these three web parts.

Is there another field I should be looking for...like ID or Name?

Thank you,
Carolyn

Mike Smith said...

Carolyn,

Which version of SharePoint? 2007, 2010, 2013?

Ordinary web list web parts? Or have then been customized with Designer?

Web Part Page or a 2010 home page?

Mike

Anonymous said...

Mike,

Which version of SharePoint? 2007

Ordinary web list web parts? Yes

Web Part Page or a 2010 home page? Web Part Page

Carolyn

treymayer10 said...

Is it possible to use this code to hide more than one webpart?

Anonymous said...

Thank you for this post! It works great!

I did have some of the same problems mentioned above, but a web guy I work with showed me some tricks.

For instance, I too had some trouble identifying the exact name of the list. He showed me to change the
a[i].summary=="Your List Name"
into
a[i].summary.indexOf("Your List Name") > -1

This basically turns it into a "like" statement and it finds the list. Also, this handles multiple views of the same list on the page without any fuss.

He also showed me how to account for more than one list of different names on the page in the same line by using a || such as
if (a[i].summary=="List1" || a[i].summary=="List2")
No other changes are required and all the lists disappear when empty.

Anonymous said...

Just what I needed!! Used this along with the previous post about using double pipes ("||") to indicate additional web parts and now I have a nice "Nag" web part that only bothers users that have left items checked out. Perfect!

Unknown said...

Mike did you post the changes that are necessary to get this to work in sharepoint 2010?

Anyone else?

Mike Smith said...

Peter,

It works with 2010 as is. Note that in 2010 the default text in the summary attribute is quite long. Example:

summary="Shared Documents Share a document with the team by adding it to this document library."

Mike

Unknown said...

Thank you, Mike. It's PERFECT!

Unknown said...

Thanks for posting a solution to exactly the problem I am having. Sadly it isn't working for me though. I'm using SharePoint 2007, with ordinary list view web parts in a Web Part page. I know the List name and it appears in the summary= part of the code.

The first time I tried it every web part (including non list view web parts) disappeared. I deleted it and tried it again and since then nothing has happened. I have tried =0, =1 and nothing seems to have any effect.

Have you any tips? This is the last problem I have with the site and for the life of me (and after many hours of trying all manner of fixes) I can't solve it.

Many thanks,

Caroline

Mike Smith said...

Caroline,

Did you copy or type the JavaScript code? The only way you could have hidden all of the web parts is if the "if" logic was not right. Check that you have two equals (==) in the "if" statements and that all of the curly brackets match.

Mike

Unknown said...

Hi,

I was wondering if it was possible to use this code with a choice filter web part. Meaning on load the script will hide the web parts and when the user selects a choice from the filter then the web part reappears. My default value is set to "--Select filter value--" so on load the web parts are already hidden. But when I select a filter option the web parts do not appear, even though the page refreshes when the filter options are selected. I'm no programmer so i was just wondering if my efforts are impossible. I am using SharePoint Online.

Thanks,

Jewell

Mike Smith said...

Jewell,

This code would not work as is, but you could write JavaScript to do what you want. I don't have any examples to share, so post your question here and see if someone has an example:
https://social.technet.microsoft.com/Forums/msonline/en-US/home?forum=onlineservicessharepoint
or here:
https://social.msdn.microsoft.com/Forums/office/en-US/home?forum=sharepointcustomization

Mike

Anonymous said...

This looks really nice. Anyone got this to work in SP 2013? Unable to find "summary=" in the code

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.