Create web part pages with custom layouts in SharePoint 2010

SharePoint provides web part pages with eight layouts by default. Unfortunately the process of creating web part pages with custom layouts is a little complex.
In this post i will show you how you can create web part pages with custom layouts.
I have created a component which will deploy an application page which can be used to achieve this.

Go to http://archive.msdn.microsoft.com/customspcf and download the wsp file with the name CustomSPCF.wsp

Deploy the solution.
This will deploy an application page at /_layouts/customspcf/customspcf.aspx
It will add four web part page layouts at 14\Template\1033\Sts\Doctemp\Smartpgs\CustomSPCF\
and four images corresponding to the layout at 14\Template\Images\CustomSPCF\

The below image shows how the application page will look like


You can customize the application page and replace the deployed custom layouts or add new layouts.
Follow the below steps to replace the exisitng layouts.

1. Go to the applciation page at 14\Templates\Layouts\CustomSPCF\customSPCF.aspx
2. Open it using an editor and replace the options available in it. You can do this by looking for the onetWebPartPageTemplate.

To change the

SingleColumnLayout change the text for the first option, and the files spstd9.aspx and spstd9.gif .
TwoColumnLayout change the text for second option and files spstd10.aspx and spstd10.gif
and so on......

Do an iisreset after you change the existing files so that the changes will be reflected.
I have used the option values from 9 because the values 0-8 are used by the default templates provided by SharePoint 2010.

To add more layouts, add an option and increment the value for the option by one.
Which means if you want to add a new layout, you have to add another line which should look like

<OPTION value="13">New Layout</OPTION>

3. The next step is to add the correspoding layout page
Go to 14\Template\1033\Sts\Doctemp\Smartpgs\CustomSPCF\ and add a file spstd10.aspx


4. The final step is to add the image related to the layout
Go to 14\Template\Images\CustomSPCF\ and add a file spstd10.gif


This completes the process for adding new layouts for web part pages in SharePoint 2010.
Go to your application page again and you should be able to see the newly added option available.

Comments

  1. Manoj PatelNovember 30, 2011 at 11:10 PM

    I can't create page from custom application page & also tell me how to add new layouts under out of the box application page (spcf.aspx)

    ReplyDelete
    Replies
    1. Frodo82January 31, 2012 at 2:26 PM

      I would like to know also how to modify spcf.aspx, the custom page is disconnected from the menu choices that navigate us to the new web part page

      Delete
  2. broncodaveyJanuary 27, 2012 at 1:17 PM

    Hello. Thank you for the solution. I can deploy it just fine, but when I attempt to create the new layout i get the following error ...Could not find a part of the path 'C:\\Program Files\\Common Files\\Microsoft Shared\\Web Server Extensions\\14\\Template\\1033\\BLANKINTERNET\\doctemp\\smartpgs\\customspcf\\spstd9.aspx'. Notice that STS is replaced by BLANKINTERNET in the path. Is it a permissions issue? TIA for telling me what I am doing wrong.

    ReplyDelete
  3. MayankFebruary 3, 2012 at 12:02 AM

    facing same issue

    ReplyDelete
  4. ReddyApril 27, 2012 at 11:30 PM

    Hi
    This is Tirupathireddy
    I Have One Web application In that having more Custom pagelayouts?
    than how to find that custom pagelayouts...and which place that pagelayouts stored.....please anybody reply my question as early as possible
    thank u

    ReplyDelete
  5. BhaskaraMay 18, 2012 at 4:21 AM

    Great post


    thanks,
    bhaskar
    http://csharpektroncmssql.blogspot.com

    ReplyDelete
  6. Joe ZhouApril 5, 2013 at 6:14 AM

    From broncodavery's problem,
    in the customspcf.aspx file, change the following line
    string sourceFilePath = SPUtility.GetGenericSetupPath("Template\\") + spWeb.Language.ToString() + "\\" + spWeb.WebTemplate +"\\doctemp\\smartpgs\\customspcf\\";

    to
    string sourceFilePath = SPUtility.GetGenericSetupPath("Template\\") + spWeb.Language.ToString() + "\\" + SPWebTemplate.WebTemplateSTS +"\\doctemp\\smartpgs\\customspcf\\";

    ReplyDelete

Post a Comment

Popular posts from this blog

Create a Custom Timer Job in SharePoint 2010

Image
I had to create a custom timer job in SharePoint 2010 recently, but could not find a blog which explained the complete procedure to do this. So I decided to write one. In this post I will give a step by step process to create a Custom timer job in SharePoint 2010 using Visual Studio 2010. Timer jobs are created by extending the SPJobDefinition class and deployed as features. So we will create a class which extends the SPJobDefinition class. Then we will create a feature and we will handle the featureActivated() event of that feature. In that we will instantiate the class created. Let us see how to do all this. Create an empty SharePoint project in VS 2010. Give the Site Collection URL where you want this feature will be activated. Create a class in the project.   Add these namespaces using Microsoft.SharePoint; using Microsoft.SharePoint.Administration; class MyTimerJob : SPJobDefinition { public MyTimerJob() : base () { } public MyTimerJob( SPWebApplic
Read more

SharePoint list forms display HTML instead of rendering

Image
I have recently come across a problem where a custom list form i created using SharePoint designer was displaying the HTML directly instead of rendering it. As shown above the HTML for the Assigned To column value is not being rendered. To overcome this you just have to add a simple property to you XSLT. Select the HTML that is displayed and go to the code view. You will see the statement as <xsl:value-of select="@Assigned TO"></xsl:value-of> To this you have to add a parameter called display-output-escaping <xsl:value-of select="@Assigned TO" display-output-escaping="yes"></xsl:value-of> As you can see, this time the HTML is rendered properly.
Read more