Load Webresources Into Another Webresource in Dynamics CRM

By | September 19, 2017
QualTech Custom Development for Dynamics 365 | QualTech360Dynamics

How to load a Javascript webresource into another webresource Javascript in Dynamics CRM

As you know CRM customizations for the most part consist of Javascript added to the entities’ forms which help to enhance or adapt the out of the box functionality to the specific business processes of any business.

QualTech Dynamics 365 Custom Development Services | QualTech360DevelopmentIn our case and for what I know most of the organizations customizing CRM keep these scripts organized in Javascript files by functionality. For example in our case we keep functionality common to most of the forms in a file named Common.js and then we keep the scripts for each of the entities in files named by entity. For example the scripts used in the Account entity would go into the Account.js Javascript file.

To facilitate development we setup our development environments in a way which allows us to do most of the coding and testing in Visual Studio in our local machines.

The Visual Studio solution provided with this article demonstrates not just the loading of the webresource but is also configured in a way which allows you to test the process in your development environment and later on deploy it in your crm lab.

Setup Visual Studio for testing crm scripting

QualTech Dynamics 365 Custom Development Services | QualTech360DevelopmentTo make it easier let’s follow the numbers on the picture to the right.

Under the section 1 we have the folder CRM.SDK. The name is self explanatory. Here we have the Javascript files that in this case provide for intellisense for the crm Javascript SDK. This makes it easier to identify the functions available and speeds up development on one hand. On the other hand it allows us to test our custom Javascript in Visual Studio when we run our custom code in a test html page.

In our case our test html page is called CrmTest.html.

You can download these tools from this Google Git repository.

The section 2 of the picture shows the folder CrmScripts. This is where I keep the custom Javascript files containing the the functionality I’m building for crm. These are the script files that will be uploaded into crm’s webresources. These are also the script files we need to debug and test in Visual Studio to make sure the functionality we have built is doing what we expect it to do.

The “reference” statement in section 3 allows for intellisense using your own custom Javascript files.QualTech CRM Customer Development Services | QualTech360Dynamics

In the next section it’s where we load our custom Javascript file containing the functionality we want to use. The script file QualTech.CRM.Test.js has the code we are testing. The script in this file uses functionality built in the QualTech.CRM.Common.js as you can see in section 5. To use the functionality built in the common Javascript file though we need to it load into this file first and that’s what we are doing in section 4.

/*

* load resource file

*/

//var JScriptWebResourceUrl = “../WebResources/new_QualTech.CRM.Common.js”;

debugger;

var JScriptWebResourceUrl = “/Scripts/CrmScripts/QualTech.CRM.Common.js”;

var xmlHttp = new XMLHttpRequest();

xmlHttp.open(“GET”, JScriptWebResourceUrl, false);

xmlHttp.send();

eval(xmlHttp.responseText);

You see the variable JScriptWebResourceUrl defined in two different places. The line 7 commented out and line 9. This allows me to load the file from Visual Studio when I’m debugging the functionality on my development environment. Once I’m ready to upload the files into crm I comment out line 9 and uncomment line 7. If you look at the picture the difference is the path to the file. Once the files are uploaded into crm the Javascript file is loaded from “../Webresources/new_QualTech.CRM.Common.js”. The suffix new_ is added by crm when the file is uploaded and named inside crm.

QualTech Dynamics 365 Custom Development | QualTech360DevelopmentThe final item I bring to your attention is the statement “debugger;”. If you add this statement to your Javascript code it will force the code execution to pause when you run your test page in debug mode.

The custom script files in Dynamics 365

When we are providing custom development for Dynamics 365 we follow pretty much these same steps as described in this article. It allows us to develop and test the custom functionality completely in our development environment and crm lab before deploying it in the customer’s environment.

The picture above shows the two files we created after uploaded into crm’s web resources. You need to upload these files into your Dynamics 365 lab by selecting Settings>Customize the System. Select Web Resources and click the New button to add the files QualTech.CRM.Common.js and QualTech.CRM.Test.js. Click the Save button and Publish to publish the changes.QualTech Dynamics 365 Custom Development Services | QualTech360Development

Now comes the time to test our scripts in a crm form and make sure they do what we expect. Because we are just testing the scripts in our lab I just went ahead and set them up in the Account form. Go ahead and add the QualTech.CRM.Test Javascript file to the form libraries section. On the bottom section we tell the Account form which function we want to call from the script file in the OnLoad event of the form.

QualTech Dynamics 365 Custom Development Services | QualTech360DynamicsOnce these steps have been completed go ahead and click OK. On the button ribbon at the top click Save and Publish to publish the changes to crm.

To test the changes you now need to open the Account form.

From the top menu select the Sales tile and the Account option. Once the Account grid opens click the New button and you should now see the Hello dialog displayed on the form.

If you enable the development tools in your browser you should also be able to debug your Javascript while executing in the crm form as shown in the picture to the left.

As always I hope you find this article useful. If you have any comments please do so on the article or contact us at support@qualtechsoftware.com with any questions.

QualTech360Care QualTech360Devlopment QualTech360DotNet QualTech360Dynamics

 

Leave a Reply