Share via

How to: Customize Mobile List View and Form Pages

  • Article

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

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

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

How to: Customize the Mobile Home Page Through Redirection

Mobile Page Rendering System