In this post I will talk about integrating the Microsoft Dynamics CRM UI with Silverlight and I will show how to inject a Silverlight control onto a CRM entity form.
The solution consists of a custom web application that hosts the silverlight required files and some customisations for the “OnLoad” event. On this occasion I will show you how to show a modal Silverlight popup on the opening of a new CRM form, however the concepts in this post can be easily extended to cater for other requirements. Below is a screen shot of the final result. You can then click anywhere on the popup to dismiss it.
We start with creating some methods that will inject a silverlight control onto a CRM form. To be able to create a modal popup I will create an overlay div that will cover the whole window preventing the user from interacting with anything on the form until the popup is dismissed. To display the Silverlight control I will place another silvelright container div on top of the overlay div that will contain the Silverlight control. The Silverlight container div will be the exact size of the Silverlight popup control and will be centered in the middle of the window. Both divs will be appened to the end of the document and use absolute layout to prevent any intervention with the CRM elements on the form.
The next step is to inject the Silverlight control into the Silverlight container div using the standard method that comes as part of the Silverlight.js file. Finally the overlay div and container div are shown on the form. Below is the code that illustrates this.
The next step is to create some code that will be injected into the CRM entity “OnLoad” event. I prefer placing any code that is used on the “OnLoad” event in a separate file on the server as it can be easily maintained, especially during development. However be aware that in this case these extra customisations are not stored in the database and will have to be deployed separately.
The first thing to do is to inject the standard Silverlight.js into the head of the page as a script element. I found that loading the file normally will not auto activate the silverlight control and the user will have to click on it to activate it. The next thing is to load SilverlightInjector.js file created in the first step into the form in a smilar fashion and call the method to create the Silverlight popup. The code below illustrates this step.
We now need to use this code from the CRM form on the “OnLoad” event. To do this we the load the code using the standard XmlHttpRequest and invoke the load function we created previously. The code below needs to be placed into the customisations on the “OnLoad” event for the entity you want to use the popup on.
The last call we made will download and launch the Silverlight application. On Application start event we create a new CRMPopup control and pass the initialisation parameters to the constructor. The CRMPopup is a Silverlight user control that implements the Popup behaviour. The control is initialised by passing a message and dimensions through the initialisation paramters. In the constructor we register for two events: The Loaded event that will start the animation to show the control and the MouseLeftButtonUp event that will be used to start an animation to hide the control. We will not go too much into the details of the Silverlight animations as it is outside the scope of this post.
I have included some sample code that you can download using the link below. The download contains a solution with a web application project and a Silverlight control library. You will need to create a virutal directory called “CRMSilverlightWeb” under the ISV directory in CRM and copy the content of the web application into there. Make sure to add the “.xap” extension to the MIME types on the “ClientBin” directory otherwise IIS will not allow access to the Silverlight package. You can set the extension to “.xap” and MIME type to “application/x-silverlight-2”. You will also need to add the contents of “EntityOnLoadCustomisation.js” file to “OnLoad” event of the selected entity you want to test the popup on.
You might notice a small delay the first time you load the page and this is due to the form having to download the Silverlight package. On subsequent requests and (depending on your setup) the Siverlight package can be cached to increase performance.
You can download the sample code from here.
This approach of being able to invoke WCF services from within the CRM UI we give us many useful features that can be used to extend CRM.
- Implement custom WCF services that are designed to be used by the CRM UI. Thus making the least number of calls as possible and only retrieving the required data.
- The ability to implement very complex logic in the helper service that could include talking to CRM SDK services, Third party services or databases.
- Easy to maintain as operations can be altered/added/removed with minimal effort. There is no need to update any proxy scripts as they get generated at runtime.
The implementation consists of a custom web application deployed under the ISV directory on the CRM website. The web application will host the custom helper WCF service and provide all the scripts and customisations required to invoke the WCF service from a CRM form. The first step is to implement the WCF service. This will be implemented as a standard .NET library. I will not go into the details of the implementation of the WCF service as it is outside the scope of this post. Below is the code for the sample WCF service.
The next step is to host the service in our custom web application. To do that add the reference to the previously created library and then create a new “Services” directory in the web application. Then add two files. The first file is “JSService.svc” which is the base endpoint address for the service. Below are the contents of the file.
To finish the service setup also add a web.config file to the same directory that includes the configuration for the WCF Service. The service will use windows authentication. However when you host the web application in IIS make sure you enable anonymous access on the “Services” directory to allow access to the metadata endpoint. You can also enable anonymous access on the script files to speed up loading time performance. Note the endpoint behavior that enables the endpoint to be accessible using AJAX.
Finally the last and easiest step is to load the script and execute it from the CRM UI. For demonstration purposes i will just call the service on the load event. However you can call this code from anywhere you like. The code below needs to be added to “OnLoad” event for the CRM form. If everything is step up properly you should see a popup when you open the CRM form.
As you can see once everything is setup, making calls to the WCF service is just a matter of calling a method and processing the response. I have created a sample that includes all the required files and test pages. The sample demonstrates the concepts in this post and provides you with a working example. However note that if you decide to run the sample locally in visual studio you will have to configure the web application to run under IIS instead of the visual studio built-in web server. Otherwise you will get an error indicating that Windows Authentication is not supported. Hope you find this post useful.
You can download the sample code from here.