DotNetCurry Logo

Silverlight Integration with SharePoint 2010 – Part I

Posted by: Pravinkumar Dabade , on 4/22/2011, in Category SharePoint
Views: 62124
Abstract: In this article, we will see how Silverlight can be used in SharePoint 2010. We will see how to use display media files in SharePoint 2010 using ‘Media Web Part’. We will then also explore how to use existing or newly created Silverlight applications in SharePoint 2010, using the ‘Silverlight Web Part.

In this article, we will see how Silverlight can be used in SharePoint 2010. This article is Part I of Silverlight Integration with SharePoint 2010  where we will see how to use different Web Parts of Silverlight in SharePoint.

Update: Part 2 of this article can be read here Read SharePoint 2010 List in Silverlight using REST – Silverlight with SharePoint 2010 - Part II

The first step is to create a SharePoint site using ‘Team Site’ template. The steps remain the same as shown in my previous article, SharePoint Dashboard with Common Filters using PerformancePoint Services 2010 Now after you have created a SharePoint site with ‘Team Site’ template, let’s add a special library called ‘Asset Library’. This library is used to store video files.

The First step is – Go To ‘Site Action’ menu and click on ‘View All Site Content’ menu as shown below –

View All Site Content

This will show you all the available contents in the site. Click on ‘Create’ link button as shown below –

Create Link 

This brings up a ‘Create’ dialog box. One thing to notice here is if you right click the ‘Create’ dialog box, it will show that it is a Silverlight Window. Now, click on ‘Library’ group and make a choice of ‘Asset Library’. Name the library as ‘Discovery Videos’ and click ‘Create’ button as shown below –

 Asset Library

 Now we have created a library, let’s add a couple of videos in that library. I am adding three videos to the library as shown below –

 clip_image005

Now if you mouse hover on any of the video file, it will show you a dialog box. By using this dialog box you can – 1) Play the Video. 2) View the Item. 3) View its properties. 4) Edit its properties.

Click on ‘Play’ and it will start a Silverlight Media player where you can view your video as shown below –

 Silverlight Video

Anyways, this is not an objective of our demo. Let’s go to the home page on our SharePoint site. Now click on the ‘Edit’ button as shown below –

clip_image007 

Once we edit the page, go to ‘Insert’ tab and click on the ‘Web Part’ button as shown below –

 sharepoint webpart

You will see the available web parts list for our Team site. From the web parts categories, choose ‘Media and Content’. You will observe that web part ‘Media Web Part’ is not in the list to the right, as shown below –

 sharepoint webpart list

For getting the ‘Media Web Part’, we will have to first activate a feature called ‘SharePoint Server Publishing Infrastructure’. To activate this feature go to ‘Site Action’ menu and click on ‘Site Settings’. From the site settings page make a choice of ‘Site Collection Features’ from the group ‘Site Collection Administration’ as shown below –

 site collection administration

This will list out all the features of Site collection. From that list, find a feature called ‘SharePoint Server Publishing Infrastructure’. If you observe below, by default it is not activated. So click on the ‘Activate’ button and the feature will now be activated as shown below –

 SharePoint Server Publishing Infrastructure

 Now let’s get back to our home page. Click on ‘Edit’ button as shown above and choose ‘Media and Content’ group and now you will see a ‘Media Web Part’ as shown below –

 Media Web part

So let’s insert ‘Media Web Part’ on our page. This will show a link ‘Click here to Configure’. Once you click on the Media web part, it shows you the different options for the Media web part as shown below –

Media Web part 

If you observe, there are a few properties which can be changed easily. For example – 1) We can change the web part title. 2) We can change the size. 3) Start media automatically. But for this demonstration, we need to focus on an important property called ‘Change Media’. We will browse the media file from our ‘Asset Library’ which we created a short while ago. So let’s click on ‘Change Media’ and ‘From SharePoint’ as shown above. This will show you a dialog box to select an asset. Choose ‘Discovery Videos’ library and choose a video and click the ‘OK’ button as shown below –

