SharePoint Sharpener

Obsessively Sharpening SharePoint

Quick Fix: Remove Libraries, Lists From ToC

with 8 comments


 

I usually strive to first and foremost use SharePoint’s out of the box functionality to fulfil clients’ needs. Custom solutions with managed code, controlled deployment etc. are all well and good but sometimes you can get by with some simple frontend-configuration. This approach, if done right, enables clients to easier maintain and further enhance their SharePoint site once it’s up and running and the expensive SharePoint consultants have left the building.

Small adjustments can often be done with CSS or JavaScript/jQuery without remote desktop access to the server park. I know some hard core devs out there will oppose to making more or less unmanaged changes using something that hasn’t been pushed through a compiler. But like it or not, we need to get used to working within the constraints of Office 365 and SharePoint in the cloud. More about that in a later article.

Anyway, let’s skip the politics and get to the point of this post.

 

The problem

When you insert a standard Table of Contents web part it looks something like this:

image

And if you’re like most of my clients, you want it to look like this:

image

I.e. more “site mappy” without links to lists, document libraries and discussions.

 

The solution

This is the quick fix and therefore we’ll use client-side JavaScript to hide the unwanted nodes in the ToC.

First, create a library in the site to hold custom scripts. Why not call it “scripts”?

image

 

For easy editing, open the the new library in explorer view and create a text file, like so:

image

 

Open the text file in your favourite editor and paste the following JavaScript:

   1: <script language="JavaScript" type="text/javascript">

   2: // This script removes lists, libraries and discussions from Table of Contents

   3: // PeopleNet, tso@peoplenet.dk

   4: var links = document.body.getElementsByTagName("a");

   5: for(ii=0; ii<links.length; ii++)

   6: {

   7:     if(links[ii].outerHTML.indexOf("BaseType") != -1 && 

   8:       links[ii].parentNode.parentNode.parentNode.parentNode.className == "level-section")

   9:     {

  10:         links[ii].parentNode.parentNode.parentNode.parentNode.style.display = "none";

  11:     }

  12: }

  13: </script>

 

Save the file and go back to the SharePoint page where you placed the ToC web part. Below the ToC insert a Content Editor Web Part.

Back in the old days (i.e. SharePoint 2007) you’d edit JavaScript directly in the web part. This is still possible but it’s really quirky to work with. Instead, in the web part’s properties, point to the text file you created earlier:

image

 

This approach makes it so much easier to edit the JavaScript in a proper editor instead of in a SharePoint pop-up.

Click OK and save the page. The unwanted nodes are now hidden.

 

Note

I’m fully aware of the implications of the above approach with regards to solution management, client-side performance and so on, but every solution needs to be seen in the context of the need it fulfils. And sometimes the above approach hits the mark.

And remember, the Table of Contents web part is just one of site navigation options in SharePoint.

Advertisements

Written by Thomas Sondergaard

September 27, 2011 at 10:44 pm

8 Responses

Subscribe to comments with RSS.

  1. Hmmm. Doesn’t work. I’m using SharePoint 2010. The script fires (I tossed in some alerts to make sure). But it has no effect on the Table of Contents. Does it matter what options are set in the Table of Contents web part?

    Leigh Webber

    November 22, 2011 at 7:08 pm

    • Make sure to add Content Editor Below TOC

      Ahmed

      July 25, 2012 at 9:00 am

  2. Worked great for me! Thank you for the solution Thomas!

    Dennis Hertzler

    September 10, 2012 at 2:31 pm

  3. WOrks for me. You have to remove all the numbers front he begining of each line.

    Amanda

    September 19, 2012 at 1:53 pm

  4. I try it using SharePoint 2010 and it works.. thanks

    nurkartiko

    January 11, 2013 at 2:52 am

  5. Ahmed is right, the Content Editor Web Part must be situated below the ToC.

    Thomas Sondergaard

    January 11, 2013 at 8:05 am

  6. Hi, it works, only problem is that it leaves a blank space where the list or library links would be and so you get a table potted with empty cells, quite odd looking.

    I wonder if its possible to add a line that also hides the link’s parent DIV?

    Sean

    August 8, 2013 at 12:48 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: