Friday, October 26, 2007

Silverlight 1.1 As A Sharepoint Web Part

Recently I did a project where I had to embed a Silverlight web part into sharepoint. You would think this is easy if you haven't done web parts before. At least thats what I thought. Granted I have done web parts but it always surprises how much jumping around I had todo. I found what worked best for me was to create the 1.1 project as a silverlight based server control in a web site that ran all the bits and then to install that in the same domain as the sharepoint server. At first I tried to make the web part duplicate what the server control did but for some reason Sharepoint would make it render is such a way that the silverlight ended up hidden... I tried a few things but decided to use an iframe. This way the web part only outputs a iframe pointed at the controls default page that loads the silverlight interface. Works like a charm too. :) That sounds good but the steps ended up being something like this:

Silverlight Site Configuration

1. Copy the Silverlight Website folder to Server Location.
2. Open IIS Manager (Start-> All Programs -> Administrative Tools -> Internet Information Services (IIS) Manager)
3. Open Server Node (local Computer)
4. Open ‘Web Sites’ node.
5. Open Default running web site node
6. Right Click web site node and select New -> Virtual Directory
7. When the Virtual Directory Creation Wizard comes up click next
8. Enter the correct Alias ‘[some name]’
9. Click ‘Next’
10. Click ‘Browse’ and find the physical location of the site directory by drilling down in the ‘Browse For Folder’ and then select ‘OK’
11. Click ‘Next’
12. Select ‘Run Scripts’ check box
13. Click ‘Next’
14. Click ‘Finish’

Web Part Configuration

1. Make sure the wep part project is compiled.
2. Copy the project to the Sharepoint server.
3. Copy the WebPart.dll to the bin directory under the wwwroot.
4. From the VS command prompt navigate to the bin directory under wwwroot.
5. gacutil the dll which should look something like this: gacutil –i WebPart.dll
6. from this same location in the VS command prompt use the command: sn –T WebPart.dll to find the strong name key. For example: 7dd6db7c5d0189b7
7. Find the Sharepoint Web.config by opening up the IIS Manager and selecting the core site and then right click on the web.config and file the file location.
8. Add a ‘safecontrol’ node to the safecontrols section like this:
Assembly="WebPart, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=7dd6db7c2d0088b7"
Namespace="[some name space]"
TypeName="*"
Safe="True"
/>

9. Make sure the dwp file has a valid public token.
10. Go to the Sharepoint home page.
11. Click Site Actions and select ‘Show Page Editing Toolbar’
12. Click Page button in the toolbar.
13. Select ‘Add Web Parts’ -> Import
14. Click Browse and find the dwp file in the project.
15. Click ‘Upload’
16. Select ‘Add to: Top Zone’
17. Click ‘Import’
18. Close the import right hand bar
19. Select publish from the toolbar

So I'm not saying this is the right method or the best way todo it but it worked for me in my case... abit of a hack but well its Sharepoint :)

4 comments:

  1. I have used the built in Data View web part to run Silverlight 1.0 XAML which renders a Picture library.
    See Demo

    ReplyDelete
  2. You can also add a web part that writes out the xaml client side to work too and MS is coming up with the Silverlight kit for sharepoint to I think.

    ReplyDelete
  3. hot demo :) I used the steps above and it worked. I did hear that there is going to be a kit for sharepoint as well.

    ReplyDelete
  4. Yea, htere the kit is in progress. We are doing another part now interally and I htink right now my favorite method is just to have everything embedded into the webpart including the Xaml and script so that there is no jumping around to get resources to Silverlight to make it work. So far the web parts we have built are one using 1.0 that does fancy charts and graphs and then we did some Silverlight 2.0 that does advanced data visualization in a relationship model that would pan and zoom and change based on parameters. its cool but we cna't do a 'demo' yet.

    ReplyDelete