Hands-On LabUploading Images to SharePoint using Windows Phone 7

Lab version: 1.0.0

Last updated: 5/25/2023

Page | 1

CONTENTS

OVERVIEW................................................................................................................................................. 3

EXERCISE 1: CREATING A SHAREPOINT PICTURE LIBRARY DATA SOURCE..................................4Task 1 – Creating the Maintenance Pictures Library............................................................................4

EXERCISE 2: CREATING THE WINDOWS PHONE 7 APPLICATION.....................................................6Task 1 – Beginning the Exercise...........................................................................................................6

Task 2 – Configuring Constants in the Windows Phone 7 Application.................................................6

Task 3 – Adding a Reference to the SharePoint Lists.asmx Web Service.............................................6

Task 4 – Adding a Reference to the SharePoint Imaging.asmx Web Service.......................................7

Task 5 – Modifying the ServiceReferences.ClientConfig File to Support the Cookie Container Used With Forms Based Authentication.......................................................................................................7

Task 6 – Retrieving Maintenance Images from SharePoint.................................................................9

Task 7 – Uploading an Image to a SharePoint Picture Library............................................................11

Task 8 – Retrieving the Newly Uploaded File ID................................................................................12

Task 9 – Updating the Picture Metadata...........................................................................................13

EXERCISE 3: TESTING THE WINDOWS PHONE 7 APPLICATION.......................................................14Task 1 – Testing the Application in the Windows Phone 7 Eemulator...............................................14

SUMMARY................................................................................................................................................ 23

Page | 2

Overview

Windows Phone 7 applications can use SharePoint Web services to upload and view pictures in a picture library. Visual Studio 2010 provides a rich development environment for using SharePoint Web services to integrate images in a picture library with Windows Phone 7 applications.

Objectives

In this hands-on lab, you will learn how to use a SharePoint Web service to upload images to a SharePoint picture library from a Windows Phone 7 application. You will also learn how to view pictures in a picture library using the imaging Web service. Finally you will use the lists Web service to edit picture metadata.

Learn how to use the SharePoint imaging.asmx Web service to upload a picture from a Windows Phone 7 application.

Learn how to retrieve pictures from a SharePoint picture library and display them in a Windows Phone 7 application.

Learn how to update picture metadata using the SharePoint lists Web service.

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).

Windows Phone 7 Developer Tools

◦ http://download.microsoft.com/download/1/7/7/177D6AF8-17FA-40E7-AB53- 00B7CED31729/vm_web.exe

Windows Phone 7 Developer Tools - January 2011 Update

Page | 3

◦ http://download.microsoft.com/download/6/D/6/6D66958D-891B-4C0E-BC32- 2DFC41917B11/WindowsPhoneDeveloperResources_en-US_Patch1.msp

Windows Phone Developer Tools Fix

◦ http://download.microsoft.com/download/6/D/6/6D66958D-891B-4C0E-BC32- 2DFC41917B11/VS10-KB2486994-x86.exe

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

◦ http://code.msdn.microsoft.com/KB981002

Note: This lab uses the camera in the Windows Phone 7 emulator. The emulator’s camera simulates picture taking. The camera ability to simulate picture taking does not work on all computers.

Exercise 1: Creating a SharePoint picture library data source

In this exercise, you will create an empty SharePoint picture library. In this scenario, the Windows Phone 7 application will use the imaging Web service and the lists Web service to view and upload images to the picture library.

Task 1 – Creating the Maintenance Pictures Library

In this task, you will use the out of the box picture library template to create the maintenance pictures library.

1. Open Internet Explorer and navigate to the SharePoint Team Site configured for Forms Based Authentication.

example: http://fbawp7

2. Log into the site using site collection administrator credentials.

3. Click Site Actions and select More Options.

4. In the Filter By section, select Library.

Page | 4

5. Select Picture Library.

Figure 1Selecting a Picture Library template

Note: This lab uses the imaging Web service. This service only works with Picture libraries, it does not work with Asset Libraries.

6. In the Name textbox enter Maintenance Pictures.

7. Click Create.

8. Verify the Maintenance Pictures list is created.

Figure 2Maintenance Picture library without content

Page | 5

Exercise 2: Creating the Windows Phone 7 Application

In this exercise, you will create a Windows Phone 7 application to upload images from the phone to the SharePoint picture library created in Exercise 1.

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.

a. Browse to the WP7.AccAdv.Cam.sln file located at %TrainingKitPath%\Labs\UploadingImagestoSharePoint\Source\Before and select it.

b. Click Open to open the solution.

Task 2 – Configuring Constants in the Windows Phone 7 Application

