Layout and Pagination of Mobile Pages

Article
05/05/2014

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.

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

A single MobileDefaultTemplates.ascx file contains all the rendering templates used in mobile pages that ship with . This user control file is located in the Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\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 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 Windows SharePoint Services mobile page is divided into header, contents, and footer areas with a separator line between them. The header area contains the title of the Web site, list, or item. The contents area displays the list of lists in a home page, items in a list view page, or fields in an item form. 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 file, which 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 used in mbllists.aspx for the default home page:

<SPMobile:SPMobileForm 
  RunAt="Server" 
  PageType="HomePage" 
  Paginate="true">
  <DeviceSpecific>
    <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, however, there is only one "choice." So the page will be rendered the same way regardless of the mobile device being used.

The TemplateName attribute of the SPMobilePageTitle, SPMobilePageNavigation, and SPMobilePageContents controls is not set in the page because it is hard coded into the C# declaration of those controls. Other controls in the example use the TemplateName attribute to identify a rendering template defined in MobileDefaultTemplates.ascx.

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 home page according to site definition, or to a list view or item form according to list template type, you can create a custom rendering template in a custom .ascx file in Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES.

To apply special rendering, define a RenderingTemplate control 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

Mobile_SiteTypeID_HomePage_Title
Mobile_SiteTypeID_HomePage_Contents
Mobile_SiteTypeID_HomePage_Navigation

List Views

Mobile_ListTypeID_View_Title
Mobile_ListTypeID_View_Contents
Mobile_ListTypeID_View_Navigation

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

Replace SiteTypeID with the integer ID of the site definition, or with its name, for example, STS or BLOG. (For a custom site definition, you must use the ID number.) Replace ListTypeID with the integer ID or SPListTemplateType value representing the given list type.

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

Pagination

Windows SharePoint Services uses ASP.NET 2.0 pagination and its page behavior to support pagination of the contents area in the following mobile pages:

bloghome.aspx
dispform.aspx
disppost.aspx
mbllists.aspx
view.aspx
viewcomment.aspx

For more information on ASP.NET pagination, see ASP.NET Mobile Controls: Pagination (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/mwsdk/html/mwconpagination.asp).

Share via

Page Layout

Customizing Controls

Home Page

List Views

Item Forms

See Also

Tasks

Concepts

Additional resources