Silverlight on CRM: You are only limited by your imagination!

Article
12/15/2008

You may have seen some of my earlier posts that mention that I have been playing with Silverlight, WPF & CRM 4.0. I will be creating a series of blog posts about what I’ve learnt and some of the things you can do. This is the first one and although it doesn't really talk about integrating CRM data into Silverlight as such, we will cover off the building of an arbitrary Silverlight Application that calls an external system API, and then how to embed that into CRM.

Besides a few attempts at playing with Silverlight previously, this was the first thing with any really functionality that I had attempted so thought I’d share it. I was really surprised at how easily my previous development skills translated to the new applications. I really just did this to try to teach myself some new skills, but thought I would also share it because it highlights a really important fact: You can easily create applications that harness the UI power of Silverlight/WPF and easily embed them within your CRM application, allowing users to access other systems from within the one application. You really are only limited by your imagination!

Build Your Silverlight Application

For this exercise, I followed Scott Guthrie’s Fantastic tutorials, but instead of connecting to the Digg API’s as in his examples, I decided to use the Twitter Search Api’s. (These are a little different to integrating with Digg or with twitter itself and so I got to play with Silverlight, JSON & Linq all in the same app as well as really get an understanding of what possibilities there were instead of just copy/pasting the code in the tutorials!) I am not going to go through how I did that (unless anyone desperately wants to see it) – but will go through how to take then next step of integrating my Cool Twitter Search App written in Silverlight and embed it in CRM 4.0.

Grab your .xap file & create a Wrapper HTML/ASPX page to load it

When you compile your Silverlight Project, the bin directory will contain a .xap file that you will need to put into your Web directory.

As its recommended that you place any custom files within the ISV folder, using the name of your company & then the name of your Solution as folder structure, I have created a folder called TwitterSearch in my C:\Program Files\Microsoft Dynamics CRM Server\CRMWeb\ISV\CatherinesCustomisations folder & placed my TwitterSample.xap file in there.

When you create a Silverlight project, Visual Studio 2008 is kind enough to create a helper Web application for you that contains both a html and a aspx file. You can quite easily grab either of these & paste them into a Web folder that your CRM file can access.

You will need to take care that it doesn’t matter which of these files you choose, the path they contain that points to the .xap file is most likely incorrect so you will have to repoint them to the correct directory. If you put your html & aspx files in the same directory as the .xap file, then its simply a matter of changing the following lines:

In the ASPX page:

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/<your Silverlight application name>.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />

becomes

<asp:Silverlight ID="Xaml1" runat="server" Source="~/<your Silverlight application name>.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />

of if you prefer to work with the HTML file:

becomes

You should be able to load both of these pages independently to test that they load OK.

Extend CRM to show the Silverlight Application

Option 1: Via the Navigation Pane

I can include the Silverlight Application in CRM via 2 ways. The first is via a Link in the left Navigation pane:

To do this requires modification of the SiteMap xml file. If you’re a fan of directly editing XML, feel free to do this manually – however I recommend you download a copy of the Microsoft Dynamics CRM demonstration Tools. Technically these tools are designed to help with the setup & maintenance of CRM demos – but there are a few nifty tools in here that I use for development so if you don’t have a copy of these yet – I suggest you download a copy!

So to use this tool the first think you need to do is connect to your CRM instance:

Once connected, select the Site Map Editor tool, click Open From CRM to load the existing Site Map. (I suggest you save a copy of the file now before you make any changes!)

Highlight the Menu item you want your link to appear under, then click the Add Under button.

Enter the details for a link to the newly added Page, give it a title & also add the path to the image you wish to use for the icon:

Once you have finished making your modifications, click Publish to CRM to update your changes back to CRM.

Refresh or reload your instance of CRM Web client to see the changes.

I have added it as the first item at the top of the Workspace so it is now the default page for CRM when it loads:

And as easy as that – I have my Twitter Search Silverlight Application loading within CRM. I can now enter a search term, and see the results:

In the example above I am searching for Dynamics CRM & getting a returned list of all public tweets that mention the term. :)

Option 2: Via the Menu

For the second way to integrate an application with CRM, I want my new twitter search app to be available within CRM as a menu item – for the Web Client, and also for the outlook client – but only when Online (basically because this wont work if the Silverlight app cant reach the twitter API – which needs internet connectivity!)

For editing the ISV.config, you can either edit this programmatically or via manually editing the XML directly.

For this example, we are going to export the ISV.config, edit it & then reimport it. Keep in mind if you import a changed ISV.config file it will overwrite the existing one. Changes are not merged so if you are building your own add in & wish to distribute it – I STRONGLY suggest you use the programmatic method of merging your ISV.config XML with the existing code. There is a great example of how to do this here.

Unfortunately there are no cool tools (that I know of) to to do this manually, but it is really easy: go to Settings –> Customisations –> Export Customisations. Select ISV Config from the list & then click Export Selected Customisations

Save the Customisations.zip file somewhere handy, then open the .xml file inside it to make the required changes.

I want the Buttons to appear in the top menu. To get this to work I want to include the following code within the <Root></Root> elements:

The above code includes 2 buttons. The first appears if the client is the Web Client. The second appears if CRM is being accessed via the Outlook client – but only if its online (See the AvailableOffline-“false” attribute).

Note that their element names in here are Case Sensitive so take care when writing your modifications.

Once you have made your required changes to the ISV.config file, save them, then navigate to the Settings –>Customisation –> Import Customisations and load your changed ISV.config file.

If there are any errors in your file, it will not load. Tip: Double Check the spelling & that you have the correct case for your attribute names.

Once it displays the ISV.Config file, select Load Selected Customisations.

Now, if this is the first time you have added any customisations to CRM, you will need to actually set CRM to enable which versions of CRM can see customisations.

You can do this via the Settings –> Administration –> System Settings. On the Customizations tab, Click the ellipse button for the Clients and add the required ones:

Once you click OK, refresh or reload your Web client for CRM & you will see the new button:

Clicking it opens our Silverlight Twitter Search screen in another window:

When I first opened the Outlook client it wasn't showing the new Twitter Search button, but as soon as I synched it with CRM ,the new button appeared, which when clicked works exactly the same way as when in the CRM web client:

In summary…

Although the majority of this post has focused on adding custom web pages to CRM, customising CRM menus & the navigation pane, I want to highlight that the fact that the add in was a Silverlight application. I have been able to quickly & easily build a functional application that access external systems (with a rather nice UI) that I can embed in CRM as if it was a standard HTML page and all of my organisation can now use!

Imagine the things you could build using the powerful Silverlight & WPF Design & Development tools & then simply embed in your Dynamics CRM application! The possibilities are endless….

Silverlight on CRM: You are only limited by your imagination!

Additional resources