Dynamics 365 Javascript Best Practices

Avoid using unsupported methods

As a general rule, any function which is available through Xrm.Page should be considered as supported and rest are unsupported, if you are navigating the HTML DOM structure and using window.getElementById or even manipulating the innerHTML or outerHTML,These methods may work but because they are not supported you can’t expect that they will continue to work in future versions or update rollups of CRM.

Do not use jQuery for form script or commands

Microsoft do not recommend or support using jQuery for any pages within the application. This includes form scripts and ribbon commands

Recognize limitations for content delivery network (CDN) libraries

Content delivery network (CDN) JavaScript libraries provide many advantages for public websites. Because these libraries are hosted on the Internet, you do not need to create web resources that contain the content of the libraries. For Microsoft Dynamics 365 you should consider the following issues before you use a CDN JavaScript library.

• Users of the Microsoft Dynamics 365 for Microsoft Office Outlook with Offline Access client have the capability to work with no Internet connection while working offline. If you are depending on an Internet connection for your JavaScript libraries, your code will fail.
• Some organizations will restrict Internet access for employees. Unless they configure the network to allow access to the CDN library sites, your code may fail for those organizations.

Do not access the DOM

The Microsoft Dynamics CRM development team reserves the right to change how pages are composed, including the ID values for elements, so using the Xrm.Page object model protects your code from changes in how pages are implemented.

Use asynchronous data access methods

When you access data by using the Microsoft Dynamics 365 web services, always use an XmlHttpRequest that is configured to execute asynchronously. The reason is that the browser operates on a single thread. If that thread is being used to execute a long-running process synchronously the browser will stop responding.

Keep your libraries as small as possible

JavaScript libraries are stored in web resources and requested by the form each time a form is loaded.  This means that each time the form for a record is opened every JavaScript library tied to that form is downloaded from CRM’s web resource table.  Keep your libraries as simple and as clean as possible. This will increase performance and improve maintainability.

Keep Common utility file to address the common functions

Keep utility file that can be used to write down all the utility functions that would be used across all entities and custom HTML web resources. A classic example would be something like – getUserRoles(). So instead of this you can do something like this.

Create a webresource named myOrg.Utilities.js then you can define the methods in the file like below.

if (typeof (myOrg) == "undefined") {
   myOrg = { __namespace: true };
}

myOrg.Utilities = {
    _getUserInfo: function(){},

   //Other common functions

}

You can then include the webresource wherever you need. To call the method of the file, you would need to use the fully qualified name as

Var isAdmin = myOrg.Utilities._getUserInfo();

Keep separate scripts for forms and ribbon functions for each entity

For example take account entity as an example keep two sets of scripts for easy identifying one for form events and ribbon events.

Account.Form.js – This can be the script for all your form on-load, on-save and on-change events that you register for the form. So if there is any error you are getting during on save, on load and onchange of the form, you can be rest assured that the origin you can trace from this file.

Account.Ribbon.js – This can be very useful. If you place all the custom ribbon button event handler in this file, you no longer need to check the ribbon diff xml to find out which file the ribbon event handler is located in.

for opportunity.form.js

if (typeof (myOrg) == "undefined") {
   myOrg = { __namespace: true };
}

if (typeof (myOrg.Opportunity) == "undefined") {
   myOrg.Opportunity = { __namespace: true };
}

myOrg.Opportunity.Form= {
   _Load: function(){},

   _Save: function(){}

}

Namespace your library names

Associate each of your functions with a JavaScript object to create a kind of namespace to use when you call your functions, as shown in the following example.

//If the MyUniqueName namespace object isn’t defined, create it.

if (typeof (MyUniqueName) == "undefined")

 { MyUniqueName = {}; }

  // Create Namespace container for functions in this library;

  MyUniqueName.MyFunctions = {

   performMyAction: function(){

   // Code to perform your action.

   //Call another function in your library

   this.anotherAction();

  },

  anotherAction: function(){

   // Code in another function

  }

};

Then when you use your function you can specify the full name. The following example shows this.

MyUniqueName.MyFunctions.performMyAction();