Exercise 2: Create a Silverlight Map Field Control

In this exercise, you will compile and deploy a custom SharePoint Field Control. This field control will accept address information as an input and plot the information on a Silverlight Bing map. In later exercises, you will add additional functionality to the field control to ensure that clients that do not support Silverlight can still view a map.

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.MobileFieldControl.sln file located at %TrainingKitPath%\Labs\CreateaMobileFieldControls\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.MobileFieldControl 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 https://fbawp7.

Task 3 – Applying the Bing Maps Application Key to the Project

In this task, you will copy the application key to the project. A valid application key is required to make use of the Bing Maps service.

1. In the WP7.SP.MobileFieldControl solution, expand the AddressMap project and open the App.xaml file.
2. Locate the line below the comment <!-- TODO: 3.3.1 and paste your Application ID into the ApplicationId attribute replacing the ADD_YOUR_API_KEY text.
3. Right click on the AddressMap.Web project and click Set as StartUp Project.

4. Press F5 to run the project and test the Bing Map. If the API registration worked correctly you should see the following Map:

   Figure 2

   The demo Bing Map Silverlight application

   Note:

   If you receive the error “Unable to contact Server”, check your internet connection. If you receive the error “Invalid Credentials”, check your Bing Maps API key.

5. Close the browser and return to Visual Studio.

Task 4 – Creating a SharePoint Field Control

In this task, you will create a SharePoint Field Control that will render a Map on the page.

1. In the WP7.SP.MobileFieldControl solution, right click the WP7.SP.MobileFieldControl project. Choose Set as StartUp Project.
2. Expand the XML folder and open the fldtypes_WP7MobileFieldTypes.xml file.

3. Locate the <!-- TODO: 3.3.2 comment and paste the following code immediately after the comment.

   XML

   <FieldType> <Field Name="TypeName">WP7Address</Field> <Field Name="ParentType">MultiColumn</Field> <Field Name="TypeDisplayName">WP7 Address</Field> <Field Name="TypeShortDescription">WP7 Address</Field> <Field Name="UserCreatable">TRUE</Field> <Field Name="ShowInListCreate">TRUE</Field> <Field Name="ShowInDocumentLibraryCreate">FALSE</Field> <Field Name="ShowInSurveyCreate">FALSE</Field> <Field Name="ShowInColumnTemplateCreate">TRUE</Field> <Field Name="FieldTypeClass">WP7.SP.MobileFieldControl.FieldTypes.WP7Address,WP7.SP.MobileFieldControl, Version=1.0.0.0, Culture=neutral, PublicKeyToken=dc9594baa84d303a</Field> </FieldType>

   The XML above defines the properties for a new SharePoint field called WP7Address. This definition is how SharePoint defines how a field type behaves in the user interface.

   Note:

   the FieldTypeClass reference must be on one line. Do not beak the line before the closing tag.

4. Expand the FieldTypes folder and open the WP7Address.cs file.

5. Locate the comment //TODO: 3.3.3 and insert the following code

   C#

   txtStreet = (TextBox)this.TemplateContainer.FindControl("txtStreet"); txtCity = (TextBox)this.TemplateContainer.FindControl("txtCity"); txtState = (TextBox)this.TemplateContainer.FindControl("txtState"); txtZipcode = (TextBox)this.TemplateContainer.FindControl("txtZipcode"); txtLatitude = (TextBox)this.TemplateContainer.FindControl("txtLatitude"); txtLongitude = (TextBox)this.TemplateContainer.FindControl("txtLongitude"); //The address in display mode litAddress = (Literal)this.TemplateContainer.FindControl("litAddress"); if (this.ControlMode == SPControlMode.Display) { // Assign current value from database to the literal control SPFieldMultiColumnValue field = (SPFieldMultiColumnValue)this.ItemFieldValue; litAddress.Text = String.Format("{0}, {1}, {2} {3}",field[0], field[1], field[2], field[3]); //TODO: 3.3.5 Add the Silverlight rendering }

   The code above locates the controls in the associated User Control and constructs a string of the address for display on the page. The formatting is set to standard North American address format.

6. Expand the CONTROLTEMPLATES folder and open the WP7.Address.ascx file.

