Blog Archives

CRM 4 Silverlight Integration

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.

Normally one would extend CRM by using javascript or custom dialogs but Silverlight is a new technology that allows the building of a nice UI that can interagate well with the underlying html page and backend systems.

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.

CRM_Silverlight_Popup

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.

   13 if (!window.SilverlightInjector)

   14 {

   15     window.SilverlightInjector = {};

   16 }

   17

   18 SilverlightInjector.CreateModalSilverlightControl = function(controlSource, id, params, width, height, onLoadHandler) {

   19

   20     var screenOverlay = document.getElementById(‘screenOverlay’);

   21     var silverlightContainer = document.getElementById(id + ‘_silverlightContainer’);

   22

   23     if (“undefined” == typeof (screenOverlay)

   24         || “unknown” == typeof (screenOverlay)

   25         || null == screenOverlay) {

   26         screenOverlay = document.createElement(‘div’);

   27         screenOverlay.style.width = ‘0px’;

   28         screenOverlay.style.height = ‘0px’;

   29         screenOverlay.style.top = ‘0’;

   30         screenOverlay.style.left = ‘0’;

   31         screenOverlay.style.position = ‘absolute’;

   32         screenOverlay.style.zIndex = ‘100’;

   33         screenOverlay.id = ‘screenOverlay’;

   34         screenOverlay.style.display = ‘none’;

   35         screenOverlay.style.background = ‘#000000’;

   36         screenOverlay.style.filter = ‘alpha(opacity=25)’;

   37

   38         document.body.appendChild(screenOverlay);

   39     }

   40

   41     if (“undefined” == typeof (silverlightContainer)

   42         || “unknown” == typeof (silverlightContainer)

   43         || null == silverlightContainer) {

   44         silverlightContainer = document.createElement(‘div’);

   45         silverlightContainer.id = id + ‘_silverlightContainer’;

   46         silverlightContainer.style.position = ‘absolute’;

   47         silverlightContainer.style.zIndex = ‘101’;

   48         silverlightContainer.style.width = width;

   49         silverlightContainer.style.height = height;

   50         silverlightContainer.style.display = ‘none’;

   51

   52         document.body.appendChild(silverlightContainer);

   53     }

   54

   55     //set overlay size to window full size

   56     screenOverlay.style.width = document.body.clientWidth;

   57     screenOverlay.style.height = document.body.clientHeight;

   58

   59     //place container in the center of the window

   60     silverlightContainer.style.top = (document.body.clientHeight – height) / 2;

   61     silverlightContainer.style.left = (document.body.clientWidth – width) / 2;

   62

   63     Silverlight.createObject(

   64         controlSource,                  // Source property value.

   65         silverlightContainer,                  // DOM reference to hosting DIV tag.

   66         silverlightContainer.id + “_silverlightPlugin”,         // Unique plug-in ID value.

   67         {                               // Per-instance properties.

   68         width: ‘100%’,                // Width of rectangular region of

   69         // plug-in area in pixels.

   70         height: ‘100%’,               // Height of rectangular region of

   71         // plug-in area in pixels.

   72         inplaceInstallPrompt: false, // Determines whether to display

   73         // in-place install prompt if

   74         // invalid version detected.

   75         background: ‘transparent’,       // Background color of plug-in.

   76         isWindowless: ‘true’,       // Determines whether to display plug-in

   77         // in Windowless mode.

   78         framerate: ’24’,             // MaxFrameRate property value.

   79         version: ‘2.0’               // Silverlight version to use.

   80     },

   81         {

   82             onError: SilverlightInjector.OnErrorSilverlightEventHandler,               // OnError property value —

   83             // event handler function name.

   84             onLoad: onLoadHandler                // OnLoad property value —

   85             // event handler function name.

   86         },

   87         params                      // initParams

   88         );

   89

   90     //show the Silverlight container lock the screen

   91     silverlightContainer.style.display = ‘block’;

   92     screenOverlay.style.display = ‘block’;

   93 }

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.

   13 if (!window.EntityOnLoad)

   14 {

   15     window.EntityOnLoad = {};

   16 }

   17

   18 EntityOnLoad.Load = function() {

   19     //Load Silverlight.js into the head to prevent having to activate the control

   20

   21     var oXML = new XMLHttpRequest();

   22     oXML.open(‘GET’, ‘/ISV/CRMSilverlightWeb/Silverlight.js’, false);

   23     oXML.send();

   24

   25     var e = document.createElement(“script”);

   26     e.type = “text/javascript”;

   27     e.text = oXML.responseText;

   28     document.getElementsByTagName(“head”)[0].appendChild(e);

   29

   30

   31     //Load SilverlightInjector.js

   32

   33     oXML = new XMLHttpRequest();

   34     oXML.open(‘GET’, ‘/ISV/CRMSilverlightWeb/SilverlightInjector.js’, false);

   35     oXML.send();

   36     eval(oXML.responseText);

   37

   38     EntityOnLoad.ShowPopupMessage(‘This is a ‘ + crmForm.ObjectTypeName + ‘ form displayed using Microsoft Silverlight.’, 300, 300);

   39 }

   40

   41 EntityOnLoad.ShowPopupMessage = function(message, width, height) {

   42     var params = ‘message=’ + message;

   43     params += ‘,width=’ + width;

   44     params += ‘,height=’ + height;

   45     SilverlightInjector.CreateModalSilverlightControl(‘/ISV/CRMSilverlightWeb/ClientBin/CRMSilverlightLibrary.xap’, ‘CRMPopupID’, params, width, height, null);

   46 }

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.

    1 try {

    2     oXML = new XMLHttpRequest();

    3     oXML.open(‘GET’, ‘/ISV/CRMSilverlightWeb/EntityOnLoad.js’, false);

    4     oXML.send();

    5     eval(oXML.responseText);

    6

    7     EntityOnLoad.Load();

    8 }

    9 catch (ex) {

   10     alert(‘Failed to load :’ + ex.description);

   11     window.close();

   12 }

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.

