Creating a page layout with web parts added to the page_SharePoint 2013 WCM Advanced Cookbook-QQ阅读男生玄幻网

上QQ阅读APP看书，第一时间看更新

Creating a page layout with web parts added to the page

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.

Note

Web parts added directly to the page layout are added to the page when a page is created. Adding additional web parts to a page layout will not update content pages already created with the page layout.

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.

How to do it...

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 it PageLayout_WebPartsAdded.aspx).
Check out the new PageLayout_WebPartsAdded.aspx page layout.
Open the PageLayout_WebPartsAdded.aspx page layout.
Locate the first <div class="ms-table ms-fullWidth"> element.
Before the <div> elements, add a TableOfContentsWebPart element.
```
<PublishingWebControls:TableOfContentsWebPart ID="TableOfContentsWebPart" Title="Table of Contents" runat="server" />
```
Note

Web parts added outside of a WebPartZone ZoneTemplate are added to the page, but are not editable from the SharePoint web interface.

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) == &quot;function&quot;) 
{MSOLayout_MakeInvisibleIfEmpty();}</SharePointWebControls:ScriptBlock>
</div>

In ZoneTemplate of one of the WebPartZone elements, add a MediaWebPart as 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>

Note

Web parts added in a WebPartZone ZoneTemplate are added to the page when created and are editable from the SharePoint web interface.

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:

How it works...

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.