Walkthrough: Customizing a Mobile Home Page

  • Article

Applies to: SharePoint Foundation 2010

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.

Before Customization

An SPMobileComponent object, whose TemplateName property is explicitly set to WebPartMobileSummaryViewTitle, is declared in both of the HeaderTemplate elements of the mblwiki.aspx file that is used as a mobile home page for a team site (STS). The following shows one of these elements:

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

This object calls the RenderingTemplate in MobileDefaultTemplates.ascx whose ID is "WebPartMobileSummaryViewTitle". The RenderingTemplate is shown here:

<SharePoint:RenderingTemplate RunAt="Server" 
  id="WebPartMobileSummaryViewTitle">
  <Template>
    <SPMobile:SPMobileWebTitle RunAt="Server" Prefix="WebPartMobile" />
  </Template>
</SharePoint:RenderingTemplate>

As this example shows, the rendering template calls a template selector object of the class SPMobileWebTitle. The template selector object constructs the following rendering template ID and calls a rendering template with that ID: WebPageMobile_STS_HomePage_Title. If there is no rendering template with that ID, it uses one named WebPageMobile_Default_HomePage_Title.

Microsoft SharePoint Foundation does not include a RenderingTemplate with the ID Mobile_STS_HomePage_Title. In this walkthrough, you create one that renders the home page title in a two-tone panel. Before your customization, the WebPageMobile_Default_HomePage_Title renders the title of the STS home page as seen in this screen shot. The title text comes from the title of the corresponding nonmobile STS home page. The text is rendered inside a dark blue panel in white letters.

Default rendering of the title area of a Team Site home page

Uncustomized Mobile Home Page

Procedure

To customize the header section of the STS mobile home page

  1. In Microsoft Visual Studio, create an Empty SharePoint Project. Make it a farm solution, not a sandboxed solution.

  2. Add a SharePoint Mapped Folder to TEMPLATE\ControlTemplates.

  3. Right-click the new folder and add a SharePoint User Control. Give the .ascx file a name that will distinguish it from those of other solution providers; for example, ContosoMobileRenderingTemplates.ascx. Visual Studio automatically adds the file to the SharePoint Solution manifest and sets it to be deployed to %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates.

    Tip

    Do not add the User Control by right-clicking the project in Solution Explorer. When you add a User Control in this manner, Visual Studio puts it in a subfolder of TEMPLATE\ControlTemplates. If it is not moved, Visual Studio deploys it to a corresponding subfolder of %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates. Mobile rendering templates in subfolders are not loaded.

  4. Delete the .ascx.cs and .ascx.designer.cs (or .ascx.vb and .ascx.designer.vb) files. They are not needed for this project.

  5. Replace the entire directives section of the .ascx file with the following markup.

    <%@ Register TagPrefix="GroupBoardMobile"   Namespace="Microsoft.SharePoint.Applications.GroupBoard.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#"   %> 
<%@ Assembly Name="Microsoft.SharePoint, Version=14.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=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="WPMobile" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

  6. Below the directives, add the following markup. This creates a RenderingTemplate with the ID that the page parser is looking for when it renders the header area of the STS home page.

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


</SharePoint:RenderingTemplate>

  7. Inside the RenderingTemplate element, define a Template element that has a SPMobilePaddedPanel child control. Set the label's ForeColor attribute, BackColor attribute, Font-Size attribute, and Font-Bold attribute as shown in the following example.

    <Template>
    <SPMobile:SPMobilePaddedPanel RunAt="Server" 
      ForeColor="#FFFFFF" 
      BackColor="#990033" 
      Font-Bold="True" 
      Font-Size="13pt">
      <WPMobile:WebPartMobilePageTitle RunAt="Server" />
    </SPMobile:SPMobilePaddedPanel>
</Template>

  8. On the Build menu, select Deploy Solution. This automatically saves the .ascx file, deploys it to %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATES\ControlTemplates, and recycles the web application so that all the .ascx files in that folder are reloaded.

  9. Navigate to the home page of any STS site in your deployment with your device or emulator. The title should appear in an inner red panel that is within the dark blue panel. (The outer panel is declared directly on the mblwiki.aspx page, so it is not removed by your customization. If you want to remove it, you must create a new home page for STS sites and use Home Page Redirection to redirect mobile devices to your new page. For more information about Home Page Redirection, see Home Page Redirection and How to: Customize the Mobile Home Page Through Redirection.)

Customized Header Section in Home Page

See Also

Tasks

How to: Customize Mobile Home Pages

Concepts

Layout and Pagination of Mobile Pages

Mobile Page Rendering System