Including custom JavaScript files in MSCRM 3.0

Posted on February 18th, 2006 Mitch Milam  Print 7 comments

The more you get into MSCRM development, the more you will probably realize that you are writing quite a bit of JavaScript to control various aspects of the CRM Client experience.  As most programmers find, the more code you write, the more you write code.  You also start developing a code library containing your most often used functions so that you don't have to rewrite them each time you need them.

In most programming languages, the concept of an Include File exists. Include files are usually referenced at the beginning of your source code file and are merely instructions to your compiler, interpreter, or whatever, to include the contents of that file within your program. 

This allows you to create a library of related sub-routines or functions that can be referenced from any number of other programs. Since you only have one copy of those routines, it cuts down on your maintenance requirements.

So how does any of this relate to MSCRM?

MSCRM version 3.0 gives you the ability to peform actions when the value of a form field changes – the OnChange Event.  This allows you to take action whenever a user changes a particular form.  Take a look at this example:

The OnChange events for both Price and Quantity contain the following JavaScript code to automatically add the two fields together:

crmForm.all.new_total.DataValue=
crmForm.all.new_price.DataValue*
crmForm.all.new_quantity.DataValue 

This is really not very much code and there are really only two fields involved so it's pretty easy to maintain.  But, what happens if you have five or ten fields to calculate. That really becomes work at that point, and it can create a maintenance nightmare as well.

You can solve this problem by putting the above JavaScript into a file on disk and include that file in the Form's OnLoad event.  Here's how it will work:

Create the .js file:

Open Notepad and copy the following Javascript into it

function OrderFormAdd()
{
   crmForm.all.new_total.DataValue=
   crmForm.all.new_price.DataValue*
   crmForm.all.new_quantity.DataValue 
}

Save this file as myfunctions.js and place it in a directory below your MSCRM web directory called myscripts.

Reference your .js file:

In the OnLoad event of your Form, include the following code: 

var script = document.createElement('script');
script.language = 'javascript';
script.src = '/myscripts/myfunctions.js';
document.getElementsByTagName('head')[0].appendChild(script);

Update the OnChange Events:

Now we need to update the OnChange events for the Price and Quantity fields. Remove the existing JavaScript and replace it with the following:

OrderFormAdd();

Save and publish your form and you are done.  From now on, any time you need to modify the calculation on the Order Form, just edit the myfunctions.js file. No additional work needs to be done to the CRM Form.

Note:

• If you make a change to the .js file and you don't see the change take effect, delete your browser's temporary Internet files and try it again. The client can cache the .js and it will be using the older copy instead of the newly updated master copy.

Using Included Functions in the Form OnLoad Event:

It was pointed out by "Alex" who wrote the actual JavaScript include code that it is possible to run into a timing issue because the include file has not yet finished appending to the CRM Form.  This is really only a problem if you need to access a function from your include file from within the OnLoad event.

To circumvent this issue, we need to wait for the script's state to change to "loaded" before any functions in the include file can be accessed:

var script = document.createElement('script');
script.language = 'javascript';
script.src = '/myscripts/myfunctions.js';
document.getElementsByTagName('head')[0].appendChild(script);

var f = function()
{
  if (event.srcElement.readyState == "loaded")
   SomeFunction(); // some function from MyFunctions.js
}

script.attachEvent("onreadystatechange", f);

Additional Notes:

This solution will not work if you have the CRM 3.0 Outlook Laptop Client deployed. This is because the Laptop client utilizes a local Web server and if physically disconnected from the main CRM web server, the JavaScript file will be unavailable and a script error on the page will result.

In addition, since the JavaScript file is not actually part of the CRM system, it is not replicated to the Laptop client during syncronization.

Michaeljon Miller has a post discussing CRM SDK access while offline.

References:

The JavaScript code for this article was taken from a newsgroup conversation between Ronald Lemmen and "Alex."  Please consult the original thread for context.

CRM Developer Newsgroup Post

Using the CRM SDK offline

Customization, Dynamics CRM, Unsupported

(2 votes, average: 4.50 out of 5)

 Loading ...

9,341 views