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 here
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)
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]( "1.gif")
clip_image004
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
clip_image006
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
clip_image008
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:
clip_image010
After:
clip_image012
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.
clip_image014
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
clip_image016
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
clip_image018
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
clip_image020
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
clip_image022
If we have a look at the CRM instance, there is actually a contact recorded created
clip_image024
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 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.
I have used this approach in many ways of the projects I have involved and saved me quite a big time to debug and test my code.
Just an example I did which is a HTML page to dynamically retrieve the auditable entities and generate the audit reports for all the records of these particular entities in the current CRM instance using XrmServiceToolkit and Metadata Retrieval. (Soap calls, CSS styling, etc) All these development works can be done locally in your visual studio.
clip_image026
Credit:
CSS styling is based on the great work of Darren Liu. You can find it at Codeplex http://crm2011templates.codeplex.com/
If any credits have not been mentioned, thanks very much for all the contributions to CRM community members. Big thanks from a learner (Me)
-------------------------------------------------------
Happy Coding,
Jaimie Ji
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 here
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)
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”
clip_image004
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
clip_image006
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
clip_image008
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:
clip_image010
After:
clip_image012
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.
clip_image014
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
clip_image016
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
clip_image018
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
clip_image020
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
clip_image022
If we have a look at the CRM instance, there is actually a contact recorded created
clip_image024
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 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.
I have used this approach in many ways of the projects I have involved and saved me quite a big time to debug and test my code.
Just an example I did which is a HTML page to dynamically retrieve the auditable entities and generate the audit reports for all the records of these particular entities in the current CRM instance using XrmServiceToolkit and Metadata Retrieval. (Soap calls, CSS styling, etc) All these development works can be done locally in your visual studio.
clip_image026
Credit:
CSS styling is based on the great work of Darren Liu. You can find it at Codeplex http://crm2011templates.codeplex.com/
If any credits have not been mentioned, thanks very much for all the contributions to CRM community members. Big thanks from a learner (Me)
-------------------------------------------------------
Happy Coding,
Jaimie Ji