Exercise 3: Interacting with SharePoint

This exercise adds the code to the Silverlight project to have it interact with SharePoint.

Task 1 – Retrieving Silverlight Parameters

In this task, you will see how to retrieve parameters passed to Silverlight and add the code to use them to customize the Silverlight UI.

1. If the browser is still open from Exercise 2, close it
2. In Visual Studio 2010, open the file App.xaml.cs from Solution Explorer
3. Look at the code already in the starter project in the Application_Startup method. Notice the use of e.InitParams to retrieve the initiation parameters.

4. Position you cursor on line 65 and add the following code:

   C#

   this.RootVisual = new MainPage(valueControlId, siteUrl, listId, minimum, maximum, step, itemId, fieldName, value);

5. This code uses the parameters passed into Silverlight from the hosting user control to create a new instance of the MainPage object

Task 2 – Creating the Silverlight Application

1. In this task, you will
2. Open the file MainPage.xaml.cs from Solution Explorer

3. Position your cursor on line 46 and enter the following code:

   C#

   ClientContext ctx = new ClientContext(siteUrl); list = ctx.Web.Lists.GetById(new Guid(listId)); ctx.Load(list); item = list.GetItemById(itemId); ctx.Load(item); ctx.ExecuteQueryAsync(OnReadSuccess, OnFailure);

   This code uses the values passed in as parameters and some Silverlight client object model code to retrieve the SPListItem being displayed in the current form.

4. Position your cursor on line 58 and enter the following code:

   C#

   Dispatcher.BeginInvoke(() => { object newValueObj = null; double newValue; newValueObj = item[this.fieldName]; if (null == newValueObj) { SetToMinValue(); } else { double.TryParse(newValueObj.ToString(), out newValue); if (newValue < this.MinValue || newValue > this.MaxValue) { newValue = this.MinValue; } SelectedValue = Convert.ToInt32(newValue); SetNewValue(); this.SliderBlock.Visibility = System.Windows.Visibility.Visible; } });

   This code runs on the background thread, so we need to make use of an anonymous delegate and Dispatcher.BeginInvoke since it needs to interact with the UI. It attempts to retrieve the value of the corresponding field in the current list item. If the value can’t be retrieved for some reason, the control will be configured to display the minimum value allowed (set from the custom property in Exercise 1, step 9). Otherwise, it makes sure the current value is legal, setting it to the minimum value if not, and sets the control to display the current value and shows the slider block.

5. Position your cursor on line 86 and enter the following code:

   C#

   SetToMinValue();

   This code will be called if the ExecuteQueryAsync call from either step 2 or step 3 returns a failure – due to there not being a current item (step 2) or the item not having a value in the slider field (step 3). In either event, the control will be configured to display the minimum value.

6. Position your cursor on line 89 and enter the following code:

   C#

   private void SetValueInHiddenControl() { string valuestring = this.SelectedValue.ToString(CultureInfo.InvariantCulture); HtmlElement element = HtmlPage.Document.GetElementById(valueControlId); if (element != null) { element.SetAttribute("value", valuestring); } }

   This code is called whenever the value displayed in the Silverlight control is changed. It finds the hidden HTML field that was added to the user control in Exercise 2 step 3, and uses the HTML Bridge to set its value to the same value as the Silverlight control. This makes sure that the value will be stored back in SharePoint properly when the form is saved.

7. Take a few minutes to examine the code in the starter project in the code regions – Slider properties and Slider methods. For the most part, these members are involved with calculating and positioning the slider block appropriately, but there is some interesting code that is worth investigating.

   That concludes the coding for this exercise. Right-click on the Silverlight.XAML.SliderControl.Slider project in Solution Explorer and select Rebuild from the context menu:

   Figure 10

   Rebuild project

   This will refresh the XAP file with our code changes and copy the XAP file to the LAYOUTS/ SLSliderField folder in the SLSliderField project.

8. Right-click on the SLSliderField project in Solution Explorer and select Deploy from the context menu.

   Figure 11

   Deploy SLSliderField

   This will rebuild the deployment package to make sure it includes the updated XAP file and then deploy the solution to SharePoint.

9. Once Visual Studio has deployed the solution, navigate to https://intranet.contoso.com/sites/advanced/Lists/Announcements/AllItems.aspx.
10. Depending on how your browser is configured, it may be necessary to clear the browser cache so that the new XAP file is downloaded and used. Go ahead and clear the cache now.

11. Click the Add new announcement link to test out the new field. Your screen should look like this:

    Figure 12

    Slider1 Field

    The Silverlight control shows up on the list as before, but now includes the slider block to indicate the value in the field. Notice that it is set to the configured minimum. Change the slider to a new value and enter that same value in the Title field. Click Save.

12. You will be returned to the default view of the Announcements list with the new item added:

    Figure 13

    New item added to Announcements List

13. Select Edit Item from the ECB menu of the new item to load the edit form:

    Figure 14

    Slider1 Field

14. Notice that the slider shows the value you set previously.

Exercise 3 Verification

In order to verify that you have correctly performed all steps of Exercise 3, proceed as follows:

Verification 1

In this verification, you can compare the anticipated output shown in steps 10, 11 and 12 with the actual output shown on your screen. If your screen shows a similar view, you have completed the exercise successfully.