Creating Custom Web Part Page Templates for Microsoft SharePoint Products and Technologies

 

David Long
Lana Fly
Scott Ruble
Microsoft Corporation

August 2003

Applies to:
    Microsoft® Windows® SharePoint™ Services
    Microsoft Office SharePoint Portal Server 2003

Summary: Learn how to add custom Web Part Page templates to SharePoint sites by using sample code for the Web Part Page creation form and several sample templates. (6 printed pages)

Download CustomWebPartPageTemplateSample.EXE.

Contents

Introduction
Configuring a Customized Creation Form
Adding a New Template
Limitations
Conclusion

Introduction

You can use the Web Part Page creation form in Microsoft® Windows® SharePoint™ Services to create a Web Part Page by selecting from a set of eight predefined page templates, which define the general layout of the Web Part Page. However, you cannot add additional templates to the Web Part Page creation form, and you cannot embed Web Parts in any of the predefined templates.

This article describes how to create a new, customized creation form that can contain an unlimited number of custom page templates that can contain embedded Web Parts. Sample Web Part Page templates that accompany this article are available for download. You can modify these sample templates to fit your needs.

Note   The information in this article also applies to Microsoft Office SharePoint Portal Server 2003, which is built on the Windows SharePoint Services platform. The samples that accompany this article should work when loaded into sites created with SharePoint Portal Server.

Configuring a Customized Creation Form

First you must create a customized creation form. The following procedure describes how to do this.

Note   Because the example site in the following procedure is a US English site, the steps instruct you to copy files into the 1033 (US English language) directory. If you want to configure a customized Create Page for a site that uses a different language copy the files into the appropriate language directory (for example, the 3082 directory for Spanish or the 1041 directory for Japanese).

To configure a customized Create Page

  1. Copy the Custspcf.aspx file to the following directory on your server running Windows SharePoint Services:

    Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\LAYOUTS\1033.

    The Custspcf.aspx file is a modified version of the standard Web Part Page creation form (Spcf.aspx). Do not modify the standard Web Part Page creation form. To create a customized creation form, modify the Custspcf.aspx file.

  2. Copy all the image files required for the customized creation form (Custspcf.aspx) into the following directory on your server running Windows SharePoint Services:

    Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\LAYOUTS\1033\IMAGES.

    Typically, thumbnail images of the page templates are stored in this directory. In this example, use the images for the original eight templates. After you modify the Custspcf.aspx file, you can use any images you want as long as the name of the thumbnail.gif file for each page template matches the name of the template (for example, if the name of a template file is Custom9.aspx, the name of the corresponding .gif file must be Custom9.gif). This example uses the following thumbnail image files: Custom1.gif, Custom2.gif, Custom3.gif, Custom4.gif, Custom5.gif, Custom6.gif, Custom7.gif, and Custom8.gif.

  3. On the Create Page or on the home page for your SharePoint site, add a link to your new, customized creation form. To add a link to the Create Page, follow these steps:

    1. Use an HTML editor or text editor to open the Create.aspx file located in the following directory:

      Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\LAYOUTS\1033\.

    2. In the Create.aspx file, search for the following element:

      <a href="spcf.aspx" title="Web Part Page" target="_self">
      
    3. Select and copy the entire TR element that contains the "<a href="spcf.aspx" title="Web Part Page" target="_self">" element, and then paste the TR element on the next line.

    4. On the first line in the new TR element, change spcf.aspx to custspcf.aspx, and then change the title attribute and the alt attribute to match the title of the customized creation form.

    5. In the following line in the new TR element, change spcf.aspx to custspcf.aspx, and then change "Web Part Page" to match the title of the customized creation form:

      <a href="spcf.aspx" target="_self">Web Part Page</a><br>
      
    6. On the next line, change the description to describe the customized creation form.

  4. Copy all your customized page templates into the following directory:

    Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\1033\STS\DOCTEMP\SMARTPGS\.

    You can include as many page templates as you want in your customized creation form, and you can embed Web Parts in your customized templates. This example uses the following templates: Custom1.aspx, Custom2.aspx, Custom3.aspx, Custom4.aspx, Custom5.aspx, Custom6.aspx, Custom7.aspx, Custom8.aspx. Your custom templates should be modeled after these.

  5. If you need to configure localized versions of your customized creation form and customized page templates, repeat steps 1 through 4, using the appropriate language directory for each localized version.

Adding a New Template

