Condividi tramite

Page Layouts in SharePoint

  • Articolo

I have been working on a customer solution and have gotten to do some fun coding this week.  As usual, I wanted to share it with you so that you can maybe learn a few new ways of working with SharePoint.  The business problem is that the business wants users to view and accept a Terms & Conditions page before progressing on to the rest of the site.  I will be covering the entire scenario in a series of posts, starting with this one.

What is a Page Layout?

A Page Layout in SharePoint allows you to create a template for a page that users apply to their content for a consistent layout of information.  For instance, look at the articles in a magazine, they all have a common layout.  At the top is the title in the same font as the rest of the articles, the columns in the articles are consistent across pages (using one, two, or three columns), the author’s name appears at the same place in each article, and images are included in the same place in each article.  Each article has common pieces of information that appear in the same place in each article, such as the title, subtitle, author’s name, date the article was published, and even a few pullquotes to pique your interest as you thumb through the issue.  This common format is due to the layout of the page being used across each of the articles. 

How Do I Use a Page Layout in SharePoint?

A Page Layout in SharePoint is a very powerful concept.  Once you define the layout of information, a user can choose to create a new page using your layout.  Rather than design the page from scratch (where the title goes, what font it is in, what font to use for the body of the article, etc), they simply type in the information into the page, and your pre-defined page layout positions the information on the page using the styles you define.  When you create a new site collection and choose the Publishing template, it creates a subsite called News with a page called “Sample News Article”, with file name “Article1.aspx” in the Pages library. 

image

Editing the page reveals controls that the author uses to provide additional data, such as the Title, Byline, Page Image, and Image Caption.  Rather than design the page and the position of these elements from scratch, authors provide the information that is rendered by your pre-defined layout.

image

How did the page know which controls to provide?  The page layout is based on a Content Type in SharePoint that specifies the various fields used in the page.

Publishing Content Types

Each publishing page is based on a Content Type in SharePoint.  If you go the Document Library Settings for the Pages library, you will see the content types that are applied to the library.

image

Clicking our custom content type, “TermsAndConditionsType”, shows the columns that the content type includes.  The content type derives from a parent content type, and you can see in the list of columns which content type defines the column.  The Name column is defined by the base type “Document”, Title is defined the the Item content type, Description is from the System Page content type, and Page Content comes from our custom content type.

image

Creating a Publishing Content Type

It is quite easy to create a custom content type, and the steps apply to SharePoint 2007 as easily as they do SharePoint 2010.  On the Site Actions menu, click Site Settings, and then choose Site Content Types to access the page https://<your server>/<your site>/_layouts/mngctype.aspx.  To create a new content type, click the Create button.  Give it a name such as “TermsAndConditionsType”, and change the Parent Content Type to “Page” from the “Publishing Content Types” group.

image

Note: Your site collection must have the SharePoint Server Publishing Infrastructure feature activated, and the site must have the SharePoint Server Publishing feature activated in order to use the Page content type.

Once the content type is created, you will see the list of columns that the content type inherited from the Page, Item, and Document content types.  Click “Add from Existing Site Columns” to add a new column.  Choose “Page Content” from the “Page Layout Columns” content type.  You will receive a warning:

The site column ‘Page Content’ might not be supported by earlier versions of client programs.  Adding this column might block those programs from saving documents to this library.  Are you sure you want to use this site column?

Click OK.  Your content type will now look like our earlier screen shot. 

Note: you could use SharePoint Designer 2010 to create the content type instead of the browser, I chose the browser because that’s how people using SharePoint 2007 have to create content types.

Creating a Page Layout

To create a Page Layout, you will need to open SharePoint Designer.  The steps to creating a content type vary only slightly between SPD 2007 and SPD 2010, but I am going to show both.

SharePoint 2007:

In SharePoint Designer 2007, choose File / New / SharePoint Content.  In the New dialog, choose the “SharePoint Publishing” group and click on the Page Layout option.  Give it a name, and change the content type to the content type you created in the previous step.  The URL name will be the name of the file, such as “TermsAndConditions”, and the Title is what the user will see, “Terms and Conditions”.

image

SharePoint 2010:

In SharePoint Designer 2010, click the Page Layouts navigation menu and click the “New Page Layout” button in the ribbon.  Give it a name, and change the content type to the content type you created in the previous step. The URL name will be the name of the file, such as “TermsAndConditions”, and the Title is what the user will see, “Terms and Conditions”.

image

Customizing the Page Layout

Once you have created the content type and page layout, the next step is to control the placement of information on the page.  The key part to understand is the EditModePanel.  Notice in the code sample below that we use two EditModePanel controls, one to control what the page looks like in display mode, and one to control what the page looks like in edit mode.  At this point, ASP.NET developers will be very comfortable editing the markup, and non-developers can still edit the page using the WYSIWYG designer in SharePoint Designer to edit the placement of information on the page.

 <%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
    <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
<PublishingWebControls:EditModePanel runat="server" id="EditModePanel1" PageDisplayMode="Display">
        <h1><SharePointWebControls:FieldValue FieldName="Title" runat="server"/></h1>
        <SharePointWebControls:FieldValue FieldName="PublishingPageContent" runat="server"/>
        <br/>
        <asp:Button runat="server" Text="ACCEPT" id="Button1" ></asp:Button>
        <asp:Button runat="server" Text="DECLINE" id="Button2" ></asp:Button>
    </PublishingWebControls:EditModePanel>
            
    <PublishingWebControls:EditModePanel runat="server" id="EditModePanel2" PageDisplayMode="Edit">
        <SharePointWebControls:TextField FieldName="Title" runat="server"></SharePointWebControls:TextField>
        <PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" runat="server" id="RichHtmlField1"/>
    </PublishingWebControls:EditModePanel>
    
    <div>Server Version: <asp:Label runat="server" id="Label1"/></div>
    <div>Cookie Version: <asp:Label runat="server" id="Label2"/></div>
</asp:Content>

As you can see, you can add ASP.NET controls, SharePoint specific controls, or your own custom controls.  When displaying field values, SharePoint provides the SharePointWebControls:FieldValue control to render the value of a particular field.  To edit values, simply drag the name of the field from the designer onto your design surface and the control is added to the page using the proper control (see the TextField and RichHtmlField controls used in the snippet above).

Create a Page Based on the Page Layout

The last thing we need to do is to use our new page layout to create pages.  Go to the Pages library and choose New / Terms and Conditions Type to create a new page based on your custom page layout.  Once the page is created, fill in the values!

image

Once you have edited the page, our Display Mode editpanel control displays the contents, revealing the two buttons that were not visible at edit time.

image

You can imagine how useful this could be in a corporate environment.  For instance, individual authors can create content using a consistent page layout, reducing the amount of time required to author content.  A summary page can use the Summary Links web part to provide a summary of pages, including a page image to entice readers.  You can use this for corporate communications on an internal portal, publishing FAQs for an internal knowledge base, or using this to create content for your public-facing web site. 

Admittedly, this post serves two purposes.  The first is to familiarize you with the basics of creating a page.  The second is that it will serve as an outline for how we do all of the above steps in Visual Studio in an upcoming post.  Stay tuned!

Comments