In this task, you will configure the constants used in the Windows Phone 7 application to work with your development environment.

1. In the WP7.AccAdv.Cam project, in the Utilities folder, open the Constants.cs file.

2. Change the value for the USER_NAME and USER_PASSWORD constants to represent a Forms Based Authentication user specific to your development environment. For this lab, the user requires read and write permissions.

3. Change the value for the AUTHENTICATION_SERVICE_URL constant to the URL specific to your development environment.

The following code example demonstrates the value for a SharePoint server named fbawp7.

C#

public const string AUTHENTICATION_SERVICE_URL = "http://fbawp7/_vti_bin/authentication.asmx";

Task 3 – Adding a Reference to the SharePoint Lists.asmx Web Service

In this task, you will add a reference to the SharePoint lists.asmx Web service.Page | 6

1. In the Solution Explorer, in the WP7.AccAdv.Cam project, right click Service References and select Add Service Reference.

2. In the Address textbox enter the URL to the lists.asmx SharePoint Web service for the site where you created the Maintenance Pictures library.

Example: http://fbawp7/_vti_bin/lists.asmx

3. Click Go.

4. Once the service is resolved, enter ListService in the Namespace textbox.

5. Click OK.

Task 4 – Adding a Reference to the SharePoint Imaging.asmx Web Service

In this task, you will add a reference to the SharePoint imaging.asmx Web service.

1. In the Solution Explorer, in the WP7.AccAdv.Cam project, right click Service References and select Add Service Reference.

2. In the Address textbox enter the URL to the imaging.asmx SharePoint Web service for the site where you created the Maintenance Picture library.

Example: http://fbawp7/_vti_bin/imaging.asmx

3. Click Go.

4. Once the service is resolved, enter ImagingService in the Namespace textbox.

5. Click OK.

Task 5 – Modifying the ServiceReferences.ClientConfig File to Support the Cookie Container Used With Forms Based Authentication

In this task, you will modify the ServiceReferences.ClientConfig file to support the CookieContainer used with Forms BasedAuthentication. The code used to authenticate to the SharePoint server in this lab uses Forms Based Authentication. Forms Based Authentication requires the use of a CookieContainer. Please see the Security With SharePoint And Windows Phone 7 Applications Module for more information about Forms Based Authentication.

1. In the WP7.AccAdv.Cam project, open the ServiceReferences.ClientConfig file.

2. Locate the ListsSoap binding element.

3. Add the following attribute to the ListsSoap binding element.

XML

enableHttpCookieContainer="true"

4. Locate the ImagingSoap binding element.Page | 7

5. Add the following attribute to the ImagingSoap binding element.

XML

enableHttpCookieContainer="true"

The following screenshot shows what the ListSoap and ImagingSoap binding element looks like after the above code is added.

Figure 3Adding the enableHttpCookieContainer attribute

Note: The following exception will occur if you do not make this change to the ServiceReferences.ClientConfig file.

Page | 8

Figure 4Expected exception when modifying a service with the enableHttpCookieContainer attribute defined

Note: If you change the interface to one or both of the services the application calls and need to update the service reference you will need to remove the XML code above from the ServiceReferences.ClientConfig file then update the service reference. After the service reference update is complete, add the XML code back to the ServiceReferences.ClientConfig file.

Task 6 – Retrieving Maintenance Images from SharePoint

In this task, you will use the SharePoint imaging.asmx Web service to return maintenance images from the SharePoint list.

Note: This lab uses the Imaging Web service. This service only works with Picture libraries, it does not work with Asset Libraries.

1. In the WP7.AccAdv.Cam project, in the ViewModels folder, open the MainViewModel.cs file.

2. Add the following code under the //TODO: 5.2.1 comment to define the LoadPictures method:

C#Page | 9

public void LoadPictures(){ ImagingService.ImagingSoapClient imgSvc = new ImagingService.ImagingSoapClient(); imgSvc.CookieContainer = App.CookieJar; imgSvc.GetListItemsCompleted += new EventHandler<ImagingService.GetListItemsCompletedEventArgs> (imgSvc_GetListItemsCompleted); imgSvc.GetListItemsAsync(Constants.LIST_TITLE, "");}

The above code uses the proxy class Visual Studio 2010 generated for the imaging.asmx service to query the Maintenance Pictures SharePoint library.

3. Add the following code under the //TODO: 5.2.2 comment to define the imgSvc_GetListItemsCompleted method:

C#