After you configure your customized creation form, you have eight custom page templates that are identical to the standard page templates on the standard Web Part Page creation form. You can modify the existing eight templates or add new ones. The following example procedure describes how to add a new page template with an embedded Image Web Part.

  1. Use an HTML editor or text editor to open the Custspcf.aspx file on your server.

  2. In the Custspcf.aspx file, search for the following line:

    <SELECT id="onetidWebPartPageTemplate" name="WebPartPageTemplate" size="8" onchange="DoTemplateOptionChange()">
    
  3. Change the size attribute in this line to 9.

  4. Under the <SELECT> line, add a new <OPTION> tag to the end of the list of <OPTION> tags (for example, add <OPTION value="custom9">My New Custom Template</OPTION> to the end of the list).

    Note   The number of page templates that can be displayed is unlimited. The only restriction is that the name of the preview image for any page template must match the name of that template (for example, if the name of a template is Custom9.aspx, the name of the corresponding preview image must be Custom9.gif).

  5. Save the page.

  6. In the Images directory (Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\LAYOUTS\1033\IMAGES), make a copy of the Custom1.gif file and name it Custom9.gif.

  7. In the SMARTPGS directory (Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\1033\STS\DOCTEMP\SMARTPGS), make a copy of the Custom1.aspx file and name it Custom9.aspx.

    Note   The sample code for the customized creation form assumes that each page template includes a title bar Web Part with a

    _TitlePlaceHolder_

    token. When a user selects a page template to create a page, types a file name for the new page, and then clicks Create, a Web Part Page is created based on the page template, and the

    _TitlePlaceHolder_

    token on the Web Part Page is automatically replaced with the file name for the page. If you create custom page templates, make sure that you include an embedded title bar Web Part with the

    _TitlePlaceHolder_

    token in each template. Place the title bar Web Part in a zone, as shown in the following sample code.

    <WebPartPages:WebPartZone  Title="loc:TitleBar" ID="TitleBar"
     LockLayout="true" AllowPersonalization="false">
        <WebPartPages:TitleBarWebPart >
            <WebPart xmlns="http://schemas.microsoft.com/WebPart/v2" xmlns:tb="http://schemas
    .microsoft.com/WebPart/v2/TitleBar">
                <tb:HeaderTitle>
                    _TitlePlaceHolder_
                </tb:HeaderTitle>
                <tb:Image>/_layouts/images/wpicon.gif</tb:Image>
            </WebPart>
        </WebPartPages:TitleBarWebPart>
    </WebPartPages:WebPartZone>
    
  8. Use an HTML editor or text editor to open the Custom9.aspx file.

  9. Search for the zone where the ID="FullPage".

  10. Change the FullPage zone to have an end tag. For example:

    <WebPartPages:WebPartZone  Title="loc:FullPage" ID="FullPage"> 
    </WebPartPages:WebPartZone>
    
  11. Paste the following XML into the FullPage zone, and then save the page. This XML defines an Image Web Part that is linked to the Microsoft corporate logo.

    <WebPartPages:ImageWebPart >
        <WebPart xmlns="http://schemas.microsoft.com/WebPart/v2" xmlns:iwp="http://
    schemas.microsoft.com/WebPart/v2/Image">
                <Title>Company Logo</Title>
                <FrameType>None</FrameType>
            <iwp:HorizontalAlignment>Left</iwp:HorizontalAlignment>
            <iwp:ImageLink>http://www.microsoft.com/homepage/gif/bnr-microsoft.gif</iwp:ImageLink>
        </WebPart>
    </WebPartPages:ImageWebPart>
    
  12. To test your new page template, browse to your customized creation form, and then create a page based on your new template. If the page template works correctly, an Image Web Part that contains the Microsoft logo appears at the top of the page.

Limitations

While the method described in this paper provides a lot of flexibility for adding your own custom page templates, there are a few limitations. For example, when you create a document library, you can specify a default document template to use when a user clicks New Document in the document library. However, Windows SharePoint Services does not permit you to add your custom page templates to the list of standard document templates. Because of this, you cannot set a custom template as the default template for a document library unless you make a backup of the Spcf.aspx file and then replace the contents of the Spcf.aspx file with the contents of the Custspcf.aspx file.

Note   If you apply a software update, or if you reinstall or upgrade Windows SharePoint Services, the modified version of the Spcf.aspx file may be overwritten.

Conclusion

This paper describes how to create custom page templates for use with SharePoint sites. Sample templates are available for download with this article. In order to use the custom page templates, you also need to create a custom creation form that can include an unlimited number of custom page templates for use in your deployment of Microsoft SharePoint Products and Technologies.