Walkthrough: Customizing Item Titles on Mobile Forms

  • Article

Applies to: SharePoint Foundation 2010

This walkthrough shows how to customize the rendering of fields on mobile pages by implementing a custom RenderingTemplate. The example shows how to customize, on the mobile list item Display form, the Title field of an item in an Announcements list. For an overview of the steps in customizing fields on mobile pages, see How to: Customize Field Rendering on Mobile Pages.

As described in Mobile Page Rendering System, a chain of calls, originating with a control on the page, ultimately results in a call to a RenderingTemplate with an ID that has the following format: MobileCustomListField_ListTypeID_FieldType_Field.

ListTypeID is either the ID number of the type of the current list (such as 105) or one of the values of the SPListTemplateType enumeration (such as Contacts). FieldType is the data type of the field, for example, Text or Number, and Field is the name of the field, such as WorkPhone. If no RenderingTemplate with that ID exists, the RenderingTemplate with the ID MobileDefaultListField is used.

In Microsoft SharePoint Foundation, there is no RenderingTemplate that has the ID MobileCustomListField_Announcements_Text_Title. In this walkthrough, you create one that substitutes, on the mobile Display form for an item in the Announcements list, a new Title for the item.

To customize the Title field of an Announcements item

  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 a RenderingTemplate, and give it the ID that the runtime is looking for: MobileCustomListField_Announcements_Text_Title.

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

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

    <Template>
  <mobile:Label Text="Title field in Announcements List" 
    RunAt="Server" />
</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 an Announcements list that has at least one item using your device or emulator. Click an item to display it. You should see the new Title as shown in the following image.

Customized Mobile Display Item Form

See Also

Tasks

How to: Customize Field Rendering on Mobile Pages

Concepts

Layout and Pagination of Mobile Pages

Mobile Page Rendering System