7. Insert the following code after the <%-- TODO: 3.3.4 comment:

   ASP.Net

   <SharePoint:RenderingTemplate ID="WP7AddressEditTemplate" runat="server"> <Template> <table class="ms-authoringcontrols" > <tr> <td>Street:</td> <td><asp:TextBox ID="txtStreet" runat="server" Width="350px" /></td> </tr> <tr> <td>City:</td> <td><asp:TextBox ID="txtCity" runat="server" Width="350px" /></td> </tr> <tr> <td>State:</td> <td><asp:TextBox ID="txtState" runat="server" MaxLength="2" Width="60px" /></td> </tr> <tr> <td>Zipcode:</td> <td><asp:TextBox ID="txtZipcode" runat="server" MaxLength="10" Width="120px" /></td> </tr> <tr> <td>Latitude:</td> <td><asp:TextBox ID="txtLatitude" runat="server" MaxLength="10" Width="120px" /></td> </tr> <tr> <td>Longitude:</td> <td><asp:TextBox ID="txtLongitude" runat="server" MaxLength="10" Width="120px" /></td> </tr> </table> </Template> </SharePoint:RenderingTemplate> <SharePoint:RenderingTemplate ID="WP7AddressDisplayTemplate" runat="server"> <Template> <address> <asp:Literal ID="litAddress" runat="server" /> </address> </Template> </SharePoint:RenderingTemplate>

   The code above creates two rendering templates for use by the field control. The control uses the first template in Edit mode, the second is used in View mode. The connection to these templates is made in code by overriding the DefaultTemplateName and DisplayTemplateName properties.

8. Press F5 to run the project. Leave the browser open for the next task.

Task 5 – Creating a List with Containing the Custom Field

In this task, you will add the Field to a list and test the field.

1. In the browser session opened in the previous task. Choose Site Actions | View All Site Content.
2. On the All Site Content page, choose Create.
3. In the Create dialog, choose Custom List.
4. Provide a Name for the list of FieldControlTest. Click Create.
5. Once the list is created, on the List Tools | List tab, in the Settings section choose List Settings.
6. On the List Settings page, in the Columns section click Create column.
7. On the Create Column page, enter a Column name of Address. Choose the Column Type of WP7 Address.
8. Click OK.

Task 6 – Adding an Item to the List

In this task, you will add a new list item to the list and test the functionality of the field control.

1. Click the FieldControlTest link located in the left hand quick links to view the empty list.
2. Click Add new item to create a new list item. The New Item dialog will appear with the Edit mode rendering for the fields defined in the project.
   Note:

   Error: Note format was corrupted. Title should be bold.
3. Create a test entry with the following properties:
   1. Title: My Test Record
   2. Street: 1 Microsoft Way
   3. City: Redmond
   4. State: WA
   5. Zipcode: 98052
   6. Latitude: 47.6820536
   7. Longitude: -122.12104

4. The completed dialog should look like Figure 3.

   Figure 3

   The completed custom field control

5. Click Save.

6. Test the View rendering by clicking the My Test Record text and viewing the record. It should appear as in Figure 4.

   Figure 4

   The view mode rendering of the field control

7. Click Close.
8. Close the browser to end the debugging session and return to Visual Studio.

Task 7 – Adding the Silverlight Rendering to the Field Control

In this task, you will add the code necessary to render the Bing Maps view of the address.

1. In the WP7.SP.MobileFieldControl project, expand the FieldTypes folder and open the WP7Address.cs file.

2. Locate the comment //TODO: 3.3.5 and insert the following code after the comment;

   C#

   //Get the source URL for the site string sourceUrl = SPContext.Current.Site.Url + "/ClientBin/AddressMap.xap"; //Create the Silverlight container and apply the // parameters to render the location litAddress.Text = String.Format(silverlightContainer, 400, 300, sourceUrl, String.Format("latitude={0},longitude={1},zoomlevel=5,mode=aerial", field[4], field[5]), String.Format("{0}, {1}, {2} {3}", field[0],field[1],field[2],field[3]));

   The code above creates a standard Silverlight object tag and then replaces the necessary parameters like Source (the location of the XAP file) and Latitude and Longitude with values from the Field control you created previously.

3. Press F5 to deploy and test the project. In the left navigation, click FieldControlTest to view your list.

4. Click the My Test Record item to view the field control with Silverlight rendering the location. The item should look like Figure 5.

   Figure 5

   The custom field control rendering Silverlight

5. Click Close, to close the dialog. Do not close the browser.

Task 8 – Testing the Control with the Windows Phone Emulator

In this task, you will test the custom control with the Windows Phone Emulator.

1. With project still running in debug mode and the browser open, start the Windows Phone 7 emulator.
2. Click Internet Explorer.
3. Click the ellipsis button and choose Settings.
4. On the Settings page, choose Desktop version. This will ensure that Internet Explorer runs in desktop mode for testing purposes.
5. Click the Back button to return to Internet Explorer.
6. Browse to the project site address (https://fbawp7). Complete the login and view the site in Internet Explorer.
7. On the site, choose the FieldControlTest list from the left navigation. (If you double click the left edge of the screen, it will zoom to view the menu more easily.

8. On the list view for the FieldControlTest list click the My Test Record item to view the item in the browser. Notice that the Silverlight control does not render, but there is a clickable address at the bottom of the control.

   Figure 6

   Silverlight does not render in the Windows Phone browser

9. Click the link for the address
10. Click allow.
    Figure6.5

    Accept security prompt

11. Windows Phone will open a Map to that address.

    Figure 7

    Windows Phone Map location based on the address

12. Close the Emulator and close the Browser to return to Visual Studio.