void imgSvc_GetListItemsCompleted(object sender, ImagingService.GetListItemsCompletedEventArgs e){ IEnumerable<XElement> rows = e.Result.Descendants (XName.Get("row", "#RowsetSchema")); IEnumerable<SPPicture> images = from element in rows select new SPPicture { Title = (string)element.Attribute("ows_Title"), PictureUrl = (string)element. Attribute("ows_EncodedAbsUrl") };

Deployment.Current.Dispatcher.BeginInvoke(() => { if (Pictures == null) { Pictures = new ObservableCollection<SPPicture>(); } Pictures.Clear(); images.ToList().ForEach(a => Pictures.Add(a)); });}

Page | 10

The imgSvc_GetListItemsCompleted method fires when the call to the GetListItemsAsync method completes. The method parses the result set, creates an instance of the SPPicture class that represents each picture in the SharePoint library, and adds the SPPicture instances to the Pictures observable collection. The Pictures observable collection is bound to the MainPage user control in the Windows Phone 7 application. The MainPage user control displays the maintenance pictures retrieved from the SharePoint library.

4. Save MainViewModel.cs.

Task 7 – Uploading an Image to a SharePoint Picture Library

In this task, you will use the SharePoint imaging.asmx Web service to upload an image to the maintenance picture library created in Exercise 1.

Note: This lab uses the Imaging Web service. This service only works with Picture libraries, it does not work with Asset Libraries.

1. In the WP7.AccAdv.Cam project, in the ViewModels folder, open the PictureUploadViewModel.cs file.

2. Add the following code under the //TODO: 5.2.3 comment to define the SaveToLibary method:

C#

public void SaveToLibary(Action callback){ ImagingService.ImagingSoapClient imgSvc = new ImagingService.ImagingSoapClient(); imgSvc.CookieContainer = App.CookieJar; imgSvc.UploadCompleted += new EventHandler<ImagingService.UploadCompletedEventArgs> (imgSvc_UploadCompleted); imgSvc.UploadAsync(Constants.LIST_TITLE, "", this.DataModel.PictureBytes, this.DataModel.FileName, true, callback);}

The above code uses the proxy class Visual Studio 2010 generated for the imaging.asmx to upload the image. The image is uploaded as a byte array. The UploadAsync method passes a callback method as the last parameter. The callback method executes later at the end of the chain of method calls. The callback will navigate the application back to the main page after the chain of method calls complete.

3. Add the following code under the //TODO: 5.2.4 comment to define the imgSvc_UploadCompleted method:

Page | 11

C#

void imgSvc_UploadCompleted(object sender, ImagingService.UploadCompletedEventArgs e){ GetNewItemMetaData(this.dataModel.FileName, (Action)e.UserState);}

The imgSvc_UploadCompleted method executes after the picture upload completes. The imgSvc_UploadCompleted method’s UploadCompletedEventArgs parameter includes a return value consisting of an XML string with the last modified date and time for the uploaded file. It does not return a URL or ID of the newly uploaded file.

4. Save PictureUploadViewModel.cs

Task 8 – Retrieving the Newly Uploaded File ID

In this task, you will use the SharePoint imaging.asmx Web service to retrieve the ID of the file uploaded in Task 7.

1. In the WP7.AccAdv.Cam project, in the ViewModels folder, open the PictureUploadViewModel.cs file.

2. Add the following code under the //TODO: 5.2.5 comment to define the GetNewItemMetaData method:

C#

public void GetNewItemMetaData(string fileName, Action callback){ string[] fileNameList = new string[1]; fileNameList[0] = fileName;

ImagingService.ImagingSoapClient imgSvc = new ImagingService.ImagingSoapClient(); imgSvc.CookieContainer = App.CookieJar; ArrayOfString fileNameArray = new ArrayOfString(); fileNameArray.Add(fileName);

imgSvc.GetItemsXMLDataCompleted += new EventHandler<ImagingService.GetItemsXMLDataCompletedEventArgs> (imgSvc_GetItemsXMLDataCompleted); imgSvc.GetItemsXMLDataAsync(Constants.LIST_TITLE, "", fileNameArray, callback);}

The above code uses the proxy class Visual Studio 2010 generated for the imaging.asmx to retrieve a list of files from the picture library.

Page | 12

3. Add the following code under the //TODO: 5.2.6 comment to define the imgSvc_GetItemsXMLDataCompleted method

C#

void imgSvc_GetItemsXMLDataCompleted(object sender, ImagingService.GetItemsXMLDataCompletedEventArgs e){ string ns = "http://schemas.microsoft.com/sharepoint/soap/ois/"; IEnumerable<XElement> items = e.Result.Descendants(XName.Get("item", ns));

var i = from element in items select (string)element.Attribute("ID");

UpdateImageById(Constants.LIST_TITLE, i.First(), (Action)e.UserState);}

