How to: Customize Mobile List View and Form Pages
Applies to: SharePoint Foundation 2010
This topic provides an overview of the basic procedure for customizing Microsoft SharePoint Foundation list view and form pages that can be accessed by mobile devices. For a detailed procedure, see Walkthrough: Customizing a Mobile List View Page. For an overview of how to customize mobile home pages, see How to: Customize Mobile Home Pages.
As described in detail in Mobile Page Rendering System, controls in the Header (Title), Body (Contents), and Footer (Navigation) areas of a mobile list view page or list item form each start a chain of calls that ultimately results in a call to a RenderingTemplate object that renders the corresponding area of the mobile page. This is almost always a RenderingTemplate with a segmented ID. If a RenderingTemplate with a matching name is not found, a default template is used. This means that you can customize the Header, Body, or Footer, by creating a RenderingTemplate with the ID for which the runtime will be looking.
Specifically, the runtime looks for a RenderingTemplate ID that has the following format:
IntendedListUse_ListTypeID_PageType_PageArea
The placeholders IntendedPageUse, ListTypeID, PageType, and PageArea, are defined in Segmented Rendering Template IDs. On a list view page or item form, the possible values for PageType are DispForm, NewForm, EditForm, and DeletePage.
For more information about the sections of a mobile page, see Layout and Pagination of Mobile Pages.
For a specific IntendedPageUse, ListTypeID, PageType, and PageArea, if a RenderingTemplate that has a matching name is not found, one with "Default" in place of the ListTypeID is used:
IntendedPageUse_Default_PageType_PageArea
For example, if the runtime is looking for a RenderingTemplate that has the ID Mobile_Announcements_View_Contents, it will not find one (if no custom template with that name was added). So it uses Mobile_Default_View_Contents, which does exist, to render the Body (Contents) area of the list view page for an Announcements list.
Therefore, if you wanted to customize the rendering of the Body (Contents) of this list view, you could do so by creating a RenderingTemplate element with the ID Mobile_Announcements_View_Contents (or Mobile_104_View_Contents) in an .ascx file that you deploy to %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATES\ControlTemplates. You may not modify the MobileDefaultTemplates.ascx or GbwMobileDefaultTemplates.ascx files. For more information about how to create a custom rendering template for a list view page or form, see the procedure in the next section, and also Walkthrough: Customizing a Mobile List View Page.
Existing RenderingTemplates
Dozens of RenderingTemplate objects for mobile list view pages and forms are included in the MobileDefaultTemplates.ascx or GwbMobileDefaultTemplates.ascx files that are installed with SharePoint Foundation. The following are some examples.
Mobile_Events_DispForm_Navigation
Mobile_Comments_View_Navigation
Mobile_Posts_DeletePage_Navigation
Mobile_425_View_Navigation
MobileFolder_DocumentLibrary_View_Navigation
MobileDailyView_Events_View_Navigation
You may not modify the MobileDefaultTemplates.ascx or GwbMobileDefaultTemplates.ascx files. You can create a new RenderingTemplate (in your own .ascx file) that has the same ID as one of the existing rendering templates. However, if you do this, there is a risk that you will break other solutions that are deployed in SharePoint Foundation that depend on the original RenderingTemplate that has the same ID.
Note
The RenderingTemplate elements that are included with SharePoint Foundation load before custom templates load. Therefore, when a custom template that has the same name as one of the existing rendering templates loads, the custom template overrides the original template. If more than one custom RenderingTemplate object has the same name, the one whose file name is alphabetically last overrides all the others. If a specific file has two or more rendering templates that have the same name, none of them is loaded.
In addition, the following default RenderingTemplate elements are defined in the same file. These are used by the runtime whenever a RenderingTemplate for the current list type is not defined. The same risk is present if you create a new RenderingTemplate object that has any of these names:
Mobile_Default_DeletePage_Contents
Mobile_Default_DeletePage_Navigation
Mobile_Default_DeletePage_Title
Mobile_Default_DispForm_Contents
Mobile_Default_DispForm_Navigation
Mobile_Default_DispForm_Title
Mobile_Default_EditForm_Contents
Mobile_Default_EditForm_Navigation
Mobile_Default_EditForm_Title
Mobile_Default_NewForm_Contents
Mobile_Default_NewForm_Navigation
Mobile_Default_NewForm_Title
Mobile_Default_View_Contents
Mobile_Default_View_Navigation
Mobile_Default_View_Title
MobileDailyView_Default_View_Navigation
MobileFolder_Default_View_Title
MobileFolder_Default_View_Navigation
You can nest RenderingTemplate objects. See the following example.
To customize a section of a mobile list view or form page
In Microsoft Visual Studio, create an Empty SharePoint Project. Make it a farm solution, not a sandboxed solution.
Add a SharePoint Mapped Folder to TEMPLATE\ControlTemplates.
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.
Delete the .ascx.cs and .ascx.designer.cs (or .ascx.vb and .ascx.designer.vb) files. They are not needed for this project.
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" %>
Add a rendering template to the .ascx file, and give it an ID in the following format: IntendedListUse_ListTypeIDPageType_PageArea.
IntendedListUse is Mobile, MobileFolder, or MobileDailyView.
ListTypeID is either the ID number of a type of the current list (such as 105) or one of the values of the SPListTemplateType enumeration (such as Contacts).
PageType can be View, NewForm, EditForm, DispForm, or DeletePage.
PageArea can be Title, Contents, or Navigation.
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.
Example
The following example of a RenderingTemplate definition shows how you can nest RenderingTemplate objects. The example shows a custom RenderingTemplate for the footer of a list view page showing list type 104 (Announcements). For a detailed example of how to customize a list view page, see Walkthrough: Customizing a Mobile List View Page.
<SharePoint:RenderingTemplate RunAt="Server" ID="Mobile_104_View_Navigation">
<Template>
<mobile:Link RunAt="Server"
Text="ASP.NET Website" href="https://www.asp.net" />
<mobile:Label RunAt="Server" Text="" BreakAfter="True" />
<SPMobile:SPMobileComponent RunAt="Server"
TemplateName="Mobile_Default_View_Navigation" />
</Template>
</SharePoint:RenderingTemplate>
See Also
Tasks
Walkthrough: Customizing a Mobile List View Page
How to: Customize Mobile Home Pages
Concepts
Layout and Pagination of Mobile Pages