In this exercise you will add code to the Silverlight application to query a SharePoint List and display the data on the Map. We will use the Store Location List that we created in Exercise 1.
- Add a Map.Children element into your existing Map element in your MainPage.xaml file.
Add three MapLayer elements into your newly created Map.Children element, respective to Polygons, Pushpins and Pop-up.
Note: Your Map.Children Element should now appear look like this
<m:Map x:Name="MainMap" CredentialsProvider="<Your Bing Maps Key>"
FakePre-fb12171adf9b4766aca7c51834a260ce-bd916fd171b94506ac8cc923892c855aFakePre-42204f3fa89a466797bfa8a4c98c7b19-02aa879cb6a84831a3cc1e996c5b4610FakePre-0806d86debda4e31b7fff45a4fb97718-45436c6994cf47c3b06bd3b40fab8288FakePre-c683de5a0af849808d6550b342494f19-3cc8fd28eea5496db08446c49224d84dFakePre-cfc288590ece405689c1da8739a7cb75-acc7c49b2dee42d88959e9fa3ddb01d5FakePre-67d55005a913487ca9ba3d42ccde1cc3-4c3a168f424c4d5aa08bacb03d08c3ddFakePre-e970cbda3d0c4f39bf442935cc3f39f2-248d7235368d465694c723812f698d8bFakePre-a788af8f15f94daabcf2a4bcbd1ee00e-41419806e24e4aca9d87b6d76049d540FakePre-bc95584d68d24454905316d8341dd542-9a375aa9e3144df38eaacad1bd121368FakePre-392318c619e74fcfac5c7d4544418309-e661ba8c6f604c26a3ac1e5cd809c4ffFakePre-2031b843a4a64f98856bf223b8eb2ceb-73e134dff0f645b3804b51d403dd0b49FakePre-5e6dcf318a71450eb2d81e341acb59bb-601e4c767d0047648e6f1c0e349955daFakePre-7d3eab6e740a4bd9ae2d60bd3d1ef472-c97f47979aef45a29fcb607c5e21bd59FakePre-6939f1bcb1be4e1eb8d03deb6eaabacf-fc97369c4d4c472aa3b54610c43392e3FakePre-878992503215468a97655f369d4350cd-4d6c86762ef2480a970540f27b0e28deFakePre-e9db4904fb8343ad940947d278e9cbe0-29cd9bdcd5bd4d058578dd888f074bcaFakePre-0fea44a5df804312831ed228a9b1d98a-782201433b204a1e9e70df1f93ce597eFakePre-00a47ee731c64de0a59fdc735d263706-3f77ce420ae74cc6bded0aa00eab5c38
- Add the following references (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin\) to the Silverlight project
- Microsoft.Sharepoint.Client.Silverlight.dll
- Microsoft.Sharepoint.Client.Silverlight.Runtime.dll.
Open the MainPage.xaml.cs code-behind file and add following namespaces to the top.
using Microsoft.SharePoint.Client;
- The next task is to query SharePoint List “Store Locations” and fetch data.
Add a new class in MainPage.xaml.cs for store details called StoreDetails. You’ll also need to add a using statement for the Location object (using Microsoft.Maps.MapControl) at the top of the new class.
public class StoreDetails { public Location StoreLocation { get; set; } public string StoreName { get; set; } public string StoreAddress { get; set; } public string StorePhone { get; set; } public string StoreHours { get; set; } }
In the MainPage Class, Create an event handler to handle page load event in the constructor of MainPage.xaml.cs
public MainPage() { InitializeComponent(); this.Loaded += new RoutedEventHandler(MainPage_Loaded); } private void MainPage_Loaded(object sender, RoutedEventArgs e) { }
Declare a list in the MainPage class just before constructor. This will store the Store details fetched from the SharePoint list. Also create ClientContext and Web objects to access the current context of SharePoint environment within which the Silverlight module will run as a web part.
ClientContext clientContext = null; Web web = null; List<StoreDetails> storeDetailsList = new List<StoreDetails>(); IEnumerable<ListItem> bcsStoreList;
On the MainPage_Loaded event, call a function named GetListsDataFromSharePoint() to query SharePoint List
private void MainPage_Loaded(object sender, RoutedEventArgs e) { GetListsDataFromSharePoint(); }
Add the following functions in sequence
private void GetListsDataFromSharePoint() { GetSPListData(); }
The following function gets the List Data
private void GetSPListData() { using (clientContext = new ClientContext("https://your_site_url")) { web = clientContext.Web; clientContext.Load(web); var bcsListFromAzure = web.Lists.GetByTitle("Store Locations"); CamlQuery query1 = new CamlQuery(); IQueryable<ListItem> bcsListItems = bcsListFromAzure.GetItems(query1); bcsStoreList = clientContext.LoadQuery(bcsListItems); clientContext.ExecuteQueryAsync(OnStoresRequestSucceeded, OnRequestFailed); } }
The following events handle the succeeded/Failed instances of the call to SharePoint list
private void OnStoresRequestSucceeded(object sender, ClientRequestSucceededEventArgs e) { Dispatcher.BeginInvoke(FillStoreList); } private void OnRequestFailed(object sender, ClientRequestFailedEventArgs e) { Dispatcher.BeginInvoke(() => { MessageBox.Show("Error: " + e.Message); }); }
The following function fills the store list into a collection
private void FillStoreList() { storeDetailsList.Clear(); foreach (var x in bcsStoreList) { StoreDetails objStoreDetails = new StoreDetails(); objStoreDetails.StoreName = x.FieldValues.ElementAt(3).Value.ToString(); objStoreDetails.StoreAddress = x.FieldValues.ElementAt(4).Value.ToString(); objStoreDetails.StorePhone = x.FieldValues.ElementAt(5).Value.ToString(); objStoreDetails.StoreHours = x.FieldValues.ElementAt(8).Value.ToString(); objStoreDetails.StoreLocation = new Location(Convert.ToDouble(x.FieldValues.ElementAt(6).Value.ToString()), Convert.ToDouble(x.FieldValues.ElementAt(7).Value.ToString())); storeDetailsList.Add(objStoreDetails); } AddStoresToMap(); }
Note the function AddStoresToMap() in the previous step inside FillStoreList(). The Add stores to Map() plots these store locations on the Map. Implement this function as follows
private void AddStoresToMap() { Pushpins.Children.Clear(); for (int i = 0; i < storeDetailsList.Count; i++) { string description = "Store: " + storeDetailsList[i].StoreName + "\nAddress: " + storeDetailsList[i].StoreAddress + "\nPhone: " + storeDetailsList[i].StorePhone + "\nHours: " + storeDetailsList[i].StoreHours; CreatePushpin(storeDetailsList[i].StoreLocation, description); } }
private void CreatePushpin(Location location, string description) { Pushpin pushpin = new Pushpin(); pushpin.Width = 7; pushpin.Height = 10; pushpin.Tag = description; pushpin.Location = location; Pushpins.AddChild(pushpin, location, PositionOrigin.Center); pushpin.MouseEnter += new MouseEventHandler(Shape_MouseEnter); pushpin.MouseLeave += new MouseEventHandler(Shape_MouseLeave); }
private void Shape_MouseEnter(object sender, MouseEventArgs e) { if (sender.ToString() == "Microsoft.Maps.MapControl.Pushpin") { Pushpin content = sender as Pushpin; Canvas.SetZIndex(content, 500); ContentPopupText.Text = content.Name; ContentPopupDescription.Text = content.Tag.ToString(); } else { MapPolygon content = sender as MapPolygon; Canvas.SetZIndex(content, 500); ContentPopupText.Text = "Polygon ID: " + content.Name; ContentPopupDescription.Text = content.Tag.ToString(); } Point point = e.GetPosition(MainMap); Location location = MainMap.ViewportPointToLocation(point); MapLayer.SetPosition(ContentPopup, location); MapLayer.SetPositionOffset(ContentPopup, new Point(25, -50)); ContentPopup.Visibility = Visibility.Visible; } private void Shape_MouseLeave(object sender, MouseEventArgs e) { UIElement content = sender as UIElement; Canvas.SetZIndex(content, 100); ContentPopup.Visibility = Visibility.Collapsed; }
Build the Solution. When you try to run this solution, you should see a runtime error. This is an expected outcome
Why does the application fail to run?
This Silverlight control is built to run within the context of SharePoint. As one can observe, the code tries to pick-up the current context and tries to resolve it to a SharePoint Web. However, at this time this code is not running inside SharePoint. This is the reason for the error. In the next steps we shall try and deploy the XAP file as a SharePoint web part.
Figure 22
GetListData method
- Right-click on SharePoint2010HOL project and click Properties tab and note the Build output path
- Clean the Solution (Right Click on Solution Name -> Clean) and rebuild it to generate new .xap file. The SharePoint2010HOL.xap file will be created in the ClientBin Folder of SharePoint2010HOL.Web project.
Launch the browser and Open your SharePoint site.
Uploading the Silverlight Control to a list/library:Use an already existing library “Shared Documents”for uploading the Silverlight Control. Click on Shared Documents from the left navigation bar
Figure 24
Left Navigation Bar
Once you are in the “Shared Documents” library, Select “Upload Document” from the ribbon menu
Browse for the Silverlight control (SharePoint2010HOL.xap) from your local machine, and click OK button to upload the file
Figure 26
Upload Document dialog
Your file should now appear in the Shared Documents document library.
Figure 27
Shared Documents library
Create a new Page to host the Silverlight webpart. To do so, Select “More Options” from “Site Actions” Menu.
Figure 28
Site Actions menu
Select “Page” from the list of available types, and Choose Web Part Page. Click the “Create” button
- In the following Page, provide/select the following information:
- Name: SharePoint2010-BingMaps
- Layout: Header, Footer, 3 Columns
Save Location: Site Pages
Click “Create”. This will create a web part page for hosting the Silverlight web part.
The created page will open in Edit Mode now. Click on Add a Web Part in the Header WebPart Zone.
From the Available Categories, Choose “Media and Content” and for the type of web part choose “Silverlight Web Part.” Click Add
Now the Web Part is successfully added. You need to set the path to the Silverlight Control. To do so, in the following pop-up window, provide the path to SharePoint2010HOL.xap file that we uploaded to the Shared Documents folder. You can either use relative path or absolute path to the SharePoint2010HOL.xap file. In this case use absolute path
Figure 32
Silverlight Web Part menu
Click OK, and browse to the webpage hosting the Silverlight Control. If you are prompted for Displaying mixed content, click “Yes.”
Figure 33
Display mixed content dialog
The Silverlight web part should be successfully added now.
Figure 34
Added Silverlight Web Part
To resize the web part, Click on the drop down icon on the top right corner of the web-part. Select Edit Web Part.
Figure 35
Silverlight Web Part
Change the height and width as needed. You can set other properties too as needed.
Figure 36
Web Part Properties pane
The Bing Maps Silverlight Web Part has been successfully created and deployed to SharePoint 2010 site. The Pushpins represent the Store Locations fetched from the SharePoint List. Move your mouse over the pushpins. The pop-up box should display the Store information corresponding to the Store