CDN hosted JavaScript in Dynamics CRM 2011

Dynamics CRM 2011 introduced a new concept called web resources. This makes life a lot easier for JavaScript developers and makes JavaScript customizations a lot more managable. But what if you want to use the CDN hosted version of a script instead of hosting it yourself, like for example JQuery? From what I can see there is no way to add a reference to a script like this in GUI. 

So, we have to look back at some lessons learned from writing JavaScript for Dynamics CRM4. The common way of centralizing JavaScript was to only use the form script to include a JavaScript from a folder on the server. A lot of pople have blogged about this over time. So, even if the problem with centralizing JavaScript is solved in 2011, we can still take adventage of this method for including externally hosted JavaScript. Here is an example on how to include JQuery from Google CDN in your JavaScript: 

	var scriptElement = document.createElement("<script type=text/javascript>");
	scriptElement.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js";
	document.getElementsByTagName("head")[0].insertAdjacentElement("afterBegin", scriptElement);

There is one more thing before you are ready to use JQuery. My experience is that $(document).ready(function() {… simply don’t work because the JQuery library ($) isn’t ready when the script is first loaded. To work around this, you have to make your code execute after the forms onLoad event. 

  

Add this code to your script, and you should be able to use CDN hosted JQuery:

function Start() {
    // Verify that JQuery is loaded
    $(document).ready(function () {
        alert("JQuery!");
    });
}

You can also use this method to make your own CDN hosted JavaScripts, and include them in multiple CRM installations. This way you  don’t only get one place to change the script for one installation, but one place to change for multiple installations. This does not fit all solutions, but I’ve found several places where this is very useful!

I have attached a sample that you can download and try on your own. This sample hides all input fields on the form were it’s included as a “proof of concept”.

Leave a Reply

Your email address will not be published. Required fields are marked *