Walkthrough: Customizing a Mobile List View Page

  • Article

Applies to: SharePoint Foundation 2010

This walkthrough shows how to customize a mobile list view page by implementing a custom RenderingTemplate control. The example shows how to customize the Body (Contents) section of the page. For an overview of how to customize any section of a mobile form or list view page, see How to: Customize Mobile List View and Form Pages.

As described in Mobile Page Rendering System, the Body area of a list view page is rendered by a chain of calls that eventually ends by calling a RenderingTemplate object named Mobile_ListTypeID_View_Contents, where ListTypeID is either the ID number of a list definition or one a SPListTemplateType value. If no RenderingTemplate object with that ID exists, the RenderingTemplate object with the ID Mobile_Default_View_Contents is used.

In Microsoft SharePoint Foundation, there is no RenderingTemplate class object with the ID Mobile_Announcements_View_Contents (or Mobile_104_View_Contents, which refers to the same list type). In this walkthrough, you create one that adds a greeting above the Announcements list.

Procedure

To customize the contents section of the mobile Announcements view 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 a User Control is added this way, 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 a RenderingTemplate object, and give it the ID that the SPMobileListContents object on the view page is looking for: Mobile_104_View_Contents.

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

</SharePoint:RenderingTemplate>

  7. Inside the RenderingTemplate element, define a Template element that has a Label child control. Set the label's Text attribute as shown in the following code.

    <Template>
    <SPMobile:SPMobileControlContainer RunAt="Server">
      <SPMobile:SPMobileComponent RunAt="Server" 
         TemplateName="MobileViewPicker" />
      <SPMobile:SPMobileComponent RunAt="Server" 
         TemplateName="MobileDefaultSeparator" />
    </SPMobile:SPMobileControlContainer>
    <mobile:Label RunAt="Server" 
      Text="Hello SharePoint Mobile User!"/>
    <SPMobile:SPMobileListItemIterator RunAt="Server" 
       ListItemSeparatorTemplateName="MobileListItemSeparator" />
</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 Announcements list with your device or emulator. You should see the greeting above the list as shown in the following screenshot.

Customized Body Section in Mobile List View

See Also

Tasks

How to: Customize Mobile List View and Form Pages

Concepts

Layout and Pagination of Mobile Pages

Mobile Page Rendering System

Other Resources

Mobile Development How Tos and Walkthroughs