Putting all javascript code in external files

Dynamics CRM is great. It has some really nice functions like being able to add javascripts to different event in the form to handle special needs of the GUI.

However, it is only fine as long as these scripts arn't that many and not too complex. When they start getting more and more complex, bigger and their numbers start increasing it soon becomes an impossible tast of maintaining them all and there is no built in function to handle javascript includes without special code. It also takes a long time developing more complex code in the javascript form window in CRM and then running the preview or publishing it each time before testing.

There is light in the tunnel however, by using the technique specified bellow, you can both
get global javascript files, save and refresh only to see you changes, and keeping all scripts for one entity in one file (and not one for onLoad, one for onSave and one for each onChange that is needed).

A lot of credit for this has to go to Michael Höhne at Stunnware since he added a posting on his blog on how to manage javascript includes in runtime.

So, first of all we have to put some standard code in the onLoad. This should only be done once and it shouldn't really be changed until you need to publish it for release (switching of the caching).

var LoadFile = function(url, cache)
{
var httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
httpRequest.open("GET", url, false);
if (!cache)
{
httpRequest.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
}

httpRequest.send(null);
return httpRequest.responseText;
}

eval(LoadFile("/isv/mycrmext/javascripts/MyGlobal.js", false));
eval(LoadFile("/isv/mycrmext/javascripts/Account_onload.js", false));

This code simply loads and executes the two files MyGlobal.js and Account_onload.js located in the directory C:\Program Files\Microsoft Dynamics CRM\CRMWeb\ISV\myCRMEXT\JavaScripts
and can be found at the url: :port/isv/mycrmext/javascripts/">http://:port/isv/mycrmext/javascripts/.

So, copy-paste it into the onload event form in the account form editor in CRM. Activate the event, save and publish.

Then you can create the two .js-files at the specified directory. Start with just some test code like:
alert("This is the MyGlobal.js-file");
or something similar.

The next step is to try to avoid using the onsave and onchange events. This is quite easy when you know how but it is sort of in the gray area of supported customizations so be aware of this.

In the file Account_onload.js add the following code:
var MyOnSave = function()
{
alert("onSave");
}

var MyOnChange = function()
{
alert("onChange");
}

alert("onload)

crmForm.attachEvent("onsave", MyOnSave);
crmForm.all.name("onchange", MyOnChange);

This attaches a simple function to the onsave event of the form and another to the onchange event of the attribute "name".

The functional defintions/declarations can be put into any of the includefiles.

Now, just save the file, and open an account to see the magic! (It should show a dialog when loading with the text "onload", when the accountname is changed, it should show "onchange" and when saved, it should show "onsave".

Please note that I would advise you to put the javascript files in the same "host" from a IE perspective since you will get less problems with cross domain scripting and similar IE related security issues. This doesn't however mean that you cannot put the js-files anywhere on the internet where the clients can access it.

Gustaf Westerlund
Microsoft Dynamics CRM Architect

Logica
www.logica.com