Layout and Pagination of Mobile Pages

  • Article

Applies to: SharePoint Foundation 2010

A Microsoft SharePoint Foundation mobile page uses templates both to describe page layout and to reference Microsoft ASP.NET mobile controls or native SharePoint mobile controls.

The MobileDefaultTemplates.ascx and GbwMobileDefaultTemplates.ascx files contains all the rendering templates used in mobile pages that are included with SharePoint Foundation. These user control files are located in the %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\CONTROLTEMPLATES directory. Templates are loaded dynamically through the mobile rendering framework from this location. By placing custom .ascx files that define rendering templates in this directory, and giving those rendering templates the appropriate identifiers (IDs), you can override the default controls that populate a mobile page. For more information about the page rendering process and the IDs of rendering templates, see Mobile Page Rendering System.

Page Layout

Each SharePoint Foundation mobile page is divided into header, contents, and footer areas that are usually separated with a line. The header area contains the title of the Web site, list, or item. The contents area displays the contents such as images, wiki text, mobile adapters of Web Parts on a standard mobile page. On a list view page the contents display the items in a list, and on a list item form, the contents shows the fields in a list item. The footer area contains action URLs for working with list items and navigation URLs for going to other pages.

The default controls on a mobile page refer to rendering templates defined in the MobileDefaultTemplates.ascx and GbwMobileDefaultTemplates.ascx files. These templates expand their child templates and render controls in the page. The header and footer areas implement the ASP.NET<DeviceSpecific> Element and are always displayed, even when the contents area is paginated.

The following example shows the templates that are used in the mbllists.aspx page, the "list of lists" page for mobile devices.

<SPMobile:SPMobileForm RunAt="Server" 
  PageType="HomePage" 
  Paginate="true">
  <DeviceSpecific>
    <Choice Filter="supportsCss">
      <HeaderTemplate>
        <SPMobile:SPMobileComponent RunAt="Server" 
          Templatename="MobilePageTitleWithCss" Weightless="true" />
      </HeaderTemplate>
      <FooterTemplate>
        <SPMobile:SPMobileComponent RunAt="Server" 
          Templatename="MobilePageNavigationWithCss" Weightless="true" />
      </FooterTemplate>
    </Choice>
    <Choice>
      <HeaderTemplate>
        <SPMobile:SPMobileControlContainer RunAt="Server" Weightless="true">
          <SPMobile:SPMobilePageTitle RunAt="Server" />
          <SPMobile:SPMobileComponent RunAt="Server" 
            TemplateName="MobileDefaultSeparator" />
        </SPMobile:SPMobileControlContainer>
      </HeaderTemplate>
      <FooterTemplate>
        <SPMobile:SPMobileControlContainer RunAt="Server" Weightless="true">
          <SPMobile:SPMobileComponent RunAt="Server" 
            Templatename="MobilePaginateNavigation" />
          <SPMobile:SPMobileComponent RunAt="Server" 
            TemplateName="MobileDefaultSeparator" />
          <SPMobile:SPMobilePageNavigation RunAt="Server" />
        </SPMobile:SPMobileControlContainer>
      </FooterTemplate>
    </Choice>
  </DeviceSpecific>
  <SPMobile:SPMobilePageContents RunAt="Server" />
</SPMobile:SPMobileForm>

The DeviceSpecific element is a kind of switch statement. For more information, see Introduction to the DeviceSpecific Control. In this case, if the mobile device supports Cascading Style Sheets (CSS) files, the header and footer areas will use rendering templates that use CSS styling. Otherwise, rendering templates that contain their own styling information are used.

Note that in the non-CSS branch of the markup, the TemplateName attribute of the SPMobilePageTitle and SPMobilePageNavigation controls is not set. Nor is the TemplateName attribute set for the SPMobilePageContents control. This is because this property value is hard-coded into the declaration of those controls. Other controls in the example use the TemplateName attribute to identify a rendering template that is defined in the MobileDefaultTemplates.ascx file.

The SPMobilePageContents tag inserts the body region in the page, which differs according to the site definition, list type, or form.

Customizing Controls

