Walkthrough: Customizing a Mobile Home Page

  • Article

This content is outdated and is no longer being maintained. It is provided as a courtesy for individuals who are still using these technologies. This page may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.

This walkthrough shows how to customize the mobile home page by implementing a custom RenderingTemplate control. The example shows how to customize the header section of the home page. For an overview of the steps in customizing any section of a mobile home page, see How to: Customize Mobile Home Pages.

SPMobileWebTitle

An SPMobileWebTitle object is declared in the HeaderTemplate element of the STS home page, mbllists.aspx:

<HeaderTemplate>
  <SPMobile:SPMobileControlContainer RunAt="Server" Weightless="true">
    <SPMobile:SPMobilePageTitle RunAt="Server" />
    <SPMobile:SPMobileComponent TemplateName="MobileDefaultSeparator" RunAt="Server" />
  </SPMobile:SPMobileControlContainer>
</HeaderTemplate>

This object determines, based on the current site definition, which RenderingTemplate renders the header section of the mobile home page. (For more information about the sections of a mobile page, see Layout and Pagination of Mobile Pages.) For example, to render the header area of an STS home page on a mobile device, this object will attempt to use a RenderingTemplate with the ID Mobile_STS_HomePage_Title. If it does not find a RenderingTemplate with that ID, it will use one named Mobile_Default_HomePage_Title.

When Windows SharePoint Services 3.0 ships, there is no RenderingTemplate with the ID Mobile_STS_HomePage_Title. In this walkthrough you will create one that will make a new page title and render it large and bold.

Procedure

To customize the header section of the STS mobile home page

  1. In any text editor, create a text file (UTF-8) with the name STSHomePageTitle.ascx in the folder Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES.

  2. Add the following directives to the file:

    <%@ Control Language="C#" %>
<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %> 
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint" %>

  3. Below the directives, add a RenderingTemplate object and give it the ID that the SPMobileWebTitle object on the mbllists.aspx page is looking for: Mobile_STS_HomePage_Title.

    <SharePoint:RenderingTemplate ID="Mobile_STS_HomePage_Title" RunAt="Server" >

</SharePoint:RenderingTemplate>

  4. Inside the RenderingTemplate element, define a Template element that has a Label child control. Set the label's Text, Font-Size, and Font-Bold attributes as shown below:

      <Template>
    <mobile:Label Text="Custom STS Home Page Title" Font-Size="Large" Font-Bold="True" RunAt="Server" />
  </Template>

  5. Save and close the file.

  6. Reset Internet Information Services (IIS) by entering iisreset on a command line.

  7. If you are using a device emulator on a computer, rather than an actual mobile device, you may need to delete temporary internet files.

  8. Navigate to the default page of any STS site in your deployment with your device or emulator. You should see the title is different from the default as shown in the following two screenshots:

See Also

Tasks

How to: Customize Mobile Home Pages

Concepts

Layout and Pagination of Mobile Pages

Mobile Page Rendering System