A method to customize Web Part zones

Warning: the script below contains a time bomb. Be sure to read the whole article before using it.

A question from the STP forum: how can I change the layout of my Web Part zones, without SharePoint Designer or server side access? For example: on the home page (default.aspx), I only want one column. Or I want two columns with the same width (50%).

In the past, I have already answered specific cases. Today I am proposing a more generic approach.

In a SharePoint page, there is nothing special that identifies Web Part zones. When you look at the page html, zones are just regular table cells. My idea is to include in the Web Part zone a CEWP (Content Editor Web Part) that will act as a tracking device. It will identify its host zone and then apply customizations to it. btw this technique is similar to the one used for the Easy Tabs.

Here is a sample script including two examples:

<script id="RightWPzone" type="text/javascript">

/*************************************
  Customize the Right Web Part zone
  Christophe Humbert
  Christophe@PathToSharePoint.com
*************************************/

function GetParentTable(elem)
{
while(elem !=null && elem.tagName !="TABLE") elem=elem.parentNode;
return elem;
}

var thisWPzone = GetParentTable(GetParentTable(document.getElementById("RightWPzone")).parentNode);

if (thisWPzone.id != "MSOZone") { // Remove this line if the customizations also apply in edit mode

var thisWPzone = thisWPzone.parentNode;

// Example 1: set the Web Part zone width
thisWPzone.style.width = "50%";

// Example 2: hide the Web Part zone
try {thisWPzone.previousSibling.style.display = "none";} catch(err){}
thisWPzone.style.display = "none";

} // Remove this line if the customizations also apply in edit mode

</script>

Simply add a CEWP to your Web Part zone, add the above script, and change it as needed (the main tool for these customizations is the style object). 

When you reuse the script for several zones on your page, make sure that each script has its own id (the id appears twice in the script). In my sample script the id is “RightWPzone”.

A time bomb, you said?

Let’s say we decide to hide a Web Part zone, both in edit and view mode (so that nobody is tempted to drop a Web Part there):

<script id="RightWPzone" type="text/javascript">

/*************************************
  Hide the Right Web Part zone
  Christophe Humbert
  Christophe@PathToSharePoint.com
*************************************/

function GetParentTable(elem)
{
while(elem !=null && elem.tagName !="TABLE") elem=elem.parentNode;
return elem;
}

var thisWPzone = GetParentTable(GetParentTable(document.getElementById("RightWPzone")).parentNode);
var thisWPzone = thisWPzone.parentNode;
thisWPzone.previousSibling.style.display = "none";
thisWPzone.style.display = "none";
</script>

So far so good…but what if I need to make changes? Well, I’m stuck, as I can’t access the zone content anymore, even in edit mode! Fortunately – and this is one reason why I love working with CEWPs – there’s always the option to undo the customization. You can remove the Web Part from the page, with this well known trick:
…/default.aspx?contents=1
If you append the ?contents=1 querystring to the URL, you’ll be sent to the maintenance page, where you can manage your Web Parts.

Another way to deal with this issue is to apply a “best practice”: don’t put the code directly into a CEWP, place it in a separate text file instead, and link the CEWP to it (cf. this article for more details).

Advertisements

14 thoughts on “A method to customize Web Part zones

  1. Nice script…
    I tried to use this to print all web parts in a specific webpart zone…
    (The Bottom Zone in my case)
    However, I never succeeded…

    Do you have any idea if this is possible and if yes, how to do it?

  2. Thans for the fast reply!
    I don’t need it necessarily on screen, as I want to print it on paper.
    But I can imagine I need to display it full screen before I can print it.

  3. This works really well and makes creating new ‘templates’ – which zones are often the only change – so so easy.

    Thanks for the tip

  4. Hi. I was able to adjust the size of my web part zones and hide them. So i found that really great. Is there any way to add more zones? And is there anyway to control how many web part zones the web part takes up? For instance, Right now in sandbox I have to web part zones, is there any way to make a web part encompass both zones so that it goes right across the page? It would be really handy to be able to change already existing pages.

    if only they would just let us use SD….

    Lisa

    • You can’t do any of this directly from the user interface. Of course, what you could do is write a script that finds all the Web Parts on the page, and then overwrites the page with a custom layout. Kind of what the Easy Tabs do.

  5. Hello,

    This looks similar to what I am trying to do. Since Sharepoint’s Web Part Pages are a nightmare to try to style because of the table based design which have no unique ID’s of classes. My goal is to have a script detect whether or not web part zones are empty, then apply a class to the body which I can then style my divs like body.colRight, body.colLeft, body.fullWidth, or body.twoCols. Then I can change my style definitions to body.colRight div#maincontent to have it’s specific layout.

    Have you written a script that would accomplish something like this?

    Thanks!

    • Scraping the page to find Web Part zones is definitely not an easy task. I have done things like this – for the Easy Tabs for example – but it’s not perfect.
      You could consider using the Web Page Web service, but it means one more trip to the server to get the information.

  6. Christophe, Another great post as always!! Is it possible to change the orientation of a Web Part Zone using this script? And if so can you tell me how? Many Thanks. Tom

Comments are closed.