Walkthrough: Customizing a Mobile List View Page

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 a mobile list view page by implementing a custom RenderingTemplate control. The example shows how to customize the 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, an Microsoft.SharePoint.MobileControls.SPMobileListContents template selector control is called, through a chain of calls, from a control on the page.

Based on the current list type, this object determines what RenderingTemplate control is rendered on the contents section of the mobile home page. The control looks for 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, then the RenderingTemplate object with the ID Mobile_Default_View_Contents is used.

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) that is included when Windows SharePoint Services 3.0 ships. In this walkthrough you will create one that adds a greeting above the Announcements list.

Procedure

To customize the contents section of the mobile Announcements view page

1. In any text editor, create a text file (UTF-8) with the name AnnouncementsViewPageContents.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 SPMobileListContents object on the view page is looking for: Mobile_104_View_Contents.

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

4. Inside the RenderingTemplate element, define a Template element that has a Label child control. Set the label's Text attribute as shown below:

     <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>
   

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 Announcements list with your device or emulator. You should see the greeting above the list as shown in the following screenshot:

Figure 1

See Also

Tasks

How to: Customize Mobile List View and Form Pages

Concepts

Layout and Pagination of Mobile Pages

Mobile Page Rendering System