GOAL: Simplify referencing JavaScript libraries from CRM forms for code-centric developer types like me.

I have always been a fan of “code beside” JavaScript files that contain all my main code for a corresponding HTML page.  For example, if I have a page called hello.htm, then I will have a file called hello.htm.js that is the main code file for that page.  One of the things I have always been a bit frustrated with when using this approach is that all the JavaScript libraries my hello.htm.js page uses are actually referenced in the HTML page.  This leads to a lot of switching back and forth between the files when you need to add script references.  It also becomes a burden when you are reviewing code you haven’t worked with in a while.  You inevitably have to switch to the hello.htm page to familiarize yourself with what other js files the page references.  My brain has challenges with this context switch.  Coming from a .NET development background, I am used to namespaces at the top of my C# files that help me with this.  I’ve recently gotten hip to RequireJS which is a library that makes it really easy to add JavaScript references to a page right from JavaScript.  While you can technically do this without RequireJS, the library wraps the verbose code and all the cross browser nuances plus adds some nice features.  Check it out!

Ok, now to the CRM 2011 context…

I’ve always found it a bit cumbersome to have to “point and click” my way to adding JavaScript references to a CRM 2011 form.  I totally get that this is useful for building reusable JavaScript libraries that non-devs can use / configure by passing parameters.  However, my mode of operation is usually to have a single JavaScript web resource for the form that programmatically wires up events, etc.  Sound familiar?  I usually think of it as my “code beside” or “View Model” for the form.  Since I often have reusable libraries I want to reference from my primary JavaScript web resource, it would be nice not to have to “point and click” my way to adding them.  Thereby having a single JavaScript file that I can read top to bottom to understand everything that’s going on in the form.  Here’s how I do it…

Deploy RequireJS as a web resource and add it to your form, then add another web resource to the form that contains your “View Model” for the form:

In my case the “View Model” resource is called dkdt_/scripts/requirejsttest.js.  Make sure you’ve wired up the form to call the starting function in your web resource.  In my case the function is called dkdt_OnLoad.  Here’s the code for the requirejstest.js web resource:

function dkdt_OnLoad() {

    var serverUrl = Xrm.Page.context.getServerUrl();

    var requiredScript = serverUrl + "/WebResources/dkdt_/scripts/somerequiredscript.js";

    require([requiredScript], function (m) {      

        dkdt_ConfirmThisLoaded();

    });

}

The source code for the somerequiredscript.js web resource looks like:

function dkdt_ConfirmThisLoaded() {

    alert("The required script loaded");

}

This may seem straightforward, but figuring out what to pass to the require() function took a little investigation.  When using IE10s “F12 Developer Tools,” I noticed that the JavaScript web resources loaded into the form are children of a page called edit.aspx which lives under [serverUrl]/userdefined:

The only consistent way I could figure out to tell RequireJS to load the right web resource was to build the full url programmatically.  If you know of a better way, let me know in the comments. 

The way I use this approach is that all of my forms always have a “point and click” reference to require.js and the main JavaScript web resource for the form (requirejsttest.js in this example).  I tend to make the initial function the same for every form as a convention (dkdt_OnLoad in this example).  Everything else, including event wire up and additional JavaScript file references are done in the main web resource of the form.  This gives me a single file to read and understand what’s going on in the form, including what additional JavaScript web resources the code depends on without having to “point and click” my way to finding out.

@devkeydet