Hands-On Lab

Creating a Mobile Web Part

Lab version:1.0.0

Last updated:11/14/2018

Contents

Overview

Exercise 1: Compile and Deploy a Custom Web Part

Task 1 – Beginning the Exercise

Task 2 – Preparing the Project for Deployment

Task 3 – Creating a Visual Web Part

Task 4 – Adding the Web Part to a SharePoint Page

Task 5 – Testing the Web Part

Exercise 2: Add a Mobile Adapter to the Web Part

Task 1 – Adding a Mobile Adapter Class

Task 2 – Adding a Feature Receiver to Update the Browser Compatibility File

Exercise 3: Test the Mobile Web Part

Task 1 – Testing the Web Part in the Browser

Summary

Overview

SharePoint can render content on pages in two ways, normal and mobile view. There may be cases when a custom Web part needs to render differently when viewed in a mobile browser. In the previous lab you saw how the compat.browser file can automatically change the render mode for Windows Phone 7 to redirect the user to the SharePoint Mobile View. In this lab you will create a SharePoint Web Part that changes the rendered content when viewed in a mobile browser. When the feature for the Web Part is activated your code will update the compat.browser file to create a mapping for the Mobile Adapter to change the rendering of the Web Part.

Objectives

In this hands-on lab, you will learn how to:

  • Add a mobile adapter to an existing Web part
  • Create a Feature Receiver that updates the compat.browser file to register the mobile control adapter
  • Test the two views of a mobile web part

Prerequisites

The following is required to complete this hands-on lab:

Note: See Setting Up A SharePoint and Windows Phone 7 Development Environment Module for instructions that describe how to set up the SharePoint and Windows Phone 7 developer machine.

  • Windows 7 x64 installed with all Windows Updates installed, in one of the following scenarios.

◦Installed on a physical machine

◦Installed on a bootable VHD

  • SharePoint 2010 installed on the Windows 7 x64 developer machine configured with a site collection that uses Forms Based Authentication (FBA).

Note: The following prerequisites are not included in the Setting Up A SharePoint and Windows Phone 7 Development Environment Module installation instructions. If you are using a development machine built according to the Setting Up A SharePoint and Windows Phone 7 Development Environment Module instructions you must install these components.

  • KB981002- WCF: Hotfix rollup in .NET 3.5 SP1 for Win 7 and Win 2k8 R2

◦

Exercise 1: Compile and Deploy a Custom Web Part

In this exercise, you will compile and deploy a custom visual Web Part. This is a fundamental skill for SharePoint developers. This Web Part will serve as the basis for the rest of the lab. In later exercises, you will add additional functionality to the Web Part to change the rendering for mobile browsers.

Task 1 – Beginning the Exercise

In this task, you will open the lab solution in Visual Studio 2010.

  1. Make sure that you have downloaded and installed the items listed in System Requirements above prior to beginning this exercise.
  2. Launch Visual Studio 2010 as administrator and open the lab project by selecting File » Open » Project.
  3. Browse to the WP7.SP.MobileWebPart.slnfile located at %TrainingKitPath%\Labs\CreatingMobileWebParts\Source\Before and select it.
  4. Click Open to open the solution.

Task 2 – Preparing the Project for Deployment

In this task, you will ensure that the deployment address for the project is correct.

  1. In the WP7.SP.MobileWebPart project click on the Project node in the Solution Explorer.
  2. In the Properties pane, set the Site Url property to the URL of your test site, for example .

Task 3 – Creating a Visual Web Part

In this task, you will create a visual Web part that will render text on the page. You will test the web part in normal and mobile browsing mode.

  1. In theWP7.SP.MobileWebPart project, in the MobileWebPart folder, open the MobileWebPartUserControl.ascxfile.
  2. Add the following code below the //TODO: 3.2.1 Comment:

ASP.Net

asp:Literal ID="Literal1" runat="server" Text="Hello from the mobile web part rendered in a regular browser."</asp:Literal

  1. Save the project and press F5 to run the project in debug mode. The browser should open to the address you configured in Task 2.

Task 4 – Adding the Web Part to a SharePoint Page

In this task, you will add the new custom Web Part to the home page of your site.

  1. In the browser, choose Site Actions | Edit Page.
  2. With the cursor at the top of the page, choose the Insert tab on the Editing ToolsRibbon menu.
  3. Choose Web Part from the Web Parts group.
  4. In the Web Part Categories section, choose Windows Phone 7.
  5. In the Web Parts section, select SharePoint Mobile Web Part.
  6. Ensure that the Add Web Part to: selector is set to Rich Content. Click Add. After a moment, the web part should appear on the page.
  7. On the Page tab click Save and Close.

Figure 1

The SharePoint Mobile Web part rendered on the page

Task 5 – Testing the Web Part

In this task, you will test the default behavior of Web Parts in mobile view.

  1. Notice the location of your Web Part on the page in the browser.
  2. In the browser address bar add the query string ?mobile=1 to change the site into mobile view. (For the site the full URL would be: )
  3. Notice in the mobile view the custom Web Part does not render in the user interface.

Figure 2

The mobile view of the site is missing the Web Part

Exercise 2: Add a Mobile Adapter to the Web Part

In this exercise, you will add a mobile adapter to the custom web part so you can control the rendering of your web part in both the standard browser and mobile browser. This powerful capability enables developers to manage the presentation of their content on different platforms.

Task 1 – Adding a Mobile Adapter Class

  1. In theWP7.SP.MobileWebPart project, in the Adapters folder, open the MobileWebPartMobileAdapter.cs file.
  2. After the //TODO: 3.2.2 comment insert the following method:

C#

protected override void CreateControlsForDetailView()

