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.

Advertisements

5 responses to “Reuse: Dynamically Injecting JavaScript into CRM Forms

  1. Thank you for the great article. This will save me many hours.

  2. Hi Paul,

    I tried to leave a comment with a sneaker way to achieve what you’re trying to do here, but WordPress appears to dislike embedded JavaScript in comments.

    If you flick me a quick email, I’ll mail you my original comment + code.

  3. Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  4. Hi,

    everithing is ok for onload event, but it doesn’t work for onsave event on the form and onchange event on the field. Any suggestions?
    Thanks
    Maria

    • Have you added the “CampaignOnSave();” call to the Form’s OnSave event?

      I generally keep all my javascript in this single file, then just make sure that the code is called from the form. Fo an onchange event, just call “MyFieldOnChange();” form the field’s OnChange event, then add a function to the javascript file:

      MyFieldOnChange = function() { alert(“Hallo”) ; }

      Should work fine, let me know if you are still stuck…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s