Hi All.

There are times when I discussed with my colleagues and friends about CRM 2011 JavaScript development and how I am doing it these days. In this post, I just want to share some experience which may make your life a little bit easier when developing some complex HTML web resource for CRM 2011 using Soap, Rest, Ajax calls, etc

NOTE: You can download the whole source from http://download-codeplex.sec.s-msft.com/Download?ProjectName=xrmservicetoolkit&DownloadId=646301

Tools required:

1. CRM 2011 on-premise installation on a server or on a virtualization environment (Windows 8 hyper-V, virtual box, VM player, etc)

2. Xrm Page Script Project Template: this can be found in the SDK: MicrosoftDynamicsCRM2011SDK\sdk\templates\xrm.pagescriptprojecttemplate. You will need to install this managed solution from the SDK to the CRM server. SDK should provide you enough details. Make sure you read the details about how to use this tool

3. VS 2010, VS 2012

4. JavaScript Libraries used: JSON2, JQuery, XrmServiceToolkit

CRM Environment:

CRM on-premise only (An actual development server, or a VM on your local PC). The current logged in user to the environment has access to CRM organisation we used

Debug/Development Case:

To start with a simple example, let us just say we could like to initialize a Soap call to create a new contact using an existing account id as the parent customer of the contact. Then we will retrieve the newly created contact and show an alert message that the contact has been created successfully in the system by showing@@ the full name of the contact we just created in the alert message.

Once you got all of the required tools, we can get this started. We first will a Xrm.Page Jscript Library Project named it as “XrmJavaScriptDevelopment”

1.gif

2.png

Step 1: Add JavaScript Libraries

Before that we may need to add some helper libraries we want to use for the development. In this example, let us add several libraries like JSON2, JQuery, XrmServiceToolkit, etc

As a personal preference, I have also added some sub folders under the “Scripts” folder

3.png

Step 2: Generate PageData.js from

There are two ways you can get a new PageData.js

1. Use the Xrm.Page data snapshot tool to generate a new page data (covered in the readme document for XrmJavaScriptDevelopment tool)

2. Manually modify the existing file (covered in this post)

Now open PageData.js in Visual Studio

4.gif

Because we are doing this in on-premise environment (I can only do this debugging in on-premise environment actually), the only things we actually need to change are OrgUniqueName and the ServerUrl (RU11 and before) or ClientUrl (RU12 and later). To make our example support all these rollups, you can change the line to the one showing below.

Before:

5.png

After:

6.png

Step 3: Modify TestPage.htm

Let us change the default TestPage.htm to a simple version for testing purpose of our incoming Soap/Rest call. The updated version will look like the following screenshot. Also remember to set the page as the start page in your project.

7.gif

Notice that we have added some JavaScript reference directly from our project. As a personal preference, I always like to refer the JavaScript libraries as the order they depend on each other. This small habit may save you sometime to have to apply load scripts when you update CRM to RU12 or have to modify the sequence of JavaScript libraries.

Step 4: Modify TestPage.js

This is the main JavaScript where we will have all the Soap/Rest call to CRM 2011. Let us modify the existing code and change it as the following screenshot to start with. Later on we will add our Soap logics

8.png

We added some reference here which will give you JavaScript IntelliSense support when developing JavaScript in Visual Studio. Let us continue and add our Soap logics here

9.gif

One thing to note here, because we changed the PageData.js to point to the “Vanilla” CRM instance, the Soap actually will create the records in the CRM instance.

Let us now put some breakpoints and start debugging our small code here

10.gif

Now you can actually debug / unit test our small Soap method in visual studio instead of….well publishing the web resource into CRM, and debug

11.gif

If we have a look at the CRM instance, there is actually a contact recorded created

12.gif

If anything is wrong with our Soap code, we can now actually change the code directly without repeating the process to publish and change our web resource and debug using IE developer tool, Firefox FireBug, Chrome development tools, Fiddler, etc

After you have passed code checking and JavaScript Unit Testing, you can actually publish all the JavaScript Libraries, HTML, CSS without too much change.

Obviously, the names of all these files have to be updated as their CRM name when uploading into CRM as web resources.

Summary

This is just the start of what you can do using this approach. You obviously can extend this example to a much complex level as how you want to do this.

I have used this approach in many ways of the projects I have involved and saved me quite a big time to develop, debug and test my code. You can also use this approach to develop a website, maybe even a windows 8 application consuming CRM data in the intranet environment (pure JS development).

I would love to hear the community who managed to use similar approach for a HTTPS or even online environment for CRM development or anything else you could think of.

Happy Coding,

Jaimie Ji

Last edited Mar 28, 2013 at 8:48 AM by jaimieji, version 7

Comments

CRM_Developer Jun 5, 2014 at 7:49 AM 
hi, I am getting the following error in alert:
Network Error.
What's the problem

Channard Jun 21, 2013 at 1:30 AM 
Fantastic, thank you!