Page Layout

Page Layouts
The next thing you will need to do as part of any major web content management project is create Page Layouts. Again, I am not going to provide a robust definition on what a Page Layout is because it is pretty well defined in books and on MSDN. What I am going to do in this example is create a simple content type and then create a page layout for the content type.
In this example I am going to create a Technology Article Page which will inherit from the out of the box Article Page. I will am going to add a couple custom fields to this content type like Confidentiality and Technology. I will later use these to do some fun stuff with content query web parts.
1 – Create a Content Type
Like I said the first thing I am going to do is create a content type based on the Article Page content type and add some of my own fields. For both Confidentiality and Technology, I am going to use the managed metadata service and term storm.
So first I created some terms:

 Then I created my new Technology Article content type which inherits from Article Page. Below is a screenshot of the new content type.

 Then you I created Confidentiality and Technology columns using the managed metadata. I also added the Enterprise Keywords column which allows for folksonomy tagging to be applied to my article. As well I have added Rating (0-5). Here is a screenshot of all the columns.

2 – Create Page Layout
To create a new Page Layout:

• Open SharePoint Designer 2010 and go to Page Layouts.
• In the ribbon select new Page Layout.
• Select the Technology Article content type. I will subsequently be taken to a page where I will be editing the page in advanced mode.

Now all I need to do is start adding in controls and HTML to build up the page layout. As you can see below, I have turned on the split view and the branding from the master page is being applied. Towards the bottom of the split view you notice the PlaceHolderMain outlined in light purple. That is where all the modifications will be made. You may not recall but this corresponds back to the Master Page. So when a page is rendered in SharePoint, both the Master Page and Page Layout are merged together to create the web page that is ultimately rendered.

 Within this screen I was able to compose a web page using the fields I have available to me from my content type. Here is the resulting screen that I created. Looks pretty basic but I have pulled in some core data fields, I am displaying managed metadata, and I am displaying the rating for the article.

 Here is a view of that same article in edit mode.

 Now to achieve this I did have to do several things in SharePoint Designer 2010.

The process for creating the page was simple. First I created a HTML layout with some CSS embedded page layout to control the presentation. I put in a HTML table and then started dragging and dropping fields into the table. Now there are a couple little things you should know.
Metadata fields will not work when you drop them in. You need to add the following to the top of the page which will then allow the managed metadata fields to render on the page layout.

<%@ Register Tagprefix="Taxonomy" Namespace="Microsoft.SharePoint.Taxonomy" 
Assembly="Microsoft.SharePoint.Taxonomy, Version=14.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>

The Rating (0-5) control will not work either unless the following is registered at the very of the page layout.

<%@ Register Tagprefix="SharePointPortalControls" Namespace="Microsoft.SharePoint.
Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, 
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

To display the created and modified date you will need to again add the following registration to the top of the page layout.

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" 
Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>

Lastly you may have noticed that the big wave logo is missing from this page layout. This is because I made a decision that the wave branding was taking up too much real-estate for an article. A little trick I did was adding some CSS to the page layout to hide it. I like this approach because I really want this logo to be part of the master page but just for this particular page layout I do not want to display it.

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
    <style type="text/css">
        #logo { display: none; }
    </style>
</asp:Content>

Page Layout Code


The following is the resulting code I created for the page layout.

<%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.
PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,
Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.
WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.
SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, 
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.
WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls"
Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.
SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>  

<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.

Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing,
Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Taxonomy" Namespace="Microsoft.SharePoint.Taxonomy" 
Assembly="Microsoft.SharePoint.Taxonomy, Version=14.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePointPortalControls" Namespace="Microsoft.SharePoint.
Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, 
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
    <style type="text/css">
        #logo {
            display: none;
        }
        .TechArticleTitle {
            font-weight:bold;
            vertical-align:top;
            width: 10%;
            padding-right: 10px;
            padding-left: 10px;
        }
        .TechArticleValue {
            vertical-align:top;
        }
    </style>
</asp:Content>

<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
    Technology Article - 
    <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

    <table>
        <tr>
            <td class="TechArticleTitle">Title:</td>
            <td class="TechArticleValue">
                <SharePointWebControls:TextField FieldName="fa564e0f-0c70-4ab9-b863-0177e6ddd247" runat="server">

                    </SharePointWebControls:TextField>
            </td>
            <td class="TechArticleTitle">Modified:</td>
            <td class="TechArticleValue" nowrap>
                <SharePoint:FieldValue FieldName="Modified" runat="server" id="modified" ControlMode="display"/>
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="TechArticleValue" nowrap>
                <SharePointPortalControls:AverageRatingFieldControl FieldName="5a14d1ab-1513-48c7-97b3-657a5ba6c742" runat="server">
                   </SharePointPortalControls:AverageRatingFieldControl>
            </td>
            <td class="TechArticleTitle">Created:</td>
            <td class="TechArticleValue" nowrap>
                <SharePoint:FieldValue FieldName="Created" runat="server" id="created" ControlMode="display"/>
            </td>
        </tr>
        <tr>
            <td class="TechArticleTitle">Confidentiality:</td>
            <td class="TechArticleValue" colspan="3">
                <Taxonomy:TaxonomyFieldControl FieldName="a472e313-fd5f-4423-89b3-bdd721461eac" runat="server">
                     </Taxonomy:TaxonomyFieldControl>
            </td>
        </tr>
        <tr>
            <td class="TechArticleTitle">Technology:</td>
            <td class="TechArticleValue" colspan="3">
                <Taxonomy:TaxonomyFieldControl FieldName="9129feba-3b4a-4dd7-82cc-0822730d16c8" runat="server">
                     </Taxonomy:TaxonomyFieldControl>
            </td>
        </tr>
        <tr>
            <td class="TechArticleTitle">Keywords:</td>
            <td class="TechArticleValue" colspan="3">
                <Taxonomy:TaxonomyFieldControl FieldName="23f27201-bee3-471e-b2e7-b64fd8b7ca38" runat="server">
                    </Taxonomy:TaxonomyFieldControl>
            </td>
        </tr>
        <tr>
            <td class="TechArticleTitle">Article:</td>
            <td class="TechArticleValue" colspan="4">
                <PublishingWebControls:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server">
                          </PublishingWebControls:RichHtmlField>
            </td>
        </tr>
    </table>    
</asp:Content>