Tuesday, July 13, 2010

Silverlight in SharePoint Option 1 - CEWP

This simple tutorial will illustrate how to embed a Silverlight application (.xap file) in SharePoint (WSS 3 or MOSS 2007) using a Content Editor web part.

Many thanks to my friend Hassan-Mia Salie for his contributions.

Prerequisites:
   Silverlight 3.0 Client
   SharePoint (WSS3 or MOSS)
   A Working Silverlight application (.xap file)
   (to see how to create a simple silverlight app check out this tutorial)

Lets Go:
Locate the web application folder of your SharePoint application.
Should be: C:\inetpub\wwwroot\wss\VirtualDirectories\1000\ ,where "1000" is the number of your SharePoint Web App IIS port.

Create a new “ClientBin” folder in the web application folder.










Open you SharePoint Web which exist within the same web application.

Edit a Page and add a CEWP.
Select to modify the shared web part and open the “Source Editor...”
Paste the following code.
(please note the name of your silverlight file - the file I used was called MySilverLightApp.xap.)

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/MySilverLightApp.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>

Change the width and height from % to values.

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="400" height="400">
<param name="source" value="ClientBin/MySilverLightApp.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
</object>

Save the CEWP and refresh the page.... you will see you Silverlight app in SharePoint.
















Enjoy !!

0 comments:

Post a Comment