How to implement your own custom web part zone in SharePoint?

Scenario:
How do we implement our own custom web part zone in SharePoint to be able to control how the web parts from the web part zone are rendered on the page?

 

Explanation:
Have you ever wondered whether it is possible to implement your own custom web part zone that gives you full ability to control how the web parts in a web part zone are added to a page?

By default, MOSS 2007 as well as SharePoint 2010 render the web parts in a table.
As most of us know, HTML tables are meant to be used for displaying tabulated data but not for controlling layout of a page. Tables were created to provide structure to data.

Even though SharePoint 2010 moved away from the table approach to the div approach, few areas remain un-transitioned, the "Web Part Zone" being one of them.

Its often an painespecially for developers/designers to get the exact output to match that of the markup provided by a 3rd party company / designer (Yes it is quite often the case that SharePoint developers need to output HTML that need to match the markup provided by the client) and some times requires lot of effort to tweak their CSS/HTML Markup and also to ensure that the page out put is XHTML complaint especially in MOSS 2007.

Typical output from an OOB SharePoint Web Part Zone looks like the below:

As you can see in the above screenshot, SharePoint renders web parts in a table.

If you use the custom web part zone that I have also contributed in Codeplex (credits go to Tim Nugiel from MSNGN), you will be able to control the way the web parts added to a web part zone are added to a page.

As you can see in the above screen shot, the custom web part zone allows you to control the way the web parts are rendered on the page. The above screen shot demonstrates a web part zone with a Content Editor Web Part and a Page Viewer Web Part.

In this sample code, I have just added web parts one after the other.
You might want to add each web part in a new panel, apply css to them / seperate them with a <hr> / whatever you want to do

 If you want to be able to add user controls to the page, you will need a text field/column in the SharePoint Page that will be used to define the user controls to be added to this page.

If there are multiple user controls that are required to be added to the page, seperate them with a ";"

To use this web part zone in a page layout, register the control by adding te below line to the page layout

<%@ Register TagPrefix="Custom" TagName="WebPartZone" Src="~/_controltemplates/CustomWebPartZone/CustomWebPartZone.ascx" %>

Add the control to the page layout at the desired location

<div id="divCustomWPZone">
   <Custom:WebPartZone runat="server" id="zoneCustom" DisplayTitle="Custom Zone" LoadWebPartZone="true"/>
</div>

If you want be to able to load user controls as well, just use the FieldName="Name of the page field that contains the user control(s) to add to the page"

Download Source Code

Comments

[Onlne Web Zone]

Your site is very informative and your articles are wonderful.