Inside SharePoint - Customize the Mobile Home Page

  • Article

Hi,

These days I've been reviewing different ideas I wrote down in the last months. One of those was about how to extend mobile sharepoint features. So I started re-reading the SDK, landing at How to: Customize the Mobile Home Page through Redirection article. It certainly describes in depth the mechanism of the redirection and indeed it is a great extensibility option, however I found that there are some scenarios where it would need to implement a different approach. Some of those could be:

  • Use a different name for the redirection
  • Differentiate the redirection process from the site definition
  • Customize different home pages for sites with the same site definition
  • Customize OOB sites, avoiding duplicates names

OOB Feature Redirection

From the article we can see how this (bi-level) redirection mechanism works:

  1. The mobile home page has a short URL with an "m" folder appended to the end of the regular URL (for example, https://Server/sites/Site/m/) that redirects the request to the mobile default.aspx page.
  2. The default.aspx page then redirects the user to the actual home page, according to the current site definition type

The first step uses the Mobility Shortcut URL feature (FeatureID: f41cc668-37e5-4743-b4a8-74d1db3fd8a4 - Name: MobilityRedirect Scope:Web) creating a Module that specifies the virtual path of the folder for the redirection.

     <Module Name="mobile" Url="m" Path="">        <File Url="default.aspx" />    </Module>

This will create a folder at the root level of the Site (from a virtual point of view).

In order to test the OOB funcionality, you will need to:

  1. Activate MobilityRedirect feature (it is not activated by default) through the command line as it is hidden.
    1. stsadm -o activatefeature -name MobilityRedirect -url https://Server/sites/Site
    2. To test if it is activated browse to https://Server/sites/Site/m/
      1. If it is working it will redirect yout to a page that looks like figure 1, otherwise it will give you a 404 error

figure 1

Mobile View Sample from Publishing SharePoint Portal

Custom Shortcut Feature Redirection 

So to solve the scenarios mentioned, the new approach will use a feature to redirect to the final home page, instead of an intermediate redirection page. The feature itself would use a custom control to read the actual final page .

As the OOB feature uses /m/ I would not recommend the same name, as there will be collisions in activating and deactivating processes. Indeed you may find that after deactivating the feature it is still working. This would need to be resolved as part of a complete deactivation in the deactivation event.

So in order to accomplish our solution, we would need to create a feature with a custom shortcut url and a custom file redirect.This scenario would be possible following these steps:

  1. Create a folder at %PROGRAMFILES%\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES called SharePoint.Search.Extensions.MobileRedirect or any name you choose
    1. Create a file inside this folder called feature.xml with the following content:
      1. <?xml version="1.0" encoding="utf-8"?><Feature Id=" [GUID] "     Title="Mobile Redirector"    Description="Mobile Redirector"     Version="1.0.0.0"    Scope="Web"    Hidden="FALSE"    DefaultResourceFile="core"    xmlns="https://schemas.microsoft.com/sharepoint/">    <ElementManifests>        <ElementManifest Location="elements.xml" />    </ElementManifests></Feature>
      2. Change [GUID] with a valid GUID. Something similar to 00000000-0000-0000-0000-000000000000. I would recommend you the guidgen tool from Visual Studio
    2. Create a file inside this folder called elements.xml with the folllowing content:
      1. <?xml version="1.0" encoding="utf-8"?><Elements xmlns="https://schemas.microsoft.com/sharepoint/">    <Module Name="mobile" Url="mob" Path="">        <File Url="default.aspx" />    </Module></Elements>
    3. Create a file inside this folder called default.aspx with the following content:
      1. <%@ Page Language="C#"   EnableViewState="false" inherits="Microsoft.SharePoint.MobileControls.SPMobilePage, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%> <%@ Assembly Name="Microsoft.SharePoint, Version=12.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=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><SPMobile:SPMobileForm RunAt="Server"> <SPMobile:SPMobileUrlRedirection Runat="Server" PageFileName=" [DestinationPage] " /></SPMobile:SPMobileForm>
      2. Change [DestinationPage] with your desired destination page
  2. Create a file at %PROGRAMFILES%\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\MOBILE with the [DestinationPage] name.Something similar to MyNewHomePage.aspx
  3. Install the feature running: stsadm -o installfeature -name SharePoint.Search.Extensions.MobileRedirect
  4. Activate through the command line or through the UI
    1. stsadm -o activatefeature -name SharePoint.Search.Extensions.MobileRedirect -url https://Server/sites/Site
    2. Browse to https://Server/sites/Site/_layouts/ManageFeatures.aspx and click Activate for our feature 
  5. Browse to https://Server/sites/Site/mob/ and check the new HomePage

This can be extended with some functionality/Improvements:

  • Include a custom control and admin page to change the [DestinationPage]
  • Add localization and custom images to the feature
  • Change the redirection mechanism to choose between 301 or 302 (permanent or temporary)
  • Improve feature deactivation
  • Of course, create a solution to deploy it

Finally, you can have different shortcuts changing the Url attribute of the Module node in the elements.xml file:

    <Module Name="mobile" Url="i" Path="">        <File Url="default.aspx" />    </Module>

For example: Create a new shortcut called /i/ to redirect to a IPhone version, for a customized collaborative scenario.

However, in the case of a publishing site you should implement variations to target different devices.

Bye!