To apply special rendering to a mobile page for a specific site definition, or to apply special rendering for a specified list view or item form, you can create a custom rendering template in a custom .ascx file in the %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\CONTROLTEMPLATES directory. Give your custom RenderingTemplate control an ID attribute value in one of the following formats. For more detailed information, see Mobile Page Rendering System, How to: Customize Mobile Home Pages, How to: Customize Mobile List View and Form Pages , and How to: Customize Field Rendering on Mobile Pages.

Home Page

  • WebPartMobile_SiteTypeID_HomePage_Title

  • WebPartMobile_SiteTypeID_HomePage_Contents

  • WebPartMobile_SiteTypeID_HomePage_Navigation

  • WebPartMobileDetail_SiteTypeID_HomePage_Contents

  • WebPartMobileDetail_SiteTypeID_HomePage_Navigation

  • Mobile_SiteTypeID_HomePage_Title

  • Mobile_SiteTypeID_HomePage_Contents

  • Mobile_SiteTypeID_HomePage_Navigation

WebPartMobile rendering templates are intended for use on a mobile page (mblwp.aspx or mblwiki.aspx) that corresponds to a nonmobile Web Part page. WebPartMobileDetail rendering templates are intended for use on a mobile page (mblwpdetail.aspx) that presents a more detailed rendition of a nonmobile Web Part page. For more information about these mobile pages, see Mobile Wiki and Web Parts Pages. The Mobile_*_HomePage_* templates are intended for use on a legacy Web site home page whose corresponding nonmobile home page does not have Web Parts and is not wiki-enabled.

The mobile "HomePage" page type includes pages that are not actually home pages for a site. The type includes pages that do not fit neatly into other categories, such as list view page or form page. For example, the mobile "list of lists" page, mbllist.aspx, is of type HomePage.

Note

The nonmobile page to which a mobile page corresponds is called the "target page" of the mobile page.

List Views

  • Mobile_ListTypeID_View_Title

  • Mobile_ListTypeID_View_Contents

  • Mobile_ListTypeID_View_Navigation

  • MobileDailyView_ListTypeID_View_Navigation

Note

MobileDailyView* rendering templates are intended for use on the mobile view page for the daily events on the calendar, or the pictures in a picture library, of a Group Work site (viewdaily.aspx). For more information about this page, see Special Purpose Mobile Pages.

Item Forms

  • Mobile_ListTypeID_NewForm_Title

  • Mobile_ListTypeID_NewForm_Contents

  • Mobile_ListTypeID_NewForm_Navigation

  • Mobile_ListTypeID_EditForm_Title

  • Mobile_ListTypeID_EditForm_Contents

  • Mobile_ListTypeID_EditForm_Navigation

  • Mobile_ListTypeID_DispForm_Title

  • Mobile_ListTypeID_DispForm_Contents

  • Mobile_ListTypeID_DispForm_Navigation

Naming Custom Rendering Templates

Give your custom .ascx control a name based on one of the above formats, depending on the type of site, page, and page area, for which you want custom rendering. Replace SiteTypeID with the integer ID of the site definition, or with its name, for example, STS, SGS, or BLOG. (For a custom site definition, you must use the ID number.) Replace ListTypeID with the integer ID or SPListTemplateType value that represents the specified list type.

You can also create a new page and use the home page redirection feature. For more information, see How to: Customize the Mobile Home Page Through Redirection.

Pagination

SharePoint Foundation uses ASP.NET pagination and its page behavior to support pagination of the contents area of mobile pages. For more information about ASP.NET pagination, see ASP.NET Mobile Controls: Pagination.

See Also

Tasks

How to: Customize Mobile Home Pages

Walkthrough: Customizing a Mobile Home Page

How to: Customize Mobile List View and Form Pages

Walkthrough: Customizing a Mobile List View Page

How to: Customize Field Rendering on Mobile Pages

Walkthrough: Customizing Item Titles on Mobile Forms

Walkthrough: Creating a Custom Field Rendering Control for Mobile Pages

Concepts

Mobile Page Rendering System

How to: Customize the Mobile Home Page Through Redirection