In this post we have seen how to show a model popup on a crm form using Silverlight. I would just like to mention that this concept can be used to implement other types of functionality (including things like address checking where you could have a control that reads your search criteria and provides a list of matches and then save back the details onto the CRM form).  Essentially it could be used for any process that requires some user interaction as an alternative to javascript and dialogs. By using Silvelright you get the extra benefit of having a nice user interface that is easy to implement and has the advatange of using a proper programming language such as C#.

You can download the sample code from here.

CRM 4 WCF Integration

In this post i will talk about integrating the Microsoft CRM UI with backend WCF services. In the CRM SDK there is a lot of examples about creating sample SOAP requests to access the CRM SDK web services. However this involves a lot of manual work which includes generating the SOAP request message and then parsing the SOAP response message. If you are trying to retrieve and manipulate a lot of data in many forms this can be quite time consuming and difficult to maintain. One alternative is write your own custom JavaScript helpers that can simplify the process for you. However this also requires investing the time to implement the helper code. What if you want to call third party web services? This can be difficult to access using JavaScript depending on the complexity of the service definition and can have various security implicaitons.

Luckily WCF in .NET 3.5 provides the capability to expose WCF services that can be easily consumed using AJAX enabled web pages. The WCF Web Extensions architecture is based around custom bindings and behaviors that make it easy and efficient to consume backend services using Javascript. However most of this functionality is implemented using ASP.NET using the ScriptManager class. The ScriptManager on the ASP.NET page is responsible for rendering all the scripts required for the AJAX libraries to function including any proxy to WCF services. This makes the ScriptManager useless for CRM as the only supported way of customising a CRM form is by injecting Javascript on the CRM exposed events. The good news however is that with a few tweaks we can make all that functionality available on the CRM form.

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.
  • Access the return/input parameters of the CRM operations as proper JavaScript objects with no extra effort.
  • 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.

    7 namespace CRMWCFService

    8 {

    9     public class CRMService : ICRMService

   10     {

   11         public CRMEntity GetCRMData(string message)

   12         {

   13             return new CRMEntity()

   14             {

   15                 Name = “Demo “ + message,

   16                 Active = true,

   17                 Date = DateTime.Now,

   18                 User = OperationContext.Current.ServiceSecurityContext.WindowsIdentity.Name

   19             };

   20         }

   21     }

   22 }

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.

    1 <%@ ServiceHost

    2     language=”C#”

    3     Debug=”true”

    4     Service=”CRMWCFService.CRMService”

    5 %>

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.

   10 <configuration>

   11   <system.serviceModel>

   12     <bindings>

   13       <webHttpBinding>

   14         <bindingname=Secure>

   15           <securitymode=TransportCredentialOnly>

   16             <transportclientCredentialType=Windows />

   17           </security>

   18         </binding>

   19       </webHttpBinding>

   20     </bindings>

   21     <services>

   22       <servicebehaviorConfiguration=CRMServiceBehaviorname=CRMWCFService.CRMService>

   23         <endpointaddress=“”binding=webHttpBindingbindingConfiguration=SecurebehaviorConfiguration=AjaxBehavior

   24           name=Servicecontract=CRMWCFService.ICRMService />

   25         <endpointaddress=mexbinding=mexHttpBindingname=Meta

   26           contract=IMetadataExchange />

   27       </service>

   28     </services>

   29     <behaviors>

   30       <endpointBehaviors>

   31         <behaviorname=AjaxBehavior>

   32           <enableWebScript/>

   33         </behavior>

   34       </endpointBehaviors>

   35       <serviceBehaviors>

   36         <behaviorname=CRMServiceBehavior>

   37           <serviceMetadatahttpGetEnabled=true />

   38           <serviceDebugincludeExceptionDetailInFaults=true />

   39         </behavior>

   40       </serviceBehaviors>

   41     </behaviors>

   42   </system.serviceModel>

   43 </configuration>

