developing a silverlight 3.0 web part for sharepoint 2010

8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010

1/13

1950287311498 true 0 False

none 0xEEABC39037C

Brow se

Brow se false /w EPDw UBMA9k

THE COMPANY

eveloping a Silverlight 3.0 Web part for SharePoint 2010

s been a while since Ive been able to work with Silverlight . I did quite a bit of work about a year ago and blogged about my

periences (here is one of theposts). With SharePoint 2010 development from Silverlight gets much easier. Not only do we

ve all the Silverlight plumbing automatically in place on the web front end, but there is also a Silverlight web part wrapper

at we can use to to easily point to our .xap file.

ot only is it easier, its also much more powerful. In this article, I will walk through the Silverlight client object model, one of

e three client object models that Microsoft ships for SharePoint 2010.

e goal of this post is to demonstrate how this works by creating a simple Silverlight app that does a multiple-file check out.

is application will be written in Visual Studio 2010 which also has built-in project types for Silverlight.

e start by creating a new C# Silverlight project as shown here.

ter you name the project and click OK, youre prompted to create a web project to host it. Since this will be integrating

ectly with SharePoint, Ill not do this.
http://www.synergyonline.com/abouthttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=26http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=26http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=26http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_2_19A684E9.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=26http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/about


2/13


3/13

e prefix it with SP to avoid some object name conflicts. In the partial class for MainPage, lets create these class-level

riables.

class variables

.ClientContext context;

.Web myWeb;

.List myList;

.ListItemCollection myItems;

st files;

the LayoutRoot_Loaded method, lets initialize our client context. This will provide our entry point and become the object

ough which all calls to SharePoint are made. Heres the code.

ntext = SP.ClientContext.Current;

specifying the Current property, we are telling it to take the current SharePoint context. In other words, the web site in

hich this will be working. Since this will become a web part, we wont know what the Url is so we just have the client object

odel look it up. Its the same idea as SPContext if youve used that before. Next, lets make a reference to the web site via

s line of code.

Web = context.Web;

ou can think of this as acting like theSPWebobject in the server-side object model. And what youll start to see is that the

ent object model mimics many of the same behaviors that youve used in the server object model. Although, itsdefinitely a

bset of the commands, so do not expect a complete duplication.

ext, lets get a handle to a document library. In my demo web site, I have a library called Docs where I have loaded a number

files. Here is how I reference it.

Get handle to document library
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spweb.aspxhttp://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spweb.aspxhttp://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spweb.aspxhttp://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spweb.aspx


4/13

List = myWeb.Lists.GetByTitle("Docs");

etty close to the server object model. One difference that you are not referencing the list as a collection. Youll understand

hy in a minute. Before that, let me prepare a query to return all the files in the library. For this (just as you would have done

th the WSS/MOSS object model in the previous version), you can create a CAML query.

Get all files

.CamlQuery query = new SP.CamlQuery();

ery.ViewXml = "";

Items = myList.GetItems(query);

hile this is a very simply CAML query, some can be downright ugly. Ive found that it supports the same query capabilities

ch as ViewFields, Where, OrderBy, etc.

this point, let me make something clear. You you know, the client object model runs on the client, away from the server.

be efficient in its call backs to the server, the design is to batch operations to minimize the number of round trips. In this

se, none of the code Ive shown you so far has gone back to the server. This is the reason why I cannot reference the Docs

rary by doing something like myWeb.Lists[Docs] which would be how youd do it in the server object model.

batch these operations up, you can use the Load method on your client context object.

batch up work to do

ntext.Load(myList);

ntext.Load(myItems);

atch up the list object since I requested a handle to it, and I batch up myItems since I am issuing query on the list. However,

l at this point, a call hasnt been made. Thats done with the ExecuteQueryAsync method as you can see next.

execute

ntext.ExecuteQueryAsync(getRequestSucceeded, getRequestFailed);

this point, the call to the server is made and the batched requests are processed. If all goes well, the


5/13

tRequestSucceeded callback delegate is run. If an error occurs, the other one is called. In case youre wondering why I

dnt use a synchronous (or blocking) call, its because Silverlight requires all calls to be made asynchronously. This is

tually done on a separate thread to prevent the UI from ever locking up. Yes, its more complex, but results in a better user

perience. And, isnt that what Silverlight is all about? So, lets first look at the getRequestSucceeded method. Here is the

de:

ivate void getRequestSucceeded(object sender, SP.ClientRequestSucceededEventArgs e)

files = new List();

Dispatcher.BeginInvoke(() =>

{

//iterate through each file and add file to our list of files

foreach (SP.ListItem item in myItems)

{

files.Add (new File() {Filepath = item["FileRef"].ToString(),

Filename = item["FileLeafRef"].ToString()});

}

//bind to listbox

lstFiles.DisplayMemberPath = "Filename";

lstFiles.ItemsSource = files;

});

t me first clarify what this Dispatcher.BeginInvoke is. As I just mentioned, we are now running on a separate thread. Since