{

//Make this arrowhead a toggle switch on devices whose

//browsers support CSS and ECMAScript 1.0 or greater.

Image iconImage = this.CreateWebPartIcon(WebPartIconLink.LinkToSummaryView);

iconImage.BreakAfter = false;

this.Controls.Add(iconImage);

//Render the default title of the Web Part

Label titleLabel = this.CreateWebPartLabel();

this.Controls.Add(titleLabel);

LiteralTextlitHello = new LiteralText();

litHello.Text = "Hello World. This is the Mobile Device version of the SharePoint web part.";

this.Controls.Add(litHello);

}

The code above executes when the page renders in Mobile mode. This code displays an image next to the Title of the Web part. Clicking the image will display the Hello World content in the litHelloLiteralText control.

Task 2 – Adding a Feature Receiver to Update the Browser Compatibility File

  1. In theWP7.SP.MobileWebPart project, expand the Features folder until you can see the MobileWebPartFeature.EventReceiver.cs file. Open the MobileWebPartFeature.EventReceiver.cs file.
  2. After the //TODO: 3.2.3 comment add the following constants:

C#

string webPartFQN = "WP7.SP.MobileWebPart.MobileWebPart, WP7.SP.MobileWebPart,

Version=1.0.0.0, Culture=neutral, PublicKeyToken=1c80951372585dee";

string MobileAdapterFQN = "WP7.SP.MobileWebPart.MobileWebPartMobileAdapter,

WP7.SP.MobileWebPart, Version=1.0.0.0, Culture=neutral,

PublicKeyToken=1c80951372585dee";

  1. After the comment //TODO : 3.2.4 add the following Feature Activated method:

C#

public override void FeatureActivated(SPFeatureReceiverProperties properties)

{

// Add the Mobile Web Part Adapter to the compat.browser file

SPWebApplicationwebApp = null;

if (properties.Feature.Parent is SPSite)

{

SPSitespSite = properties.Feature.Parent as SPSite;

webApp = spSite.WebApplication;

}

else if (properties.Feature.Parent is SPWebApplication)

{

webApp = properties.Feature.Parent as SPWebApplication;

}

String pathToCompatBrowser = webApp.IisSettings[SPUrlZone.Default].Path

+ @"\App_Browsers\compat.browser";

XElementcompatBrowser = XElement.Load(pathToCompatBrowser);

// Get the node for the default browser.

XElementcontrolAdapters =

compatBrowser.XPathSelectElement("./browser[@refID =

\"default\"]/controlAdapters");

// Create and add the markup.

XElementnewAdapter = new XElement("adapter");

//Web Part FQN

newAdapter.SetAttributeValue("controlType", webPartFQN);

//Web Part Mobile Adapter FQN

newAdapter.SetAttributeValue("adapterType", MobileAdapterFQN);

controlAdapters.Add(newAdapter);

// Overwrite the old version of compat.browser with your new version.

compatBrowser.Save(pathToCompatBrowser);

}

The code above runs when the Feature is activated. It determines the IIS directory based on the SPWebApplication and then locates the compat.browser file associated with the Web Application. Using Linq and XPath the code inserts the necessary line into the file to register the mobile adapter for the Web Part, replacing the MobileWebPart class with the MobileWebPartMobileAdapter class.

  1. After the comment //TODO : 3.2.5 add the following Feature Deactivated method:

C#

public override void FeatureDeactivating(

SPFeatureReceiverProperties properties)

{

SPWebApplicationwebApp = null;

if (properties.Feature.Parent is SPSite)

{

SPSitespSite = properties.Feature.Parent as SPSite;

webApp = spSite.WebApplication;

}

else if (properties.Feature.Parent is SPWebApplication)

{

webApp = properties.Feature.Parent as SPWebApplication;

}

String pathToCompatBrowser = webApp.IisSettings[SPUrlZone.Default].Path

+ @"\App_Browsers\compat.browser";

XElementcompatBrowser = XElement.Load(pathToCompatBrowser);

// Get the node for the default browser.

XElementmobileAdapter =

compatBrowser.XPathSelectElement(

String.Format(

"./browser[@refID = \"default\"]/controlAdapters/adapter[@controlType =

\"{0}\"]",

webPartFQN)

);

//Delete the Mobile Adapter node

mobileAdapter.Remove();

// Overwrite the old version of compat.browser with your new version.

compatBrowser.Save(pathToCompatBrowser);

}

The Feature Deactivated method rolls back the changes to the compat.browser file made in the Feature Activated method.

  1. Open a command window and enter IISREST. This will clear the cache and ensure that later testing will proceed smoothly.
  2. Save all files and press F5 to compile and deploy the changes.

Exercise 3: Test the Mobile Web Part

In this exercise, you will test the mobile Web Part to ensure that it is rendering different views for each browser. You will notice that different functionality can be presented depending on the type of browser the user is using.

Task 1 – Testing the Web Part in the Browser

  1. With the browser open to your site, the Web Part should still be present on the test home page.

Figure 3

The custom web part rendered in a regular browse.

  1. Change the browser to Mobile view by adding ?mobile=1 to the query string. The page should refresh in mobile mode. The Web Part should be visible above the Welcome message as shown in Figure 4.

Figure 4

The custom mobile view of the web part

  1. Click the arrow image next to the Web part title and the Web Part will display the text from the mobile adapter.

Figure 5

The Mobile content displayed

  1. Close the browser to end the Visual Studio debugging session.

Summary

In this lab you explored the capabilities of Mobile Adapters and learned how to deploy configuration changes to the compat.browser file to change how SharePoint renders content in the mobile view of a Web site.

Page | 1