Monthly Archive

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