Tuesday, August 23, 2011

Public facing sites using SharePoint 2010

This post is the first in a series that will walk you through building public facing sites in SharePoint 2010. I will discuss a method that I use for this process, whether or not it is the best method I leave up to you to decide.
In the past I used site definitions, but I recently decided to switch to the new web template method. In order to save myself and others time in the future, I have created a starter web template for public sites. You can download this at Codeplex: http://xcomplicaps.codeplex.com

I have to thank Mirjam van Olst and Vesa “vesku” Juvonen for their blog posts that were extremely helpful in putting this web template together.



In this post, I will walk through the components in this web template, and how you can get started using it. Later posts will build on this one.

If you haven’t already, you may want to download the solution from Codeplex, and open it in Visual Studio.
Disclaimer: The solution is meant to be used on a development machine running SharePoint 2010. I also have the CKS Development tools installed and urge you to do the same.

You will see that it is a relatively small and simple solution containing one project. The project consists of a number of components, and we will go through each one.

Web Template (XComplicaPublicStarter)
There are two files that define the web template. There is the onet.xml file and the Elements.xml file. The Elements.xml file tells SharePoint about the web template and the onet.xml file defines the components of the web template. This means that any changes to the information about the web template, such as its name, description and display category should be changed in the element.xml file. This is similar to the webtemp_zzz.xml file for site definitions. The onet.xml file is a very stripped down version of the onet.xml used by the Publishing Portal site definition (BLANKINTERNET#53). Everything has been removed except for one configuration, and this configuration contains nothing except site level features and web level features. The features are the same as for the Publishing Portal, except there is one extra added at site scope and web scope, and these add the custom components we will be discussing later in the article. Two changes have been made to the web scoped publishing feature. The master page has been changed to a custom master page, and simple publishing has been turned on.

Three Features
There are three features as part of this project, one for farm scope, one for site scope and one for web scope.

The farm scoped feature has only one component, and that is the web template just discussed. It ensures that you can create a site collection based on this web template.

The site scoped feature contains elements that are global to the site collection as listed below. These will each be discussed in detail later:

• Master pages
• Page layouts
• Site columns
• Content types
• Global branding files

The web scoped feature contains elements that apply to the web itself and these will also be discussed in detail later:

• Content type binding
• Home Page
• Property Bag Setter

The web scoped feature also includes an event receiver. This event receiver enables anonymous access to the web. Since this is a public facing site, it is handy to have anonymous access automatically enabled on deployment.

Master pages
In the modules section, you will find a module called master pages. There are two master pages here, one is the very well known starter master page by Randy Drisgill, _starter_publishing.master.


The other master page, xcps_blank.master, is a stripped down version of Randy’s master page. This master page is what I use as a starter master page, and it has very little visible content. In this page I have commented out or removed as much of the html as possible, and I placed those placeholders that I could not remove into hidden panels. This technique is nothing new, I just took it further than others. There are only two content placeholders that are left in the visible portion of the page, the PlaceHolderMain and the PlaceHolderPageTitle. I assume these will be used on most if not all public facing sites.

I have also added a few links to content in the head section of the master page, since I assume every site these days will include at least one css file, one javascript and likely a favicon. These three branding files are located in the branding module and are meant to be changed when creating a new site.

I also add a reference to jQuery, but note that this is a reference to the CDN version of jQuery. There is no need to host this file locally.

As you develop your site, you will likely want to use one of the other placeholders or other components that are currently hidden. This is perfectly fine, just cut and paste them from the hidden panels into the appropriate location.

Note that I have also removed the ASP.NET form tag. I don’t see a need for it in a clean public facing site, but if you do find yourself needing it, feel free to add it back. There is a great article on how to make web parts work without the form tag on Waldek’s blog.


Page Layouts
There is currently only one page layout in the project, and that is for the home page. It is very simple since this layout will differ for every site. I have added some very basic components in the PlaceHolderMain just to demonstrate how content can be rendered. There is a standard SharePoint Webcontrol for rendering html and there is a custom control that I developed for rendering Publishing Images. SharePoint provides a control called RichImageField http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.publishing.webcontrols.richimagefield.aspx that is meant for this, but I find it renders too much extra html around the image. I therefore created a simple server side control that renders just the img tag and some core attributes. You can see (and change) the code for this in the ServerControls folder of the project.

Site Columns (Fields)
Most public facing sites will contain at least a few different types of pages. These different types of pages should be represented by a number of content types, and content types are composed of fields. The StarterFields element contains one file which defines three site columns. One is a simple numeric site column used for ordering pages and the other two are Publishing site columns used to hold the html and image that the home page renders. You will add fields to this file, or create a separate element for your fields as you need them.

Content Types
Two content types are defined in the project. The generic content type is meant as a base type for all pages. It inherits from the built-in Page content type and it contains any fields that are common to all pages in the site. As it is, it contains one field which is the Sort Order. I find that a common request from authors somewhere down the line is to be able to order pages in some custom order, and so I always ensure this field is in all page content types.

The other content type is for the home page. It inherits from the generic content type and contains two fields as a sample. These are the Main Image and Body Text fields. Any site you build from this template will likely have different needs, so this will change. Note that I strongly advise using a separate content type and page layout for the home page and not share these with other pages. The home page of any site tends to be a very special page that evolves and changes in a different fashion from the rest of the site.

Global branding files
Every public facing site will need some custom CSS, JavaScript and probably a favicon. I have created a module to contain these files, and they are deployed into the Style Library. There are a number of discussions out there regarding the use of the Style Library, read Andrew Connell’s article for a good introduction.


Note that I have referenced the CSS, JavaScript and favicon files in the master page.

Content Type binding
Every web that has the publishing features enabled has a Pages library. If we want to be able to create pages based on the content types we define, we need to bind these content types to that Pages library. There is an element file in the Content Types folder that takes care of this, just remember to add a reference in that file to any new content types that you create.

Home Page
The home page is an instantiation of the home page layout, the home page content type and some actual content. The home page module is where this is all put together. The aspx page itself just has a reference telling SharePoint to use a page layout, this is the same for every instance of a publishing page. The interesting stuff is in the elements file, which defines the properties of the page, as well as the location (Pages List) that the page should be deployed to. Notice that the properties include the page layout, the content type, but also properties like Title, Body Text, etc. Also note that the MainImage property has been specified and contains a link to an image from teh style library. That image is provisioned as part of the branding module. In a different post I will show how to provision actual content into image libraries. For most pages we would allow authors to add the content, but for some pages as well as for test purposes it can be useful to prefill some content in.

Property Bag Setter
Due to the way web templates work, there is no way to know what web template was applied once the provisioning of the site is finished. It is therefore best practice to add a property in the web’s property bag in order to store this information. See the links above about web templates for more info on this.

Getting it all working
Now that you’ve had a full tour of the project, you should be able to create a site based on this template. You first need to specify a Site URL in the project properties so that it points to a valid SharePoint URL. What is somewhat annoying here is that we will be creating a new site collection based on this web template, but there already needs to be a site collection at the Site URL you specify. I often just start by creating a blank site at that URL, since I know I will be deleting it right after deployment. There are some PowerShell shortcuts you can also take, but I’ll leave those for another time.

Once your project has deployed, go to central administration and open up the page for creating site collections. You should see a new tab, and in that tab the Public Starter template.

Before you create a new site collection, I suggest you delete the blank site that you needed to deploy the project. This is up to you, but if you do so, you can create your new site collection at the root URL.
From this point, it is the same as creating any out-of-the box site collection. Once the process completes, you should be greeted with a new site based on the components discussed. Just for fun, look at the source and the page weight of your new site, and compare this to the regular SharePoint publishing template.

In this article I walked through the different pieces that make up the XComplica Public Starter web template. The purpose of the template is to create a clean starting point for creating lean and clean HTML sites using SharePoint. In future articles I will expand on how to create different types of pages, how to implement custom html into this template and other topics.


Chris said...

Much more easier and a time-less developing for public facing SharePoint websites, can be done with the first online based SharePoint 2010 branding tool.

No more waste your time for finding the right css tags, just click, save and finifshed.

And the result is a great looking SharePoint bases website.

Have a look at:



Joe said...

@Chris, I had a look at that tool, quite impressive if it works as advertised. (I didn't feel like dropping €100 on a test).
Still, there is a downside to just styling SharePoint. That tool will result in bloated page loads with unnecessary js and css files being sent to the client. A public facing site should not be sending corev4.css to the client for instance.

Evert said...

Hi Joe,

I tried using your public facing SharePoint internet masterpage but the problem is that is does not contain a form tag which is nescesarry for a variety of controls (for example the navigation menu).

But when I try to include the form a get a javascript include script of 213kb as a present :-)

Do you have any idea how to solve this?

Best regards,


Joe said...

@Evert: I had a look at this, and I can't see any way to remove the stuff that SharePoint sends once you add that form tag. I guess that's just something we have to live with if we really need that form tag. Make sure your blob cache is on to improve the js file performance.

You know, you don't HAVE to use the built in navigation controls though. Sometimes a nice hard coded (yeah I said it) navigation menu works just fine. :)

Bruce said...

Hey Chris, the download doesn't seem to be there anymore??

Anonymous said...

It seems pubishing requires sp2010 server... is there a foundation version ? OR a similiar example with some one with just sp foundation 2010 ?

Joe said...

@punkouter - If you are limited to SP Foundation, I suggest you rethink creating internet sites with it. Not the best solution. Look into Orchard CMS for instance.

Anonymous said...

I agree... its one of those.. Hello! Welcome to the company! Here is a pile of poo we created the past 1.5 years.. go fix everything! check out this thread .. maybe you can give me advice.


Anonymous said...

I agree .. check out