Sharepoint & Silverlight 1.0 Integration

Today i wana blog how we can integrate sharepoint and silverlight1.0.

Microsoft® Silverlight is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of media experiences and rich interactive applications for the Web.

I learned silverlight offline in weekends and after office hours its cool and easy. I used the tool called Micrsoft Blend and visual studio 2008 for making silverlight project.

If you want to give a try start from here :http://www.silverlight.net/quickstarts/silverlight10/default.aspx

Now i am going to say how to integrate silverlight 1.0 with our sharepoint.

The experience sharing with you here is practically implemented in our project , got succeded and client Appreciations also so you can trust me before going through this :) .

Little introduction of our Homepage in the Sharepoint portal where i implemented silverlight.
we have Home page for our portal Where it contains Links to several portal pages these links are images and we have a background image for our Homepage.Our portal Home page displays links based on the roles of the enduser.
Here is our home page. You can see the links in red circle. You can observe the background image also a girl with umbrella. And two more images microsoft logo and Project Title "ArtCore".

Why i choose Silverlight?
I choosed silverlight to give rich webinterface with some animations and media effects as well as to make Zero dependency on development and testing team.

What I mean of Zero dependency is ?
After implementing My silver light with sharepoint end user who is having admin rights can change any picture on the screen with out help of developer in few minutes.

So lets give a try how i implemented ?

Assuming we have silverlight 1.0 project the main files in the silverlight project is Default_html.js,Page.xaml,Page.xaml.js.

if you observe the files here silverlight is got rendered by using the last two files 1)page.xaml contains the information how to render and wat to render and 2)Page.xaml.js file contains the events to be fired on the page.

So to integrate the silverlight with our sharepoint first we need to check the place of deployment for our files.

There are 2 ways of deployment one is in the pages directory(Library) of the sharepoint site and the other is Layouts folder of the sharepoint.

I went with Layouts folder as we can easily deploy the files with our solution package,we can easily deploy our .aspx page in different portal and availiability of asset(silverlight images and media) files is also easy when we deploy to different sitecollection.

Built a Custom master page using sharepoint designer and create a minimal master page.

you can find this in msdn :http://msdn2.microsoft.com/en-us/library/aa660698.aspx

Built a .aspx page in sharepoint designer and inherit the master page created in the above one.

And add the following tags after the contentplace holder tag:
script type="text/javascript" src="Silverlight.js" / script
script type="text/javascript" src="Default_html.js"/script
script type="text/javascript" src="Page.xaml.js" /script

Give the source of the files to layout folder.

ex: src="..\layouts\foldername\page.xaml.js"

and modify the source according to all asset files in the page.xaml.
After the script tags add one more script tag which calls the method createSilverlight()


div id="silverlightControlHost"> scrit type="text/javascript">div id="silverlightControlHost"> script type="text/javascript"> createSilverlight(); script /div

This is the method written in the default_html.js where we set the source in the above script tags.
And we have to call the script in a div tag where silverlight content is rendered in this div tag.
And after this you can find the silverlight rendering in the sharepoint page.

And the balance is how to change the background image,links.

Here is the solution for that if we move main image from layouts folder to page directory in the site now we can upload our required image with the samename mentioned in the page.xaml so the enduser who is having admin rights can easily upload the required background image on the page.

Here is the page after changing the homepage background image:

The final thing which makes interesting part how to play with links which is having links based on roles right.

Here is the solution for that sharepoint is having outofbox webpart called summary webpart.

Overlay that webpart on the silverlight page by using div tag.

For this you have to create a webpart zone in the .aspx page if you are starting with blank page like me.

And the roles part can be handled by the webpart propertie called Target audience.

where you have to create respective webpart for every type of audience.

Note: you can make the links as image click by uploading the required images to image library of the site and browsing them in summary link webpart.

The things are done from my side now you can give a try.



Cheers best of luck :).