Home > Conference, CRM, ISV, Javista, Microsoft, Microsoft Dynamics > Incubation Week Party Favors – Silverlight CRM Attachment Viewer

Incubation Week Party Favors – Silverlight CRM Attachment Viewer

As I discussed in my previous post, I had the opportunity to volunteer as a CRM Solution Architect for Microsoft’s 2nd Incubation Week.  While there, I prototyped a Silverlight 3.0 viewer control that could bind directly to images stored in Microsoft Dynamics CRM as attachments.  Now this is not the first sample of Silverlight working with CRM, but I think this is the first one that I can find that binds to attachments; it also has a custom shader that allows you to control the brightness, contrast and negative of the image. :o)

IWPG

To use this sample you will need the following tools:

– Microsoft CRM 4.0 Server

– Visual Studio 2008 with SP1

Silverlight Tools 3.0 Beta

I have attempted to heavily comment the code to explain just what is going on.  But before we get to the code, let’s review the design of the solution.

The following Visio diagram shows the major components of the sample:

IWPG2

This diagram shows the basic logic flow of the Silverlight Viewer Control:

IWPG3

Here are specific design/code highlights:

1. The custom shader was particularly fun to develop, as it was my first shader and was fun to go back to my roots a bit.  The “negative” effect is a bit buggy as it allows the 8-bit gray palette to “loop around” which results in some psychedelic effects.  This can be fixed with basic logic check wrapping the calculation, I just haven’t gotten to it.  The custom shader is what I am calling a “compound shader”.  Originally, I had 2 shaders one for brightness/contrast and one for negative.  Unfortunately, after asking a few Silverlight pros and doing a lot of web searching I could not figure out how to bind two shader effects at the same time (something that I would expect to be core).

2. Interaction between JavaScript and Silverlight.  I found this part both fun and cool.  On the portal, the list of images are rendered using standard ASP.NET and CRM web service calls.  When a user clicks on these however, I use a client-side JavaScript to call a method on the Silverlight control which tells it what image to load.  I like this because it shows you can use the right tool for the job, why build the entire experience in Silverlight, when using it as a control may be more appropriate?

3. Downloading images from CRM and into Silverlight.  For those that don’t know it, Silverlight always calls web services asynchronously.  This is of course “by design” because you don’t want to lock the UI thread and it forces you to write calls in a manner that allow for a decent user experience. 

You can download the sample code here:

http://cid-b909fb9e8ee2dbc5.skydrive.live.com/self.aspx/Public/Blog%20Files/Ascentium.Crm.SilverLightSample.zip

Additional Instructions:

1. Once you have the code deployed, open the solution in Visual Studio.

2. Update the Web Portal’s settings: CrmUserName, CrmUserPassword, CrmOrganizationName and Web Service URL.  As well as the SilverLight Viewer’s ClientConfig to tell it what the URL of the CRM Proxy is.

3. Import the customizations.zip file into CRM and publish it, this will load the new_xrayorder entity:

IWPG4

4. Log into CRM and create a new X-Ray Order, then attach a JPG to the Order.  The portal considers any document with a MIME type of “image” to be an image and all other attachments to be “downloadable”.

5. Build and launch the solution with your “start page” as OrderDetailPage.aspx.  On the query string pass in “ID” of the GUID of the X-Ray Order you created.

A big thanks to this guy, for his post on writing a custom shader in WPF that I adapted to work in Silverlight.

Cheers,

Aaron Elder

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: