Injecting jQuery Into Microsoft CRM

If you’ve done any decent amount of customization work with Microsoft CRM (version 3.0 or 4.0) you have probably had to remember all the JavaScript you tried so hard to forget.  Maybe you’re trying to do some advanced form validation or want to do some advanced CSS manipulation.  These things are not very simple and writing dozens and dozens of lines of document.getElementById() can get really irritating.

But this problem has already been solved now hasn’t it?  We can write rich unobtrusive JavaScript easily using any of the latest JavaScript libraries (see jQuery, MooTools, Scriptaculous, etc).

How We Do It

The code is actually pretty simple.  I’ll demonstrate using jQuery here but really you can do this with any of the popular libraries.

First, download jQuery from http://www.jquery.com.  Or, choose one of the jQuery CDN’s – including Microsoft’s newest one which supports SSL.  If you are downloading the file, place it on your Microsoft CRM server in the ISV directory (e.g. /ISV/MyCompany/jQuery.js).

Next you’ll need this basic function:

function load_script (url)
 {
    var x = new ActiveXObject("Msxml2.XMLHTTP");
    x.open('GET', url, false); x.send('');
    eval(x.responseText);
    var s = x.responseText.split(/\n/);
    var r = /^function\s*([a-z_]+)/i; 

      for (var i = 0; i < s.length; i++)
      {
          var m = r.exec(s[i]);
          if (m != null)
              window[m[1]] = eval(m[1]);
      }
  } 

This will take a script URL and parse out the functions and insert them into your page.  This will allow us to make a call like this to inject jQuery right into Microsoft CRM:

load_script("/ISV/MyCompany/scripts/jquery-1.3.1.min.js");

You can paste the function and then put this line in your form load and then use jQuery calls the rest of the way.

Take It To The Next Level

One of my biggest frustrations when I got started with Microsft CRM was this concept of pasting my code into some window on their app and hitting “publish”.  As a developer, this was very far from ideal.  Additionally, the only places I could put code was OnLoad and OnSave on Entity Forms.  Well what if I needed more than that?

So here’s the approach I took.  [Big Disclaimer Here :: Note this is an unsupported Microsoft CRM customization.  Microsoft will potentially break this in updates/upgrades.  They probably will not help you if it breaks your stuff.  They will not talk to you at parties.  It will be awkward.  You have been warned.]

In version 4.0 of Microsoft CRM there is a file – /_static/common/scripts/Global.js/  This file is loaded in some 90% of their pages.  So I opened the file and pasted the following at the vey very bottom of the file (be careful not to touch anything else in here – see aforementioned disclaimer).  Note there is an equivalent file in 3.0 as well.

/* Begin Custom Code  */

function load_script (url)
 {
    var x = new ActiveXObject("Msxml2.XMLHTTP");
    x.open('GET', url, false); x.send('');
    eval(x.responseText);
    var s = x.responseText.split(/\n/);
    var r = /^function\s*([a-z_]+)/i; 

      for (var i = 0; i < s.length; i++)
      {
          var m = r.exec(s[i]);
          if (m != null)
              window[m[1]] = eval(m[1]);
      }
  } 

    load_script("/ISV/MyCompany/scripts/jquery-1.3.1.min.js");
    load_script("/ISV/MyCompany/scripts/crm_scripts.js");

/* End Custom Code  */

You probably recognize our load_script function and the call to load jQuery.  The final call loads my own js file into every page.  Now I have a single (or many if your prefer) source controlled file, that I can publish, that has all my custom JavaScript.  The benefits:

1. File is under source control, allows for easy diffs.
2. Easy to deploy, do not need to republish MS CRM forms.
3. Can use custom js now outside of the forms, pretty much anywhere in crm.

 

In future posts I’ll explore some of the doors this opens and just where we can really take this.