Modifying the Default Force.com Site Template to Build am Excellent Customer Portal

Force.com Sites were released on December 2, 2008 (just two days ago) and we are all so excited about this new feature.

Now you can potentially create Customer/Partner portals that are integrated with your CRM readily, this is big advantage plus that with ease of Visualforce's technology and shorter development life-cycles now you can deliver with a much faster pace.

In this article I will demonstrate how fast we can modify our sites' template to customize the looked and feel our customer, partner, etc portals.

With each new site that you create there are a few new Visualforce pages and components added to your box. some of those are:

User Management Pages:

• SiteLogin
• SiteRegister
• SiteRegisterConfirm
• ForgotPassword
• ForgotPasswordConfirm
• Unauthorized

Template:

• SiteTemplate

Components:

• SiteLogin
• SiteHeader
• SiteFooter

Also a few more pages for handling errors and such.

Now let's take a closer look at the SiteTemplate:

<!-- showHeader is turned off so we won't see any Salesforce standard tabs or sidebar -->
<apex:page showHeader="false" id="SiteTemplate" standardStylesheets="true">
<!-- A section is reserved for header of the site -->
<apex:insert name="header">
<c:SiteHeader />
<hr/>
</apex:insert>
<!-- This section is where you can include the content of each page of your site-->
<apex:insert name="body"/>
<!-- A section is reserved for footer of the site -->
<apex:insert name="footer">
<hr/>
<c:SiteFooter />
</apex:insert>
</apex:page>

Generally it's a good practice that you follow the same pattern in developing your sites.

Furthermore, it's best to include your logo, log in and out links, any headline that remains the same throughout your site and above all your site navigation menu to be included in the "SiteHeader" component.

The same way, you can modify the "SiteFooter" component to add your site's pages footer template. It's good practice to include your site's shortcuts links and your company copy right message in this section.

The shortcuts links in this section particularly is good for search engine purpose, in any case you may be using dynamic (javascript enabled) menus, so this part will compensate for that.

Now let's see how we can benefits from all this. At this point you can start adding pages into your site. For your new pages to be able to utilize your template you need to do the following:

<apex:page showHeader="false" standardStylesheets="true">
<apex:composition template="{!$Site.Template}">
<apex:define name="body">
<!-- Page's Content go here -->
</apex:define>
</apex:composition>
</apex:page>

The above code, the Composite component enables the page to use our site template.

Also if you need to overwrite the existing template's section (Insert Component), you will need to add a "apex:define" component with the same name attribute as the "insert" component in the template.

So in order to overwrite the "body" section of the template, you will need write this line:

<apex:define name="body">
... You page's body...
<apex:define>

And one more thing, in order to be able to use your Static Resources in your force.com Sites, you are required to set the Cache mode of those resources to public. By default all them are in private mode.

Click here to see a usage sample of such template in action:
http://zagrus-developer-edition.na5.force.com/Customer