The imgSvc_GetItemsXMLDataCompleted method executes after the GetItemsXMLDataAsync method returns. This method uses LINQ to parse the results for the ID attribute of the picture uploaded in Task 7. This method calls the UpdateImageById method and passes in the ID attribute.

4. Save PictureUploadViewModel.cs

Task 9 – Updating the Picture Metadata

In this task, you will use the SharePoint lists.asmx Web service to update picture metadata.

1. In the WP7.AccAdv.Cam project, in the ViewModels folder, open the PictureUploadViewModel.cs file.

2. Add the following code under the //TODO: 5.2.7 comment to define the UpdateImageById method:

C#

void UpdateImageById(string listName, string id, Action callback){ XElement batch = new XElement("Batch", new XAttribute("OnError", "Continue"), new XAttribute("ListVersion", "1"), new XAttribute("ViewName", ""), new XElement("Method", new XAttribute("ID", "1"), new XAttribute("Cmd", "Update"), new XElement("Field", id, new XAttribute("Name",

Page | 13

"ID")), new XElement("Field", this.dataModel.Title, new XAttribute("Name", "Title")) ));

ListsSoapClient lists = new ListsSoapClient(); lists.CookieContainer = App.CookieJar; lists.UpdateListItemsCompleted += new EventHandler<UpdateListItemsCompletedEventArgs> (lists_UpdateListItemsCompleted); lists.UpdateListItemsAsync(listName, batch, callback);}

The above code uses the proxy class Visual Studio 2010 generated for the lists.asmx Web service to update the picture metadata. The UpdateListItemsAsync method accepts a string of XML that contains one or more batch operations.

3. Add the following code under the //TODO: 5.2.8 comment to define the lists_UpdateListItemsCompleted method:

C#

void lists_UpdateListItemsCompleted(object sender, UpdateListItemsCompletedEventArgs e){ Deployment.Current.Dispatcher.BeginInvoke(() => { ((Action)e.UserState).DynamicInvoke(); });}

The lists_UpdateListItemsCompleted method executes after the UpdateListItemsAsync method completes. At this point, the picture is successfully uploaded and its metadata is set. The lists_UpdateListItemsCompleted method executes the callback that has travelled along the chain of asynchronous calls. The callback is a pointer to code that navigates the application to the main page.

4. Save PictureUploadViewModel.cs

Exercise 3: Testing the Windows Phone 7 Application

Page | 14

In this exercise, you will test the Windows Phone 7 application.

Task 1 – Testing the Application in the Windows Phone 7 Eemulator

In this task, you will test the Windows Phone 7 application using the Windows Phone 7 emulator.

1. In the WP7.AccAdv.Cam solution, select Windows Phone 7 Emulator in the deployment location dropdown list.

2. In the WP7.AccAdv.Cam project, press F5.

3. The Windows Phone application starts in the emulator and displays the items from the Maintenance Pictures SharePoint library. Initially there will be no pictures displayed until you save a picture into the library.

Page | 15

Figure 5No pictures to display from the library

4. Click on the camera icon to take a picture.

Page | 16

Note: This lab uses the camera in the Windows Phone 7 emulator. The emulator’s camera simulates picture taking. The camera ability to simulate picture taking does not work on all computers.

Figure 6

Page | 17

Camera Icon in the Windows Phone 7 emulator

The Windows Phone 7 emulator cannot take real pictures. The emulator will flash a black background with a white box that travels around edge of the screen. After a quick flash of a white box in the emulator, the camera will display only a black screen with camera controls

5. Click the shutter icon located in the top-right corner of the emulator to take a picture. The white box reappears when the emulator snaps a picture.

Page | 18

Figure 7Emulator has taken a pretend picture

6. Click accept.

Page | 19

7. Enter a FileName with a file extension of .jpg.

Example: BrokenCoffeeMachine.jpg

8. Enter a Title

Example: Broken Coffee Machine

Page | 20

Figure 8Entering picture metadata

9. Click the Save icon located below the Comment textbox.

Page | 21

Figure 9Picture retrieved from SharePoint library

10. Open Internet Explorer and navigate to the maintenance picture library

Page | 22

11. Verify the image exists in the picture library.

Figure 10Viewing the picture from the SharePoint library

Summary

In this hands-on lab, you saw how to use the Imaging Web service to retrieve and display images from a SharePoint picture library in a Windows Phone 7 application. You learned how to use the imaging and lists Web services to upload a picture to a picture library and modify the picture’s metadata.

Page | 23