Sharepoint select an asset 

Click on the ‘Save’ button, as we have made changes in the web page. Now play your video.

SharePoint Silverlight 

This is a very simple demonstration of using a ‘Media Web Part’. Please note that SharePoint 2010 uses Silverlight 3.0.  

Silverlight Web Part in SharePoint 2010

Now let’s have a look at ‘Silverlight Web Part’ in SharePoint 2010. First of all, you need to create a Silverlight application. If you already have a Silverlight application, you can use the same for this demonstration. I have already created a simple Silverlight application which displays data in a Datagrid. When you click the Datagrid row, it plays a small nice 3D animation using plane projection and displays the DataGrid row data in a chart format. Here is an image of my application –

 Silverlight 3D

If you want to download the code for the above demonstration, please visit DevCurry.com and check the article – Silverlight 3D using Plane Projection.

Now we will show this application in our SharePoint Silverlight web part. For this you can upload a ‘.XAP’ file to the SharePoint site or you can keep your ‘.XAP’ file under the SharePoint folder in the following path– C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin

For this demonstration, I will create a ‘Document Library’ and will upload my ‘.XAP’ file to the same. The steps will remain the same as shown above at the beginning of this article (while creating an ‘Asset Library’). I will name this library as ‘Silverlight Storage’. Once you create a library, browse your ‘.XAP’ file and add it in the library as shown below –

Sharepoint XAP Library 

Now if you don’t want this library to be displayed in ‘Left Navigation Pane’, click on ‘Library Settings’ and choose ‘Title, Description and Navigation’ from the ‘General Settings’ group. Now select the ‘No’ option from ‘Display this document library on the Quick Launch’ as shown below –

clip_image019 

Let’s go back to our Home page and click on the ‘Edit’ button as described in the above steps. Now click on ‘Insert’ tab and Web Parts button as described in above steps. Now from the ‘Media and Contents’ group, choose ‘Silverlight Web Part’ and click on ‘Add’ button as shown below –

clip_image020 

This will ask you for an URL for your ‘XAP’ file. Set the URL of ‘XAP’ file from the document library in which we have uploaded our ‘XAP’ file. Here’s a sample url – http://localhost:21068/Silverlight%20Storage/SLDataGridExample.xap You can get this URL by right clicking your .XAP file from the library and click on ‘Copy Shortcut’. Once you are done with setting the URL, click the OK button. If you want to change the Height and Width of the web part, edit the web part. Now save your changes and you will see your Silverlight application in our SharePoint Site, as shown below –

Silverlight Sharepoint webpart 

Summary – In this article, we have saw how to use display media files in SharePoint 2010 using ‘Media Web Part’. We have also seen how to use existing or newly created Silverlight applications in SharePoint 2010, using the ‘Silverlight Web Part’.

Update: Part 2 of this article can be read here Read SharePoint 2010 List in Silverlight using REST – Silverlight with SharePoint 2010 - Part II

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
Author
Pravinkumar, works as a freelance trainer and consultant on Microsoft Technologies. He is having over 10 years of experience in IT and is also a Microsoft Certified Trainer(MCT). He has conducted various corporate trainings on all versions of .NET Technologies including .NET, SharePoint Server, Microsoft SQL Server, Silverlight, ASP.NET, Microsoft PerformancePoint Server 2007 (Monitoring). He is passionate about learning new technologies from Microsoft. You can contact Pravinkumar at dabade[dot]pravinkumar [attherate] gmail[dot]com


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by khani on Tuesday, January 10, 2012 7:04 AM
thank . write professional article plz
Comment posted by cvcvcvcvc on Wednesday, April 18, 2012 7:41 AM
fvvcvcv
Comment posted by Sivasankar on Monday, October 22, 2012 10:24 PM
Nice one Pravin