in SharePoint, SharePoint 2007

SharePoint WCM – Breaking the Ice – Building User Controls

In our previous post, we saw how to build a Page Layout for our Jet30 site. Today we will see how to build user controls. We will dissect some of the parts of the Home Page and build them as user controls.

So, for those who don’t remember our Home Page, below is a screenshot:

Jet30 Home Page

And weeks back, we also had our initial discussion on dissecting the page into various user controls.

Let us take the simplest of the controls – Latest News and New Services Overviews and turn them into user controls:

user controls

User Controls 101 For SharePoint

If you are an ASP.NET developer, you are already familiar with User Controls. They are nothing different in SharePoint except that they may consume SharePoint API and interact with SharePoint data. Let us initially forget that ‘SharePoint interaction’ and just try to build the user control with the static HTML data we already have. The user controls are going to built as assemblies (.dll) and deployed to GAC.

Where do user controls live?

User controls should be living somewhere so that we can load them in the code. So, where do we put our user controls?

The best and recommended place to put them is in the CONTROLTEMPLATES folder in the 12Hive. You can find many of the out-of-the box SharePoint user controls there:


Since our user controls are custom built (not out-of-the box), it is always better to put them in a separate folder inside the CONTROLTEMPLATES. So, for Jet30, our user controls will reside in a folder Jet30 inside the CONTROLTEMPLATES:


But we are not going to create the folder manually, rather deploy them as solutions (.wsp)

Jet30 User Control Solution

To keep things granular, I created a new SPVisualDev solution called Jet30.SharePoint.UserControls :

Jet30.SharePoint.UerControls Solution

I then created the CONTROLTEMPLATESJet30 folder:


Added my two user controls (.ascx) to the CONTROLTEMPLATESJet30 folder:

User controls added

You can easily add user controls using SPVisualDev item templates:

SPVisualDev Item Templates

Adding the static HTML code to user controls

Now as we have our user controls ready, we are good enough to move the Latest News and New Services Overview sections to their respective user controls from the Home Page layout.

Browse the Home Page layout until you hit the two required sections:

Home Page controls sections

Copy the code inside the news start & news end , services start & services end to the respective user controls.

Latest News user control:

Latest News user control

New Services user control:

New Services user control

Referencing user controls in the Home Page

So, now the only task left is to reference and add these user controls in our Home Page layout.

First, register a tag Jet30 whose src tag match the location of our user controls:

<%@ Register TagPrefix="Jet30"     



<%@ Register TagPrefix="Jet30"    


    TagName="NewServices" %>

Now, we can make use of the tag prefix and name and reference our user control in the page:

<!--news start -->

<Jet30:LatestNews runat="server" />

<!--news end -->

<--services start -->

<Jet30:NewServices runat="server" />

<!--services end -->

Build and deploy the solution and refresh the Home Page.
You should still see the same home page, the only difference this time being that Latest News and New Services are user controls.
What next?
In our next blog post, we will go one step further with the user controls. We will store and retrieve Latest News from SharePoint!
For now, you can download the source code from here.
If you don’t have SPVisualDev, build a WSP package and deploy it to test.
Remember that until we have our own site definition, we are not done yet and things will be little messy 🙂

Write a Comment