In our custom page layouts, we can add web parts to the templates in two ways. First, we can add them to a web part zone template. This adds the web part to the web part zone when a page is created with the page layout and they can be modified or removed after the page has been created.
Secondly, we can reference the web part directly on the page outside of web part zones. This will insert the web part onto the page, but it cannot be modified or removed from the page when editing the page in the SharePoint web interface.
In this recipe, we will add two web parts to our page layout (one inside a web part zone template and one outside a web part zone). We will use the page layout we created previously with the three web part zone columns as a starting point.
Follow these steps to create a page layout with web parts added to the page:
- Open SharePoint Designer.
- Select Open Site. Enter the complete URL to the SharePoint site and select Open.
- From the Navigation pane, select Page Layouts.
- In the list of files in the Page Layouts library, make a copy of
PageLayout_ThreeColumn.aspx(for our example, we have renamed itPageLayout_WebPartsAdded.aspx). - Check out the new
PageLayout_WebPartsAdded.aspxpage layout. - Open the
PageLayout_WebPartsAdded.aspxpage layout. - Locate the first
<div class="ms-table ms-fullWidth">element. - Before the
<div>elements, add aTableOfContentsWebPartelement.<PublishingWebControls:TableOfContentsWebPart ID="TableOfContentsWebPart" Title="Table of Contents" runat="server" />
- Using the SharePoint table layout styles, add three
<div>column containers as shown in the following code:<div class="ms-table ms-fullWidth"> <div class="ms-table ms-fullWidth"> <div class="cell-margin tableCol-33"> </div> <div class="cell-margin tableCol-33"> </div> <div class="cell-margin tableCol-33"> </div> </div> <SharePointWebControls:ScriptBlock runat="server"> if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty();}</SharePointWebControls:ScriptBlock> </div> - In
ZoneTemplateof one of theWebPartZoneelements, add aMediaWebPartas shown in the following code:<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Center%>" ID="CenterColumn"> <ZoneTemplate> <PublishingWebControls:MediaWebPart ID="MediaWebPart" Title="Media Web Part" runat="server" /> </ZoneTemplate> </WebPartPages:WebPartZone>
- Save the page layout.
- Navigate back to the Properties page for the page layout.
- Under Customization, select Manage all file properties in the browser.
- Select Edit Item from the ribbon.
- Ensure that the Content Type option is set to Page Layout.
- Provide a new title for the page layout (for example,
Web Parts Added). - In the Associated Content Type option, set Content Type Group to Page Layout Content Types and Content Type Name to Article Page.
- Save the item.
- Check in and publish the page layout using the Check In and Publish options.
- Navigate to the Pages library of the site using your preferred web browser.
- Select New Document from the FILES tab on the ribbon.
- Provide a title and URL for the new page in the Title and URL fields.
- Select the newly created page layout.
- Select Create.
- Edit the new page to observe our new layout and web parts. The following screenshot shows the page where we can edit our web parts:
Web parts are ultimately ASP.NET server controls at their core. As such, they can be added directly to a page layout like any other server control. Doing so puts them on the page, but does not let users edit them in the web interface.
Web part zones are server controls that provide a section of the page that users can add web parts to in the web interface. They also have a template that allows a page layout to include web parts in the zone by default when the content page is created. These web parts can be edited in the web interface after the content page is created.
- The WebPartZone class topic on MSDN at http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webparts.webpartzone.aspx