Category Archives: JavaScript

Reuse: Dynamically Injecting JavaScript into CRM Forms

Instead of adding lots of code to a Form’s OnLoad event via the CRM Forms Editor, consider the benefits of injecting a JavaScript file or two dynamically. You can work in a proper editor, with syntax-highligting, change and replace, curly-brace matching etc. But more importantly, script files need only be saved and the Form refreshed to test changes made, where Dynamics CRM requires multiple mouse-clicks and often the overhead of publishing the entity.

Consider the approach below – applicable to the Campaign entity.

Step 1.

Decide on a folder for your JavaScript files. With CRM 4, I recommend that you create a virtual subfolder to the ISV folder of the CRM website. With CRM 3, I recommend that you create the same (although not officially supported, it is in line with version 4).

Create a file General.js (a container for reusable JavaScript code), containing only the following code snippet for now:

//
MaximizeMe = function() {

     if (window.screen) {
        var aw = screen.availWidth ;
        var ah = screen.availHeight ;
        window.moveTo(0, 0);
        window.resizeTo(aw, ah);
     }
}

With MaximizeMe being a global variable containing this function, it can now be called from anywhere in the scope of the Form once this script has been loaded.

Step 2.

Create a file Campaign.js containing the following code, for now:

//
CampaignOnLoad = function() {
   MaximizeMe();
   alert("In Campaign OnLoad...");
}
CampaignOnSave = function() {
   alert("In Campaign OnSave...");
}

These routines will be called directly from the Form’s OnLoad and OnSave events once this script has been loaded.

Step 3.

Now add all the following pieces of code to the Campaign Entity’s Form OnLoad area. We start by deriving some variables from the document’s location:

//
BaseURL = "http://" + document.location.hostname ;
BasePort = ":" + document.location.port;
ScriptsURL = BaseURL + BasePort
     + "/isv/mycompany/CRMScripts/";
//

The global variable ScriptsURL now points to the folder on the website where our JavaScript files are served from. We follow this by adding the following function:

//
doStuffOnLoad = function() {
   if (oScriptOnLoad.readyState == "loaded") {
      CampaignOnLoad();
   }
}
//

This function will be called from a little bit further on, and eventually pas control to CampaignOnLoad (the  function defined in step 1), which is loaded along with General.js by the functions below:

//
doStuffOnLoadGeneral = function() { 
  if (oScriptGeneral.readyState == "loaded") {
    oScriptOnLoad = document.createElement(
      "<script src= '" + ScriptsURL + "Campaign.js' "
       + "language='JavaScript' "
       + "onreadystatechange='doStuffOnLoad();'"  + ">" );
    document.getElementsByTagName("head")[0].appendChild(oScriptOnLoad);
  } // if
} // doStuffOnLoadGeneral
//

This function is in turn called from the code below:

//
oScriptGeneral = document.createElement(
      "<script src= '" + ScriptsURL + "General.js' "
       + "language='JavaScript' "
       + "onreadystatechange='doStuffOnLoadGeneral();'"
       + ">" );
document.getElementsByTagName("head")[0].appendChild(oScriptGeneral);
//

Once this has all executed, the two JavaScript files have been injected into the Form dynamically by the Form OnLoad event, and control has been passed to the CampaignOnLoad routine in Campaign.js.

From this point onwards, any changes made to the OnLoad logic can be coded in Campaign.js, and a mere refresh of the Form will cause the latest code to be executed – no need for multiple mouse-clicks and buttons anymore, Productivity is now the name of the game.

Watch the next post for error handling in this context.