Using the SharePoint Content Editor WebPart

The ContentEditorWebPart is a web part you can use to display arbitrary HTML and script output on a SharePoint WebPart page.

On a project I’m working on, I provision various ASP.NET pages, features and so on into a site to customize it for the clients application needs. One thing I wanted was some kind of navigation aid to the various ASP.NET pages, and which also allowed the client to use it as part of their own customizations.

To this end I figured the content editor web part could be used to display a menu like list of links to the user, and further I could then provision this webpart using a feature into the web part gallery, thereby making it available for reuse by the client.

Ok so what I wanted was this kind of thing;

So, a header that looked like any other webpart header (without the edit arrow) and then a list of links preceeded by an image.

To get the header part I quite unashamedly purloined the same HTML that SharePoint uses to render web part headers, and you can do this quite easily using FireFox (Firebug) and IE8 developer tools, the image below shows this in IE8 by copying the outer HTML of the table which is used to render the Announcements webpart.

Having got this HTML I mangled it a bit to remove the “editability” of the header, next onto the list itself. For this I used a table, each row having 2 cells, the first showing an image. Now I wanted it to look like the OOTB Links List, so again using FireFix (Firebug)  / IE8 developer tools I perused the HTML to see what styling and CSS classes SharePoint used to do this, and formatted by HTML accordingly, the results of which looked like this;

<table class="ms-summarycustombody" cellspacing="0" cellpadding="0">
<tr>
<td class="ms-vb" style="padding-bottom:5px;width:20px;vertical-align:middle;text-align:center;">
			<IMG alt="" src="/_layouts/images/square.gif" align="middle"></td>
<td class="ms-vb" style="padding-bottom:5px;">
			<a href="cstools/Basic%20Analysis.aspx"><img src="/_layouts/images/calcis/basic_analysis.jpg" align="middle" border="0" />Open the Basic Analysis Tools</a></td>
</tr>
</table>

So having got the HTML for my header and list, I created an instance of the Content Editor WebPart on a Page and modified it’s properties.

Most importantly I turned the Chrome off by setting the Chrome property to None, and set the source HTML to the following;

<TABLE border="0" cellSpacing="0" cellPadding="0" width="100%"><TBODY>
<TR class="ms-WPHeader">
<TD style="width:100%;">
<H3 class="ms-standardheader ms-WPTitle"><SPAN>Reporting Tools</SPAN></H3></TD>
<TD style="padding-right:2px;" align="right">
<DIV class="">&nbsp;</DIV></TD></TR></TBODY></TABLE>
<table class="ms-summarycustombody" cellspacing="0" cellpadding="0">
<tr>
<td class="ms-vb" style="padding-bottom:5px;width:20px;vertical-align:middle;text-align:center;">
			<IMG alt="" src="/_layouts/images/square.gif" align="middle"></td>
<td class="ms-vb" style="padding-bottom:5px;">
			<a href="cstools/Basic%20Analysis.aspx"><img src="/_layouts/images/calcis/basic_analysis.jpg" align="middle" border="0" />Open the Basic Analysis Tools</a></td>
</tr>
</table>

Having done this, I exported the WebPart to a .DWP file

So finally we have the finished article;

In another post I’ll demonstrate how this WebPart (the exported .DWP file) can be provisioned using a feature.

Free SharePoint / MOSS WebParts List

Found here on Sharee’s blog.

Sharepoint Webpart Lifecycle Events Updated

I’ve updated my post on Sharepoint WebPart Lifecycle events, since the previous version wasn’t that acurate.

Sharepoint 2007 Connected Web Parts

This is a great link on the topic of connected web parts using the standard Sharepoint connected web part interfaces.

http://msnwindowslive.spaces.live.com/Blog/cns!DA44120081017B95!230.entry

Sharepoint WebPart Lifecycle Events

This post describes the lifecycle events of a Sharepoint Connectable WebPart wih a single ViewState backed property;

On Page Load

1. Constructor
2. OnInit
3. OnLoad
4. ConnectionConsumer method is called if web part is connectable (sets the connection providers interface in the webpart)
5. CreateChildControls
6. OnPreRender (if your web part is connectable you would typically call the connection provider here to retrieve data)
7. SaveViewState
8. Render
9. RenderChildren
10. RenderContents

On 1st Postback
(PostBack click handler sets ViewState via public Property)

1. Constructor
2. OnInit
3. CreateChildControls
4. OnLoad
5. PostBack click handling
6. ConnectionConsumer method is called if web part is connectable (sets the connection providers interface in the webpart)
7. OnPreRender (if your web part is connectable you would typically call the connection provider here to retrieve data)
8. SaveViewState
9. Render
10. RenderChildren
11. RenderContents

On 2nd Postback
(PostBack click handler sets ViewState via public Property)

1. Constructor
2. OnInit
3. LoadViewState
4. CreateChildControls
5. OnLoad
6. PostBack click handling
7. ConnectionConsumer method is called if web part is connectable (sets the connection providers interface in the webpart)
8. OnPreRender (if your web part is connectable you would typically call the connection provider here to retrieve data)
9. SaveViewState
10. Render
11. RenderChildren
12. RenderContents

Note that during the 2nd postback, LoadViewState, is called, since in the 1st postback the click handler sets the value of the ViewState backed public property.