28
Hands-On Lab Accessing SharePoint Online List Data using SharePoint Web Services Lab version: 1.0 Last updated: 6/22/2022
Hands-On LabAccessing SharePoint Online List Data using SharePoint Web Services
Lab version: 1.0
Last updated: 5/25/2023
CONTENTS
OVERVIEW................................................................................................................................................. 3System Requirements..............................................................................................................................3
SETUP........................................................................................................................................................ 3Task 1 – Create SharePoint Site...........................................................................................................3
Task 2 – Create SharePoint Online Site................................................................................................4
Task 3 – Prepare Code Snippets...........................................................................................................4
Task 5 – Create Visual Studio Toolbox Snippets...................................................................................5
Task 5 – Upload Prerequisite Solution.................................................................................................6
Task 6 – Upload Prerequisite Solution to SharePoint Online...............................................................8
EXERCISE 1: CREATE A SILVERLIGHT APPLICATION THAT CALLS THE LISTS WEB SERVICE. .10Task 1 – Create a Silverlight application which calls ASMX web services...........................................10
EXERCISE 2: DEPLOYING THE SILVERLIGHT APPLICATION TO SHAREPOINT 2010.....................15Task 1 – Create the WSP to Deploy the Silverlight Application..........................................................15
Task 2 – Add a Module to Deploy a Custom ASPX Page to Host the Silverlight Web Part.................17
Task 3 – Build and Deploy the Project...............................................................................................19
EXERCISE 3: TEST THE SILVERLIGHT APPLICATION IN SHAREPOINT ONLINE.............................21Task 1 – Update Service Reference....................................................................................................21
Task 2 – Deploy the Lab Solution to SharePoint Online.....................................................................22
SUMMARY................................................................................................................................................ 24
Overview
Lab Time: 30 minutes
Lab Folder: C:\%Office365TrainingKit%\Labs\4.3
Lab Overview: SharePoint developers now have more ways to access SharePoint data than ever before. Client-side data access can be accomplished using the Client Object Model, REST interfaces and ASMX web services. Even with the new client-side data access techniques, SharePoint ASMX web services are still a viable method of accessing SharePoint data.
In the first half of this lab you will create a Silverlight application which will update an existing SharePoint list using the SharePoint Lists web service. In the second half of this lab, you will use a Visual Studio 2010 SharePoint project to deploy the Silverlight application to SharePoint Online.
System Requirements
You must have the following items to complete this lab:
SharePoint 2010
Visual Studio 2010
Visual Studio 2010 SharePoint Power Tools
Microsoft Silverlight 4 Tools for Visual Studio 2010
SharePoint Online
◦ Note: You will need administrator access to an SPO site collection to perform the steps in this lab.
Setup
Note: These setup instructions apply to all the labs in this unit; you don’t need to repeat these steps if you already performed them in the first lab in the unit.
Task 1 – Create SharePoint Site
In this task, you will create a sub site for this lab in your SharePoint on-premise site.
1. Navigate to your top-level SharePoint site, e.g., http://intranet.contoso.com.
2. From Site Actions, choose New Site.
3. Choose the Team Site template.
4. Enter Lab04 for the name of the site to create.
a. The site will be created at http://intranet.contoso.com/Lab04.
5. Click Create to create the site.
Task 2 – Create SharePoint Online Site
In this task, you will create a sub site for this lab in your SharePoint Online site. You can skip these steps if you have already performed them as part of the first lab in this unit.
1. Navigate to your top-level SharePoint Online site, e.g., https://contoso.sharepoint.com.
2. From Site Actions, choose New Site.
3. Choose the Team Site template.
4. Enter Lab04 for the name of the site to create.
a. The site will be created at https://contoso.sharepoint.com/Lab04.
5. Click Create to create the site.
Note: You have to be an administrator on your SharePoint Online website to perform the tasks in this lab, e.g., creating and publishing a SharePoint Designer workflow to the SharePoint Online site.
Task 3 – Prepare Code Snippets
This lab contains code snippets that you will use to complete the solution. You can either copy the snippets from the lab script itself or install the code snippets so that you can access them directly from Visual Studio.
1. Browse to C:\%Office365TrainingKit%\Assets\Code Snippets\CSharp.
2. Select all the files in this directory and copy them to your clipboard by pressing [Ctrl]+[a] and then [Ctrl]+[c].
3. Browse to ..\Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets
4. Press [Ctrl]+[v] to paste the code snippet files into this directory.
5. Browse to C:\%Office365TrainingKit%\Assets\Code Snippets\XML.
6. Select all the files in this directory and copy them to your clipboard by pressing [Ctrl]+[a] and then [Ctrl]+[c].
7. Browse to ..\Documents\Visual Studio 2010\Code Snippets\XML\My Xml Snippets.
8. Press [Ctrl]+[v] to paste the code snippet files into this directory.
9. In this lab, you can use Visual Studio 2010 user tasks created as //TODO comments to navigate to sections in the code where you will insert a code snippet.
10. After you open a project in Visual Studio 2010
11. From Visual Studio 2010, go to View >> Task List to open the Task List window.
12. Select Comments in the drop down list.
13. Pin the Task List window to the bottom of Visual Studio 2010
14. You will use the TODO comments in the Task List to navigate to locations in the code where you will add code snippets from the lab script.
Note: To reduce typing, you can right-click where you want to insert source code, select Insert Snippet, select My Code Snippets and then select the entry matching the current exercise step.
Task 5 – Create Visual Studio Toolbox Snippets
Some code snippets that are used in this lab can’t be formatted as Visual Studio snippets. Instead you will create them as text snippets in the Visual Studio Toolbox.
1. Open Visual Studio 2010.
2. Open the Toolbox.
3. Add a tab called Lab04.
4. Browse to C:\%Office365TrainingKit%\Assets\Code Snippets.
5. From Visual Studio, open Demo4_3_1.txt and select all its contents.
6. Drag the contents into the Lab04 tab.
7. Rename the item to 4.3.1.
8. From Visual Studio, open Demo4_3_6.txt and select all its contents.
9. Drag the contents into the Lab04 tab.
10. Rename the item to 4.3.6.
Task 5 – Upload Prerequisite Solution
In this task, you will prepare for the lab by uploading a solution that will create the list you need for the rest of the tasks in this lab. You can skip these steps if you have already performed them as part of the first lab in this unit.
1. Launch Internet Explorer and navigate to your SharePoint 2010 on-premise site.
2. Click Site Actions >> Site Settings.
3. Under Galleries, click on the Solutions link to view the site collection’s Solution Gallery.
4. Click on the Solutions tab in the ribbon to view the Upload Solution button.
5. Click the Upload Solution button.
6. Browse to C:\%Office365TrainingKit%\Labs\4.1\Source\After\BillableTime.Setup.wsp and click Open and OK.
7. In the Solution Gallery – Activate Solution dialog, click the Activate button on the Ribbon to activate the solution.
Note: Activating the solution will close the dialog automatically.
8. Navigate to the website you created for this session, e.g. http://intranet.contoso.com/Lab04.
9. Click Site Actions >> Site Settings, and select Manage site features.
10. Activate the BillableTime.Setup feature.
11. The Billable Time list should be visible in the Quick Launch.
12. Open the Billable Time list and check that it has six list items in it.
Task 6 – Upload Prerequisite Solution to SharePoint Online
In this task, you will prepare for the lab by uploading a solution that will create the list you need for the rest of the tasks in this lab. You can skip these steps if you have already performed them as part of the first lab in this unit.
1. Launch Internet Explorer and navigate to your SharePoint 2010 Online site.
2. Click Site Actions >> Site Settings.
3. Under Galleries, click on the Solutions link to view the site collection’s Solution Gallery.
4. Click on the Solutions tab in the ribbon to view the Upload Solution button.
5. Click the Upload Solution button.
6. Browse to C:\%Office365TrainingKit%\Labs\4.1\Source\After\BillableTime.Setup.wsp and click Open and OK.
7. In the Solution Gallery – Activate Solution dialog, click the Activate button on the Ribbon to activate the solution.
Note: Activating the solution will close the dialog automatically.
8. Navigate to the website you created for this session, e.g. https://contoso.sharepoint.com/Lab04.
9. Click Site Actions >> Site Settings, and select Manage site features.
10. Activate the BillableTime.Setup feature.
11. The Billable Time list should be visible in the Quick Launch.
12. Open the Billable Time list and check that it has six list items in it.
Exercise 1: Create a Silverlight Application that Calls the Lists Web Service
Task 1 – Create a Silverlight application which calls ASMX web services
In this task, you will create a Silverlight application which creates list items in an existing list using the SharePoint Lists web service.
1. Launch Visual Studio 2010 and open the lab project by selecting File >> Open >> Project.
2. Browse to the AddTimeEntryWS.sln file located at C:\%Office365TrainingKit%\Labs\4.3\Source\Before and open it.
3. Expand the AddTimeEntryWS project in the Solution Explorer open the MainPage.xaml file.
4. Replace all the markup in MainPage.xaml with the following:
(Toolbox code snippet 4.3.1)
XAML
<UserControl x:Class="AddTimeEntryWS.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White" > <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>
<sdk:Label Grid.Column="0" Grid.Row="2" Margin="5" Content="Task:"/> <ComboBox Name="ddlTask" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" Margin="5" > <ComboBox.Items > <ComboBoxItem Content="Create Intranet Portal"></ComboBoxItem> <ComboBoxItem Content="Manage Internet"></ComboBoxItem> <ComboBoxItem Content="SQL Server 2008 R2 Upgrade"></ComboBoxItem> <ComboBoxItem Content="Create Intranet Portal"></ComboBoxItem> <ComboBoxItem Content="Azure Training"></ComboBoxItem> <ComboBoxItem Content="Office 365 Training"></ComboBoxItem> </ComboBox.Items> </ComboBox>
<sdk:Label Grid.Column="0" Grid.Row="3" Margin="5" Content="Employee:" /> <ComboBox Name="ddlEmployee" Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="2" Margin="5" > <ComboBox.Items > <ComboBoxItem Content="Andrea Dunker"></ComboBoxItem> <ComboBoxItem Content="Lars Hansson"></ComboBoxItem>
<ComboBoxItem Content="Lukas Keller"></ComboBoxItem> <ComboBoxItem Content="Michael Lund"></ComboBoxItem> <ComboBoxItem Content="Neil Orint"></ComboBoxItem> <ComboBoxItem Content="Sanjay Patel"></ComboBoxItem> <ComboBoxItem Content="Scott Bishop"></ComboBoxItem> </ComboBox.Items> </ComboBox>
<sdk:Label Grid.Column="0" Grid.Row="4" Margin="5" Content="Date:" /> <sdk:DatePicker Name="dtWorkDate" Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="2" Margin="5" />
<sdk:Label Grid.Column="0" Grid.Row="5" Margin="5" Content="Hours:" /> <TextBox Name="txtHours" Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="2" Margin="5" />
<sdk:Label Grid.Column="0" Grid.Row="6" Margin="5" Content="Description:" /> <TextBox Name="txtDescription" Grid.Column="1" Grid.Row="6" Grid.ColumnSpan="2" Margin="5" />
<Button Name="btnSave" Grid.Column="1" Grid.Row="7" Margin="5" HorizontalAlignment="Stretch" Content="Save" Click="btnSave_Click" /> <Button Name="btnClear" Grid.Column="2" Grid.Row="7" Margin="5" HorizontalAlignment="Stretch" Content="Clear" Click="btnClear_Click" />
</Grid></UserControl>
5. Save MainPage.xaml.
When you open MainPage in Design view, it should look like the screenshot below:
6. Right-click the AddTimeEntryWS project and select Add Service Reference to add a service reference to the Lists.asmx service.
7. In Address, enter the Url of the Lists service in your current site, e.g. http://intranet.contoso.com/lab04/_vti_bin/lists.asmx, and click Go to retrieve the service information.
8. In the Namespace textbox enter SPListsWebService.
9. Click OK.
10. In the AddTimeEntryWS project, right-click on MainPage.xaml and select View Code and open its code behind.
11. Add the GetListServiceProxy method to the MainPage.xaml.cs file to return a proxy to the Lists web service (TODO 4.3.2).
C#
private ListsSoapClient GetListsServiceProxy(){ var proxy = new ListsSoapClient(); proxy.Endpoint.Address = new EndpointAddress (ClientContext.Current.Url + _listASMXUrl); return proxy;}
12. Right-click on the ListsSoapClient return type in the GetListsServiceProxy method and choose Resolve to include the appropriate using statement at the top of MainPage.xaml.cs.
13. Locate the Save method in MainPage.xaml.cs and add the following code to its body (TODO 4.3.3).
The Save method will retrieve a web service proxy, set up the asynchronous callback method and create the Xml with the batch update information. The method then calls UpdateListItemsAsync passing in the list name and batch information as parameters.
C#
ListsSoapClient proxy = GetListsServiceProxy();
proxy.UpdateListItemsCompleted += new EventHandler<UpdateListItemsCompletedEventArgs>(proxy_UpdateListItemsCompleted);
XElement batch = new XElement("Batch", new XAttribute("OnError", "Continue"), new XAttribute("ListVersion", 1),new XElement("Method", new XAttribute("ID", 1), new XAttribute("Cmd", "New"),new XElement("Field", new XAttribute("Name", "Hours"), txtHours.Text),new XElement("Field", new XAttribute("Name", "BillableDate"), dtWorkDate.SelectedDate.Value.ToString("yyyy-MM-dd")),new XElement("Field", new XAttribute("Name", "Task"), ddlTask.SelectionBoxItem),new XElement("Field", new XAttribute("Name", "Employee"), ddlEmployee.SelectionBoxItem),new XElement("Field", new XAttribute("Name", "BillableDescription"), txtDescription.Text)));
proxy.UpdateListItemsAsync("Billable Time", batch);
14. Locate the proxy_UpdateListItemsCompleted callback method and the following code to its body (TODO 4.3.4):
This method is called when the UpdateListItems method returns. This method will do a simple check for the results and display an appropriate message. A more complicated batch with multiple Method nodes would require a more complicated results check. Notice the method uses the Dispatcher object to invoke the method on the UI thread.
C#
if (e.Result.Value == "0x00000000"){
Deployment.Current.Dispatcher.BeginInvoke(() => { MessageBox.Show("Billable time updated successfully !"); ClearForm(); });}else{ Deployment.Current.Dispatcher.BeginInvoke(() => { MessageBox.Show("Error adding new billable time!"); });}
15. Right-click the AddTimeEntryWS project in the Solution Explorer window and select Build.
Exercise 2: Deploying the Silverlight Application to SharePoint 2010
Task 1 – Create the WSP to Deploy the Silverlight Application
In this task, you will add a SharePoint 2010 project to the solution in order to deploy the Silverlight application to SharePoint 2010.
1. In the Visual Studio 2010, click File >> Add >> New Project to create a new project.
2. In the Installed Templates section, select Visual C# >> SharePoint >> 2010 and choose Empty SharePoint Project.
3. In the Name: textbox, enter AddTimeEntry.
4. In the Location: textbox, enter C:\%Office365TrainingKit%\4.3\Source\Before and click OK.
5. In the SharePoint Customization Wizard, enter the URL of the site you created for this session, e.g. http://intranet.contoso.com/Lab04.
6. Select Deploy as a sandboxed solution and click Finish.
7. Right-click the AddTimeEntry project and choose Add >> New Item.
8. Select Visual C# >> SharePoint >> 2010 >> Module.
9. In the Add New Item dialog, under Name:, enter Silverlight and click Add.
10. Open the Elements.xml file included in the Silverlight module and replace its contents with the following Xml to include the AddTimeEntryWS project output in the AddTimeEntryWS project.
(Code snippet 4.3.5)
Xml
<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/"><Module Name="Silverlight" Url="SLXap">
<File Path="AddTimeEntryWS.xap" Url="AddTimeEntryWS.xap" Type="GhostableInLibrary"/></Module></Elements>
11. Right-click the Silverlight module and select Properties.
12. Click on Project Output References row and click the ellipse button to open the Project Output References dialog.
13. Click Add and select a new project output reference.
14. Under Members:, select the AddTimeEntry project.
15. Select the Project Name row in the right hand panel.
16. Select the Project Name dropdown under AddTimeEntry properties and select AddTimeEntryWS in the right panel.
17. Select ElementFile in the Deployment Type drop down list.
18. Expand the Deployment location row.
19. Delete the value in the Path row.
20. Click OK to exit the dialog.
21. Double-click the Elements.xml file under the Silverlight module.
22. Make sure the XML is exactly as it appears below:
XML
<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Module Name="Silverlight" Url ="SLXap"> <File Path="AddTimeEntryWS.xap" Url="AddTimeEntryWS.xap" Type="GhostableInLibrary"/> </Module></Elements>
23. Save the Elements.xml file.
Task 2 – Add a Module to Deploy a Custom ASPX Page to Host the Silverlight Web Part
In this task, you will create and add a module to deploy a custom ASPX page which includes a Silverlight Web Part configured to display the new Silverlight application.
1. Right-click the AddTimeEntry SharePoint project and choose Add >> New Item.
2. Select Visual C# >> SharePoint >> 2010 >> Module.
3. Name the module CustomPages.
4. Click Add.
5. Open the Elements.xml file included in the CustomPages module and replace the XML with the following:
(Toolbox code snippet 4.3.6)
Xml
<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="CustomPages" Url="SitePages"><File Url= "AddTimeEntryWS.aspx" Path ="CustomPages\
AddTimeEntryWS.aspx" Type ="Ghostable" ><Property Name="Title" Value="Silverlight
SharePoint Web Service to Enter Billable Time" /><Property Name="Description" Value="Silverlight
Web Part to create sub webs using a SharePoint Web Service" /><AllUsersWebPart WebPartOrder="1"
WebPartZoneID="Main" ID="AddTimeEntry"><
<property name="AllowHide" type="bool">True</property> <property name="Description" type="string">A web part to display a Silverlight application.</property> <property name="CatalogIconImageUrl" type="string" /> <property name="MinRuntimeVersion" type="string" null="true" /> <property name="ApplicationXml" type="string" /> <property name="AllowMinimize" type="bool">True</property> <property name="AllowZoneChange" type="bool">True</property> <property name="CustomInitParameters" type="string" null="true" /> <property name="Height" type="unit">400px</property> <property name="ChromeType" type="chrometype">Default</property> <property name="Width" type="unit">800px</property> <property name="Title" type="string">Silverlight Web Part</property> <property name="ChromeState" type="chromestate">Normal</property> <property name="TitleUrl" type="string" /> <property name="Url" type="string">~site/SLxap/AddTimeEntryWS.xap</property> <property name="WindowlessMode" type="bool">True</property> </properties> </data> </webPart> </webParts> ]]>
</AllUsersWebPart></File >
</Module></Elements>
6. Save the Elements.xml file.
7. To deploy the ASPX page used to host the Silverlight web part, right-click the CustomPages module, select Add >> Existing Item.
8. Browse to the C:\%Office365TrainingKit%\Labs\4.3\Source\After\AddTimeEntryWS.aspx file and click Add.
Task 3 – Build and Deploy the Project
In this task, you will test the deployment of the Silverlight application.
1. In the Solution Explorer window, right-click the AddTimeEntry project and choose Set as Startup Project.
2. Press F5 to build and deploy the project.
3. Navigate to <Site>/SitePages/AddTimeEntryWS.aspx, e.g., http://intranet.contoso.com/Lab04/SitePages/AddTimeEntryWS.aspx to view the custom page containing the Silverlight application.
4. Enter the following values in the Silverlight application:
◦ Task: Create Intranet Portal
◦ Employee: Neil Orint
◦ Date: Enter today’s date
◦ Hours: 2
◦ Description: Created site wireframe diagram.
5. Click Save.
A popup window will appear to let you know the time entry was saved.
6. Click OK.
7. Click the Billable Time link to view the list.
8. Verify the new entry is in the list.
9. Close Internet Explorer to stop debugging.
Exercise 3: Test the Silverlight Application in SharePoint Online
Task 1 – Update Service Reference
Before packaging up the solution and deploying it to SharePoint Online, you need to update the service reference to the SharePoint Lists web service and repackage the solution.
1. In the Solution Explorer window, open the AddTimeEntryWS project.
2. Expand the Service References node.
3. Right-click the SPListsWebService service reference, and select Configure Service Reference.
4. In the Address textbox, change the URL to the SharePoint Lists web service in the SharePoint Online site you created for this lab, e.g., https://contoso.sharepoint.com/Lab04/_vti_bin/lists.asmx.
Note: You might be prompted to authenticate to your SharePoint Online site. Enter the credentials that you use to access your SharePoint Online site.
5. Click OK to close the Service Reference Settings dialog.
6. Right-click the SPListsWebService service reference, and select Update Service Reference.
7. The reference to the SharePoint Lists web service will be updated to point to the web service in your SharePoint Online site.
Task 2 – Deploy the Lab Solution to SharePoint Online
In this task, you will deploy the solution package to SharePoint online to confirm that it works as expected.
1. In the Solution Explorer, right-click on AddTimeEntry and select Package to package the project.
2. Open Internet Explorer and navigate to your SharePoint Online site.
3. Click Site Actions and then select Site Settings.
4. Click the Solutions link in the Galleries section to view the site collection’s solution gallery.
5. Click on the Solutions tab in the ribbon and click the Upload Solution button.
6. Browse to C:\%Office365TrainingKit%\Source\Labs\4.3\Source\Before\AddTimeEntry\bin\Debug\AddTimeEntry.wsp and click Open.
7. Click the Activate button.
8. Browse to the site you created for this lab, e.g., https://contoso.sharepoint.com/Lab04.
9. Click Site Actions >> Site Settings and choose Manage Site Features.
10. Click the Activate button next to the AddTimeEntry Feature1 feature to activate the feature and deploy the Silverlight application and ASPX page.
11. Navigate to the <Site>/SitePages/AddTimeEntryWS.aspx to view the custom page with the Silverlight application.
12. Enter the following values in the Silverlight application:
◦ Task: Create Intranet Portal
◦ Employee: Neil Orint
◦ Date: Enter today’s date
◦ Hours: 2
◦ Description: Created site wireframe diagram.
13. Click Save.
A popup window will appear to let you know the time entry was saved.
14. Click OK.
15. Click the Billable Time link to view the list.
16. Verify that the new entry is in the list.
17. Close Internet Explorer.
Summary
Silverlight applications and SharePoint web services can be used to interact with SharePoint list data in SharePoint Online sites. In this lab, you learned how to create a Silverlight application which uses the SharePoint Lists web service to create an item in a SharePoint list, package it, and deploy it to a local SharePoint site.
