An approach towards implementing information entry forms using Silverlight and SharePoint-Part 2

Recap of Part 1

This is a continuation of Part 1 of the article. In the first part we discussed about a Expense entry form created using Silverlight. We discussed how it could be hosted on a dynamically created SharePoint page (web part page) using a generic Silverlight Application web part. We uploaded the .XAP file to a custom Document Library and configured the Web Part's properties in the Design Mode of the form so that it reads the XAP file from the custom document library with the appropriate dimensions.

What do we intend to achieve?

In this post, we will go a couple of steps forward and examine how we can accomplish the following:

1. Submit the Expense information (serialized as XML) from the Expense Data Entry form to a custom document library (call it ExpenseData library )
2. Author a workflow using SharePoint Designer and assign it to ExpenseData library so that an approver is automatically assigned an approval task. This is also followed by a mail being sent to the approver.
3. When the approver views the approval task, possibly display the submitted expense data  (XML) in a read-only view using the same Silverlight application

We will create a simple workflow using SharePoint Designer. We will also modify the DispForm.aspx application page using SharePoint Designer and make it host our Silverlight Web Part.

By doing this, we want demonstrate how we can realize the potential of WSS/MOSS as a platform for building applications that reside in the Cloud. Can we build Rich Internet Applications using Silverlight by using WSS/MOSS and without the need for physical access to the server and without requiring administrative access to the physical server. I am quite confident that Silverlight complements the power of SharePoint thereby turning it into a platform for not just building HTML emitting portals , but powerful applications with CRUD like capability. I imagine a world where an enterprise would chose to fulfill the demands of their intranet portals using SharePoint and Silverlight. Mundane business processes like Holiday Management, Expense Submission, Feedback forms, etc. would be made from Silverlight and hosted out of a SharePoint farm, gradually taking over the place of custom ASP.NET applications.

Step 1 : Enhance the generic Silverlight Application Web Part

In Part 1 of this article we create a simple Web Part which encapsulated the Silverlight ASP.NET server control. We exposed a Source property so that the path to the .XAP file can be customized during Page design time. We also exposed a property of type String which could be configured during Page edit time to pass custom arguments into the Silverlight Application (as a series of Name-value pairs).

We will retain the Source property and InitParams the way they are. However, we will add one more property to the  Web Part. This will be of type ParametersCollection. This property will let us do things like pass request variables from the custom pages as parameters into the Web part and the Silverlight application.

Step 2 : Host the Expense Entry Silverlight app as a Web Part

As we did in Part 1,

1. Create a custom document library to host the Silverlight application (.XAP file) . Call this library as XapLib
2. Create a Web Part page which would be used for hosting the Expense Data Entry form
3. Add an instance of our Generic Silverlight Web Part into this Page
4. Configure the Source property of the Web Part so that it points to the .XAP file uploaded to the XapLib library

We need to configure the Expense Data form so that it knows where the expense information is to be submitted. We will modify the Expense Data form so that it can be configured with initialization arguments.

Of all the parameters required by the Silverlight Expense Data Entry form, one of them is named serviceurl.This is the URL of the web service which would be invoked for submitting the Expense information.

We will configure the Web part to inject a value for the named parameter serviceurl into the Expense Data Entry form

Clicking on the ellipses button displays a multiline text box for setting the Initialization parameters. Note that we are setting the URL of a custom web service and also the GUID of the document library where the Expense information will be saved. The GUID is one of the parameters into the web service, the other being the expense XML information

Step 3 : Submitting the Expense information to a custom Document Library

To interact with SharePoint document libraries I have written two Web services and hosted them in the ISAPI folder. Guidelines for developing SharePoint web services are available here.

1. Service for uploading Expense XML information to a document library. This service will be called from the Silverlight application when the user clicks on 'Submit Report' button on the form
1. 
2. docllibid: GUID of the document library for posting the expense information
3. documentname: display name of the submitted XML stream
4. file: the raw XML stream
5. On success the numeric ID of the submitted document is returned
2. Service for reading the Expense XML information from a document library, given the ID of the document
1. 
2. documentid: The ID of the XML document that was submitted to the document library by using the first web service
3. doclibid: The GUID of the document library where the expense XML document has been posted
4. On success, the Byte array of the XML is returned

Step 4 : Create a simple Approval Workflow using SharePoint Designer

We will chose SPD as a means of authoring a simple workflow. The workflow will use the Collect Data from an User activity to gather Approve/Reject response from the the approver. The detailed steps are beautifully explained in  this article.

The crux of the Collect Data from an User activity is the code generated ASPX form which would be displayed to the approver.

When the approver is presented the above web page, he/she can view the details of the document by clicking on the encircled hyperlink. This link will take the user to the DispForm.aspx of the Expense Data document submission library.  However, we need something on DispForm.aspx that can render our custom XML and show meaningful expense to the approver.

Step 5 : Modify out-of-box DispForm.aspx to view submitted Expense data using our Silverlight app

Use SharePoint designer and navigate to the Expense Data document library in the Folder view.

I have modified DispForm.aspx so that it displays our generic Web Part. The Source points to the location of the .XAP file. The Web part Parameters collection allows for passing the ID of the document into the Silverlight web part using the QueryStringParameter object.

Conclusion and Challenges ahead of us

1. In this article, I  demonstrated the basic steps required for leveraging Silverlight for building data entry forms, using SharePoint for hosting the application and also routing the submitted business information
2. The marriage of Silverlight and Sharepoint offers a promise of rapidly constructing rich business forms without worrying about the physical web server or custom ASPX pages.
3. I do not think we would be over imagining if we think of SharePoint as the Cloud within the company where all the applications of the enterprise will reside
4. In subsequent posts I will deal with the how the workflow can interact with external applications. E.g. We want to save the Expense data into a LOB application once it has been approved.
   

Disclaimer 

The ideas expressed in this article are solely of the author and may not represent the views of Microsoft