Customize List Forms using Silverlight

Well I started at a new client a few months ago.  They do things a little different.  I would like to think I got the job because of my passion for custom field types and custom list forms.  But they are going a different direction.  We started the project using customized list forms with custom field types, now we've switched gears to Silverlight!  So I'm trying to mix Silverlight with list forms.  The way they would do it would be with a content type redirect to a custom aspx page that renders the Silverlight plugin and runs the XAP file.  Now I'm doing it a bit differently.  I took the ListForm rendering template found in DefaultTemplates.ascx and enbedded the silverlight control.  When you're done, its a seamless integration and could look like a custom list form.  And its pretty easy.  Today I'll show you the raw form.  In a follow up post, I'll present a control that wraps up the rendering job and you can drop it in like any other ASP.NET user control.

Cookbook

1. So you start by locating the ListForm rendering template in the DefaultTemplates.ascx and copying it to a new ASCX file.  Be sure to deploy it to the CONTROLTEMPLATES folder only.

2. Rename the ID to another name like SilverlightForm.  You must have a unique name for your rendering template.  If you use ListForm, it will override the OTB one and all your custom lists would use Silverlight!

3. Copy the silverlight object tag that was generated by a test page in your silverlight project.
4. Remove any control tags specific to the list form like ListFieldIterator.  You won't need them and the NewForm.aspx, EditForm.aspx, and DispForm.aspx could look really funny with a bunch of list field controls AND a silverlight control -- but you could have both!
5. Copy the style tags and the javascript tags found in the HEAD area directly below the Template tag but inside.  You'll need these to bootstrap the Silverlight plugin.

6. Deploy the Silverlight.js to the LAYOUTS folder and update the reference to it in the script tag.
7. Update your custom list content type or site content type with the Forms tags and replace ListForm with your new rendering template id for the Display, New, and Edit forms.  See my previous post on how to do this. Customize List Forms using Rendering Templates
8. Don't forget to deploy the clientaccesspolicy.xml file to the root of your web application.  This needs to go in the virtual directory of every WFE.

Now here comes the interesting part.  Right now you have a silverlight container similar to the Silverlight webpart found in SharePoint 2010.  But it hasn't been generalized.  You need to consider a couple items.

1. How to feed your source, your XAP file.
2. How to differentiate form modes.

You can tackle number 2 by creating three different ListForms with silverlight controls.  Or you can do something more elegant.  Silverlight can be initialized from its bootstrap control.  It uses a param tag called InitParams.  Here you can pass anything to your silverlight like the mode of the form.  You can get the mode of the form by getting the FormContext and you can get the FormContext from the SPContext.

Number 1 isn't as easy to figure out.  You want to make your ListForm generic so you can't hard code in a XAP file. What I did was use a custom list to allow an admin to configure the name of the XAP.  I then wrote a piece of code to derive the absolute URL with the name of that XAP file.  So now you have a generic ListForm with an embedded Silverlight control.

I'll post another entry soon covering how to encapsulate this object tag into a reusable user control with dynamic properties.

Keep pioneering!