e want to process the results and bind them to our listbox, we must do this on the UI thread. The rule to remember: anytime

u want to change the UI, you must do it on the UI thread. Ok, so the syntax that were using simply goes to the dispatch er

ject (the thread that dispatched the currently-running thread), and runs the block of code as an anonymous function.

side the anonymous function, the code here should be pretty straightforward. We iterate through each item that came back

ing the foreach statement. We add these into a files object (which is a generic list). The FileRef column is the filepath to the

e relative from the web site (e.g. Docs/file1.doc). FileLeafRef is just the filename. From this point, we simply bind this to the


6/13

Files, my listbox object.

efore I go too much further, let me give you the File class that we use in our generic list. Just add this as a new class to your

de behind page.

/

/ Class to hold each file instance

/

blic class File

public string Filepath { get; set; }

public string Filename { get; set; }

ext, here is the code that is run if an error occurs.

ivate void checkOutRequestFailed(object sender, SP.ClientRequestFailedEventArgs e)


{

MessageBox.Show("Error occured: " + e.Message);

});

ats enough code to start testing. We still havent implemented the check out, but lets first see if our list of files is populated

rrectly.

you may already know, the compiled output for a Silverlight application is a .xap file, and this is what SharePoint needs

hen using the built-in Silverlight web part. So, somehow, we need to get this .xap file referenced in SharePoint. There are

s of options such as manually uploading into a document library, placing it into the 14 hive. However, this is a perfect

ample of where asandbox solutionwould work great. What Ill do is deploy this as a module-type feature and locate it within
http://msdn.microsoft.com/en-us/magazine/ee335711.aspxhttp://msdn.microsoft.com/en-us/magazine/ee335711.aspxhttp://msdn.microsoft.com/en-us/magazine/ee335711.aspxhttp://msdn.microsoft.com/en-us/magazine/ee335711.aspx


7/13

e root web of the web site where this feature is activated. Heres how you can do this.

d a new Empty SharePoint project to your current Visual Studio solution. When prompted, make it a sandbox solution which

ould be the default. For my demo, Ill also set the debug Url to the web site where my Docs library exists as you can see

re.

ck Finish and then a new item in this new project. Make it a module type as shown here.

ts do a little bit of clean up before we add our .xap file as a new file in this module. Start by removing the Sample.txt file.

is also automatically removes the entry from the elements manifest file (Elements.xml) for this Feature. This feature

e management is part of the new SharePoint tooling in Visual Studio 2010.

hat we now need to do is reference the .xap file from the Silverlight project as a file in this module. You can do this

anually, but theres a great automated way to do this. In the Visual Studio Solution Explorer, click the SilverlightModule node

hich was the name of the module I added). In the properties window, click the ellipsis button for the Project Output

eferences. In the dialog, add a new member and set the Project Name to point to the Silverlight project. Set the Deployment

pe to be Element File. This is shown here.
http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_12_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_10_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_12_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_10_4793D7A1.png


8/13

ck Ok to save. The final step is to simply add the entry into the elements manifest file (Elements.xml). Here is the

ntax showing the new line Ive added.

ere is what this means during deployment: the SLApp2.xap file (the filename of my compiled Silverlight application) will be

cated within the SilverlightModule folder within the WSP package. The Url is where in the web site this will be placed when

s feature is activated. Upon activation, SharePoint will copy the .xap file into the root folder of the web site. I could have

so stored this into a document library as a ghostable reference as well.

this point, I am going to do a full build of my projects. After this, I will select deploy as shown here.

is should package everything up and deploy it as a sandbox solution into SharePoint. It will then activate the feature in my

amsite web site (http://sp2010a/teamsite). At this point, I just need to go into a web page within this site and add the built-in

verlight web part. In case you havent seen this before, here is how it looks when adding.
http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_18_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_16_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_14_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_18_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_16_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_14_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_18_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_16_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_14_4793D7A1.png


9/13

ter you add it, it will prompt you for the Url to your .xap file. I will enter in /teamsite/SLApp2.xap which is the path relative

m the site collection to the Silverlight application. When all this is done, here is how it looks.

etty cool so far. Okay, actually it renders this way below with a messed up title. This, I assume is just a beta 2 bug. To

solve it, I just set the chrome type for the web part to None.

ts now go back to the Silverlight app and implement our final piece of logic to do the check out. Go to the design page
http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_24_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_22_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_20_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_24_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_22_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_20_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_24_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_22_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_20_4793D7A1.png


10/13

ainPage.xaml) and double click on the Check Out button to create an event handler. Here is the code I am using inside the

tton click event.

iterate through each file selected

reach (File item in lstFiles.SelectedItems)

//batch up file for checkout

SP.File f = myWeb.GetFileByServerRelativeUrl(item.Filepath);

f.CheckOut();

execute

ntext.ExecuteQueryAsync(checkOutRequestSucceeded, checkOutRequestFailed);

is should be easy to follow and very much like the server object model. The only difference is that I need to call the

ecuteQueryAsync again to actually call back to do the work. The final items are the two callback methods when check out