The next step is to create a script called “EntityOnLoad.js” that will loaded into the CRM form. The script will first load the Microsoft AJAX library that would otherwise have been available on the client using the ASP.NET ScriptManager. To create this file you can create a test ASP.NET page as demonstrated in the sample download at the end of this post. In the test page add reference to the WCF service in the ScriptManager. Fire up the page and view the source. In there you will see references to various script files and one of them is the Microsoft AJAX library that you can save and reuse. This file should only be updated if you install a new version of .NET framework or apply a service pack. The next step is to load the JavaScript proxy for the service. WCF provide these files as part of the metadata for a web enabled WCF service. So all we need to do is link to the WCF JS metadata URL. The last step is to invoke the WCF Service asynchronously by passing a return delegate. The code below demonstrates these step.

   13 if (!window.EntityOnLoad)

   14 {

   15     window.EntityOnLoad = {};

   16 }

   17

   18 EntityOnLoad.Load = function() {

   19

   20     //Load Microsoft Ajax Library

   21

   22     var oXML = new XMLHttpRequest();

   23     oXML.open(‘GET’, ‘/ISV/CRMWCFWeb/MicrosoftAjax.js’, false);

   24     oXML.send();

   25     eval(oXML.responseText);

   26

   27     //Load Service Proxy

   28

   29     oXML = new XMLHttpRequest();

   30     oXML.open(‘GET’, ‘/ISV/CRMWCFWeb/Services/JSService.svc/js’, false);

   31     oXML.send();

   32     eval(oXML.responseText);

   33

   34     CRMWCFService.CRMService.GetCRMData(“CRM “ + crmForm.ObjectTypeName, onComplete, onError);

   35 }

   36

   37 function onComplete(result) {

   38     var message = “Name: “ + result.Name + “n”;

   39     message += “Active: “ + result.Active + “n”;

   40     message += “Date: “ + result.Date + “n”;

   41     message += “User: “ + result.User + “n”;

   42     alert(message);

   43 }

   44

   45 function onError(error) {

   46     alert(error.get_message());

   47 }

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.

    1 try {

    2     oXML = new XMLHttpRequest();

    3     oXML.open(‘GET’, ‘/ISV/CRMWCFWeb/EntityOnLoad.js’, false);

    4     oXML.send();

    5     eval(oXML.responseText);

    6

    7     EntityOnLoad.Load();

    8 }

    9 catch (ex) {

   10     alert(‘Failed to load :’ + ex.description);

   11     window.close();

   12 }

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.