in SharePoint, SharePoint 2007

SharePoint WCM – Breaking the Ice – Building the Home Page Layout

In our previous post, we saw how to build a SharePoint Master Page with custom branding. Let us now build a Page Layout. A page layout defines various components in a page – web parts or field controls or static content etc.,

MSDN describes the relationship between a master page & page layout in the best way possible:

image

So, currently we have our Jet30’s Home Page, which is:

And we were able to build a master page which essentially had everything in it. A master page typically should contain a header, content area and a footer. The page layouts now come in and fill the content area, which makes:

jet30-home-page-layout

Yep, so that separates the header, top navigation, footer and footer navigation.

Home Page Content Type

As we only have home page design at the moment, lets create the Home Page layout, which essentially will become the home page of the site.

Everything is a content type in SharePoint. So does a Page.

image

And our Home Page layout is no exception. Before creating the home page layout, we will create a Home Page content type inheriting from the Page content type. We will then create the page layout and associate this content type to our home page.

Creating the Home Page Content Type

There are several ways to create and deploy content types. The one I follow is – wrap each content type into its own feature – one feature for every content type. Why? This makes much easier to manage the content types, especially when you want to upgrade them.

image

So, I added a new feature using SPVisualDev. With SPVisualDev, its quite easy to create a content type inheriting from another content type.

image

You can see in the above screenshot that SPVisualDev allows you to inherit either from built-in content type or from a content type on a site. Since the content type Page is part of the Publishing Feature, it is available as a content type on a site.

image

And my Home Page content type is ready!

image

That was easy 🙂

Home Page Layout

Now that our Home Page content type is ready, we can now create our home page layout.

How do we create a page layout?

  • Create a new Feature.
  • Include all your page layouts in this new Feature
  • Add a new Page Layouts module which will tell SharePoint about your page layouts
  • Deploy to your site

Here is how it will look like:

image

The feature Jet30_PageLayouts contains a layout called HomePage.aspx and an elements file PageLayouts.xml

The PageLayouts.xml has the Page Layouts module and our Home Page Layout defined:

image

The Home Page layout is copied to the site’s Master Pages and Page Layouts library with a title Jet30 Home Page. We also associate the Home Page content type by specifying the Home Page Content Type in the PublishingAssociatedContentType property.

How do we move content to Page Layout?

We are dealing with Master Pages, which are nothing but ASP.NET master pages. As we discussed earlier, SharePoint is built on top of ASP.NET platform. So, think SharePoint Master Pages and Page Layouts to be ASP.NET Master Pages and ASP.NET Application Pages in a normal ASP.NET application. All we need to do to move the content area to a page layout is create ContentPlaceHolders in the master page!

So, our Master Page now looks like:

image

If you deploy the new Master Page, the site now looks like:

image

With the contents moved over, our Home Page layout looks like:

image

As you can see, we have brought the home page content area from the Master Page to this Page Layout!

So, now we can go ahead and deploy our new page layout!

Selecting the Home Page Layout

After deploying the page layout, you can find it in the Master Pages and Page Layouts library:

image

If you now create a new SharePoint Page, you should see the Jet30 Home Page listed in the page layouts option:

image

Create the new page and you now have the new Jet30 Home Page (not yet the site default page though 😉 )

image

That wasn’t tough!

What next?

In the next post, lets dissect this page layout into various user controls as we discussed earlier!

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

Comment

Time limit is exhausted. Please reload the CAPTCHA.