In the last section, we learned how to customize the view for a list item on a mobile device. This works well for the list item, but what about the entire home page? We could follow the same instructions to customize the home page. All we would have to do is change the ID for the SharePoint:RenderingTemplate to reflect that of the site we are working with. For example, the following screenshot shows a customized home page (yes, we have used the Webdings font):
The following is the code that changed the title:
<%@ 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" %> <SharePoint:RenderingTemplate runat="server" ID="WebPartMobile_1_HomePage_Title"> <Template> <SPMobile:SPMobilePaddedPanel runat="server" ForeColor="#FFFFFF" BackColor="#009933" Font-Bold="true" Font-Size="13pt" Font-Names="Webdings"> <WPMobile:WebPartMobilePageTitle RunAt="server" /> </SPMobile:SPMobilePaddedPanel> </Template> </SharePoint:RenderingTemplate>
This is almost the same as what we had before. We've changed the ID of the rendering template to target site ID type 1, which is a Blank Site. We could have also used STS instead of ID 1. That would have made the rendering template's ID WebPartMobile_STS_HomePage_Title.
Besides that, we've also added a new tag prefix for SharePoint Web Part Pages, WPMobile. This tag is used for the page title element in the template<WPMobile:WebPartMobilePageTitle runat="server" />.
Again, there's nothing here that's too different from what we did in the previous section. However, what if we wanted something completely different here? What if our designers came to us and asked for something that just isn't possible with the templates as they are right now? That is where the redirection system comes into play.
Carry out the following steps to add in a mobile home page redirect:
- Create a new empty SharePoint project by right clicking on the Chapter04 solution and select Add | New Project.
- On the New Project dialog, select SharePoint | 2010 and then select Empty SharePoint Project.
- Name the new project
HomePageRedirect. - Create a mapped folder to {SharePointRoot}/TEMPLATE/LAYOUTS/MOBILE. This can be accomplished by right clicking on the project name and selecting Add | SharePoint Mapped Folder and navigating the tree to the Mobile folder.
- Right click on this new folder in Solution Explorer and create a blank ASPX page by selecting Add | New Item and then in the Add New Item dialog, select Visual C# | Web | HTML Page.
- Name the page
CustomHomePage.aspx. Notice that we are using the ASPX file extension instead of the HTML extension. This is so we get a nice cleanASP.NETfile without the hooks that Visual Studio would put into a SharePoint Application Page. - Add the following HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Custom Home page</title> <meta name="viewport" content="width=480px" /> </head> <body> <h1>Hello World from my custom home page!</h1> </body> </html>
- Next, add a mapped folder to {SharePointRoot}/TEMPLATE/CONTROLTEMPLATES. This can be accomplished by right clicking on the project name and selecting Add | SharePoint Mapped Folder and navigating the tree to the CONTROLTEMPLATES folder.
- Right click on this folder and select Add | New Item
- Select a User Control from the Add New Item dialog and name it
Mobile_1_HomePage.ascx. - In this file, add the following code:
<%@ Control Language="C#"%> <%@ Assembly Name="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ 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" %> <SharePoint:RenderingTemplate runat="server" ID="WebPartMobile_1_HomePage_Title"> <Template> <SPMobile:SPMobileHomePageRedirection runat="server" PageFileName="CustomHomePage.aspx" /> </Template> </SharePoint:RenderingTemplate>
- Save all files and select the Deploy option from the Build menu.
- Load the home page on your Windows Phone and it should look like the following screenshot:
This is a very simple home page, but since we only used HTML, we can begin to see the power associated with building custom home page experiences.
The interesting part of this code is in step 11. Notice the difference highlighted in the code. This template has a home page redirection in it. This is what tells SharePoint to stop rendering the current page and instead restart on the value of the PageFileName attribute. In this case, the PageFileName attribute is CustomHomePage.aspx. This custom home page is very simple, as it only has a single line of text output for the user. However, from within this page, we have access to the full context and power of SharePoint.