Don't waste time re-publishing JavaScript web resources during development
The new solution framework in Dynamics CRM 2011 is a fantastic addition to the Xrm platform – especially with the new Web Resources functionality. The ability to include JavaScript files rather than including the script in the form customisations makes the management of source code much easier.
This post shows a method that allows rapid changes to be made to the JavaScript code without the lengthy process of uploading the updated file and then re-publishing it. The key here is that whilst we are developing, we are going to use a 'stub' JavaScript web resource that simply bootstraps the actual JavaScript that we are working on from the file system.
When you are ready to publish your solution, you will replace the 'Stub' with the actual JavaScript file you have developed.
In this example we are creating JavaScript for the Contact Form.
1) Create 'ContactForm.js' file
///
if (typeof (Develop1) == "undefined")
{ Develop1= {}; }
Develop1.EntityForm = {
onLoad: function () {
var attribute = Xrm.Page.data.entity.attributes.get('salutation');
var delegate = function () {
Develop1.EntityForm.salutation_onchange(attribute);
};
attribute.addOnChange(delegate);
},
salutation_onchange: function(sender) {
alert(sender.getName());
}
}
This script simply provides an onload function that will be called from the form, and 'wires up' an event handler to the salutation onchange event. Notice that we don't need to add any messy script to the form event handlers in the CRM form designer anymore, we can do this programmatically.
I am going to store my script in the Dynamics CRM ISV folder whilst I work on it – however you can use any location accessible via a URL. The ISV folder is now deprecated and will be removed in future versions, but it is convenient since we can use relative paths to access it. Correspondingly save this file in a folder with the same name as your organisation underneath the ISV folder. E.g. ISV\<YourOrgName>\ContactForm.js.
To ease development, you can add this to a Visual Studio project using a File Link.
2) Create the 'ContactForm_stub.js'
var scriptHtml = '<script language="javascript" src="\/ISV\/' + Xrm.Page.context.getOrgUniqueName() + '\/contactForm.js"><\/script>';
var scriptElement = document.createElement(scriptHtml);
document.documentElement.appendChild(scriptElement);
3) Upload the 'ContactFormstub.js' as a web resource
Inside your solution, upload the ContactFormstub.js.
Important: Name it as though you are uploading the actual JavaScript file since you will replace it before you export your solution.
4) Add reference to the contact form
Within the CRM Contact form designer, add a reference to the ContactForm.js web resource and add an onload event handler that calls the function:
Develop1.EntityForm.onLoad
5) Publish once, then test, edit, test, edit…
Publish your web resource and form customisations, and you'll find that you can edit the ContactForm.js file in the ISV folder with the effects happening immediately you refresh your contact form.
6) When you're done, before you export your solution
Now that you've got your JavaScript working, before you export your solution, you want to remove the dependency on that external file, so you can simply edit your ContactForm web resource and upload the external file, thus replacing the stub.
You will find that this greatly reduces the time it takes to author and debug your form JavaScript.