Monday, July 23, 2012

Hiding column headers on SharePoint lists

I found that sometimes I don’t want to see the column headers on a SharePoint list. I ran into such an instance when I was putting together a FAQ which was implemented as a Custom List in SharePoint 2010. I create a view that grouped my FAQs by the Topic field. SharePoint give a fairly nice view, but in this case I think the column headers are a bit confusing to the end users.

image

It makes even more sense, if you don’t have tabular data for each row or two up in my case.

image

The the goal here, is to remove the column header (denoted by the red arrows) so that the page looks something more like this:

image

To do this you will need SharePoint Designer 2010 (Freely available from Microsoft). Once you have SharePoint Designer 2010 installed (you may need to restart before it will open the page properly) follow the steps below.

  1. Add the list to a page as a web part. In this case, my list is called FAQ List, so I added there was a web part of type FAQ List.
  2. Go to Site Actions | Edit In SharePoint Designer. The page will load in SharePoint Designer 2010.
  3. Click one of column headers. You will notice that the Table ribbon is now available.
  4. Click the Select button | Select Table button.
  5. On the same ribbon, there is a Shading button. Click it and choose a color (for example red). This will change the background of the headers to red. This works because the headers are actually in nested table. By changing the background of the table, we force the html for that table to be generated so that it can be extended.
  6. Find the style="background-color: #FF0000" (assuming you chose red).
  7. Change the style attribute to be style=”display:none;”. This will cause it to still be sent to the browser, but it will ignore it. Notice, the background-color is not set anymore, but it doesn’t hurt anything because the table is not displayed and does not take up the height and width it did on the page either. It is effectively gone from the users view now.
  8. Save your changes in SharePoint Designer 2010 and refresh the page in the browser to see verify that your goal was accomplished.

What not to do

The first time I tried to do this I went into SharePoint Designer 2010 and clicked the column headers and just started hitting the delete key. As expected, the column headers disappeared because I deleted them. The problem I saw with this is that my Ratings control no longer would allow the user to click the stars to rate each of the FAQs. It would no error or give a javascript error depending on if error are turned off in the browser. I assume this has something to do with a missing javascript file that didn’t get included, but I wasn’t going to track it down. Instead, I thought to myself, why not just trick SharePoint into loading the proper files and then on the browser side just hide the column headers since it really is just a cosmetic change that I need. As far as I can tell, the solution outlined here works much better and is actually quite easy to undo if you want to also.

3 comments:

Janie said...

Hi there, This seems to be an awesome solution and exactly what I am looking for but I cannot get it to work. I get to the point where I select and shade the table, change the code and get the table to disappear in Designer, but when I refresh the browser I still get the headers showing. My Webpart is just a List type... Any thoughts? Thanks, janie

Brent V said...

Hi Janie,

Not sure exactly. It should work fine on any list that is added in the way suggested. Please note there are two types of web parts that SharePoint uses to implement this. If you are following the instructions for adding the web part to the page as I suggest here you should have the right one. Verify that.

The only other thing I can think of that you page changes are not being saved while you are in Designer. When you quit Designer and then open the page again do you still see your changes?

Related to that would be that your changes require approval because you have content approval enabled. it could also be that you have the page checked out and need to check it in. Make another change like bolding something on the page while in Designer and see if you can see those changes in the browser. If not, that is probably your issue.

I hope that helps.

Brent

Anonymous said...

I tried this once and it worked. It was a webparts page orginally created in Sharepoint 2007. And the web part used the boxed style, similar to your example.

When I tried it again, all kinds of problems. In the code view, I do not see a table, the code is an XML definition instead, that makes no sense to me. Selecting the table shows up in design view, but changing shading may appear briefly as I hover over the color or click Apply in the properties dialog, then disappears after I click OK or click on the color.

I selected the row instead and shaded it, which caused some code for a table to be generated, but then in run time an error Unable to find the content" or something is displayed on the web part.

Seems like Sharepoint creates its web part displays differently now?

Also, in a traditional table view style, the entire table is selected not just the column headers, so that would not work anyway.