mpletes. Here they are.

ivate void checkOutRequestSucceeded(object sender, SP.ClientRequestSucceededEventArgs e)


{

MessageBox.Show("Files checked out");

});

ivate void checkOutRequestFailed(object sender, SP.ClientRequestFailedEventArgs e)


{

MessageBox.Show("Error occured: " + e.Message);

});


11/13

me to recompile and redeploy everything. When re-deploying new versions of Silverlight apps, you need to be careful that

e browser does not cache your old version of the application. Ive gotten in the habit of always dumping my browser cache,

d I would suggest you do the same. When thats done, refresh the page and test it out.

we select the Docs library, you can see that these two documents are indeed checked out.

you can see, performing functions like this are much easier than calling into or creating your own custom web service. You

ght be wondering what exactly the client object model is doing to perform this task. Well, actually, it is calling a web service.

this case, the client.svc WCF web service that is new in SharePoint 2010. For this example, it is posting a package of XML

the http://sp2010a/teamsite/_vti_bin/client.svc/ProcessQuery function. Here is the XML payload that it is sending.

Request AddExpandoFieldTypeSuffix="true" SchemaVersion="14.0.0.0"

braryVersion="14.0.4536.1000" ApplicationName="Silverlight Library"
http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_30_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_26_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_30_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_26_4793D7A1.png


12/13

mlns="http://schemas.microsoft.com/sharepoint/clientquery/2009">

/teamsite/Docs/Coal.docx

/teamsite/Docs/ElectricPower.docx

Request>

is example walked you through the client object for for Silverlight, but remember that there are two other client object

odels. One is for just regular .NET applications (Windows Forms, WPF, console, etc.) and another one is for JavaScript (i.e.

eb pages). The one for .NET is very similar to the one youve seen here since both are based on incarnations of the .NET

amework. The JavaScript one is conceptually similar, but its syntax is a bit different.


13/13

th that, Ill bring this article to a close. Hopefully you learned a thing or two about the client object model. I also hope youre

ger to go out and give it a test drive in your own applications. Have fun!

sted at 12/18/2009 8:51 AM bySystem Account | Category:Development|Permalink|Email this Post|Comments (0)

ommentsere are no comments yet for this post.

Items on this list require content approval. Your submission willnot appear in public views until approved by someone withproper rights.More information on content approval.

e*

y*

ted By*

/_layouts/images

e this page to add attachments to an item.

me

CLIENT LOGIN .CHANGE LOCALE . LIVE MEETING LOGIN .BLOG .PRIVACY POLICY
http://www.synergyonline.com/blog/blog-moss/_layouts/userdisp.aspx?ID=1073741823http://www.synergyonline.com/blog/blog-moss/_layouts/userdisp.aspx?ID=1073741823http://www.synergyonline.com/blog/blog-moss/Lists/Categories/Category.aspx?Name=Developmenthttp://www.synergyonline.com/blog/blog-moss/Lists/Categories/Category.aspx?Name=Developmenthttp://www.synergyonline.com/blog/blog-moss/Lists/Categories/Category.aspx?Name=Developmenthttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://navigatemailtolink%28%27mailto/?body=http://www.synergyonline.com/blog/blog-moss%2FLists%2FPosts%2FPost.aspx?ID%3D118%27)http://navigatemailtolink%28%27mailto/?body=http://www.synergyonline.com/blog/blog-moss%2FLists%2FPosts%2FPost.aspx?ID%3D118%27)http://navigatemailtolink%28%27mailto/?body=http://www.synergyonline.com/blog/blog-moss%2FLists%2FPosts%2FPost.aspx?ID%3D118%27)http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118#Commentshttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118#Commentshttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118#Commentshttp://helpwindowkey%28%22contentapproval%22%29/http://helpwindowkey%28%22contentapproval%22%29/http://helpwindowkey%28%22contentapproval%22%29/http://www.synergyonline.com/Pages/login.aspxhttp://www.synergyonline.com/Pages/locale.aspxhttps://www302.livemeeting.com/cc/synergy/joinhttp://www.synergyonline.com/Blog/Pages/Welcome.aspxhttp://www.synergyonline.com/About/Pages/privacy.aspxhttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/privacy.aspxhttp://www.synergyonline.com/Blog/Pages/Welcome.aspxhttps://www302.livemeeting.com/cc/synergy/joinhttp://www.synergyonline.com/Pages/locale.aspxhttp://www.synergyonline.com/Pages/login.aspxhttp://helpwindowkey%28%22contentapproval%22%29/http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118#Commentshttp://navigatemailtolink%28%27mailto/?body=http://www.synergyonline.com/blog/blog-moss%2FLists%2FPosts%2FPost.aspx?ID%3D118%27)http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/blog/blog-moss/Lists/Categories/Category.aspx?Name=Developmenthttp://www.synergyonline.com/blog/blog-moss/_layouts/userdisp.aspx?ID=1073741823

developing a silverlight 3.0 web part for sharepoint 2010

Documents