How to develop and Deploy Custom Page Layouts In SharePoint
2010
using Visual Studio 2010
Open Visual Studio 2010 as an Administrator -> Select an
Empty SharePoint 2010 Project and give it a name such as “MyPageLayout” and
then Click Next.
Give the Sit URL for deployment, and select the Solution
Type to be Farm Solution as this is a Page Layout that we are trying to Deploy.
Right-click on the Project, and select Add new Item and then
select “Content Type” template and give it a name such as “MyPageContentType”
and click on OK, it will then ask for selecting the existing layout to create
it from the base content Type. Here, select Page and then click on Finish.
Elements.xml file in the MyPageContentType opens. You need to create few custom
fields / content types to be used in our Custom Page Layout. For this, we need
to implement the following code:
Initial Elements.xml file looks like:
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<!-- Parent ContentType:
Page
(0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39) -->
<ContentType ID="0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900bdfc16ce990c42ce81e64f3ac64e23fb"
Name="MyPageLayOut -
ContentType1"
Group="Custom Content Types"
Description="My Content Type"
Inherits="TRUE"
Version="0">
<FieldRefs>
</FieldRefs>
</ContentType>
</Elements>
You now need to add the following parameters and also tags
so that the final Elements.xml will look like this:
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<!--
new site column for custom page layout named Title -->
<Field ID="{7024BCAE-DBB8-4E09-88E6-49D3B22C9111}" Name="PLTitle" DisplayName="Title" Group="PLContent"
Type="Text" Required="FALSE" Sealed="FALSE" Hidden="FALSE" />
<!-- new site column for custom
page layout named Header -->
<Field ID="{4837C657-45B0-45A2-A548-945DB9D9189F}" Name="PLHeader" DisplayName="Header" Group=" PLContent "
Type="HTML" Required="FALSE" Sealed="FALSE" Hidden="FALSE" />
<!-- new site column for custom
page layout named Body -->
<Field ID="{6C736E06-56C1-4AA1-AB0F-4712FAA2A8C4}" Name="PLBody" DisplayName="Body" Group=" PLContent "
Type="HTML" Required="FALSE" Sealed="FALSE" Hidden="FALSE" />
<!-- new site column for custom
page layout named Footer -->
<Field ID="{933EB014-B49D-4358-9043-1ECC565D283F}" Name="PLFooter" DisplayName="Footer" Group=" PLContent "
Type="HTML" Required="FALSE" Sealed="FALSE" Hidden="FALSE" />
<!-- Parent ContentType:
Page
(0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39) -->
<ContentType ID="0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900ec5a019792a349cfaa4c98762427d5ee"
Name="MyPageLayOut -
MyPageContentType" Group="Custom Content Types"
Description="My Content Type"
Inherits="TRUE" Version="0">
<FieldRefs>
<FieldRef ID="{7024BCAE-DBB8-4E09-88E6-49D3B22C9111}" Name="PLTitle" />
<FieldRef ID="{4837C657-45B0-45A2-A548-945DB9D9189F}" Name="PLHeader" />
<FieldRef ID="{6C736E06-56C1-4AA1-AB0F-4712FAA2A8C4}" Name="PLBody" />
<FieldRef ID="{933EB014-B49D-4358-9043-1ECC565D283F}" Name="PLFooter" />
</FieldRefs>
</ContentType>
</Elements>
NOTE: To Generate IDs, we have to use Create Guid
Tool from the Tools menu
Now that we are done with the Content Type that we
have to use it in our Page Layout. Now that we will go ahead and create Page
Layout. For this, we need to Right-click on Project and click on Module
template, give it a name such as “MyModule” and click on OK. This will have 2
files, Elements.xml and sample.txt. Rename the sample.txt as “PublishingPageLayout.aspx”.
Now remove the text in the PublishingPageLayout.aspx and add the following code
or your own code based on how you want the pagelayout needs to look like.
<%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage"
%>
<%@ Register Assembly="Microsoft.SharePoint" Namespace="Microsoft.SharePoint.WebControls"
TagPrefix="SharePointWebControls"
%>
<%@ Register Assembly="Microsoft.SharePoint.Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls"
TagPrefix="PublishingWebControls"
%>
<asp:Content runat="server" contentplaceholderid="PlaceHolderPageTitle">
<SharePointWebControls:FieldValue id="PageTitle"
FieldName="Title"
runat="server"/>
</asp:Content>
<asp:Content runat="server" contentplaceholderid="PlaceHolderPageTitleInTitleArea">
<SharePointWebControls:TextField ID="TitleField"
FieldName="Title"
runat="server"
/>
</asp:Content>
<asp:Content runat="server" contentplaceholderid="PlaceHolderMain">
<SharePointWebControls:TextField ID="TextField1"
FieldName="PLTitle"
runat="server"/>
<br />
<PublishingWebControls:RichHtmlField ID="RichHtmlField1"
FieldName="PLHeader"
runat="server"/>
<br />
<PublishingWebControls:RichHtmlField ID="RichHtmlField2"
FieldName="PLBody"
runat="server"/>
<br />
<PublishingWebControls:RichHtmlField ID="RichHtmlField3"
FieldName="PLFooter"
runat="server"/>
</asp:Content>
And now that we have to update the Elements.xml
which got created with the Module. Open Elements.xml file from Module, you need
to make sure that the following properties are required as shown below:
<Module Name="MyModule" RootWebOnly="TRUE" Url="_catalogs/masterpage">
<File Path="MyModule\PublishingPageLayout.aspx" Url="MyModule/PublishingPageLayout.aspx" Type="GhostableInLibrary">
<Property Name="PublishingAssociatedContentType" Value=";#MyPageContentType;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900ec5a019792a349cfaa4c98762427d5ee;#"/>
<Property Name="ContentyType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
<Property Name="Title" Value="My Publish Page
Layout"/>
</File>
</Module>
Once this is done, make sure to got he
Feature1.feature and move the contents Module and Content Type from Items in
the Solution section to Items in the Feature Section.
That’s it. Now Build and Deploy the solution.
