It is a second part of my blog www.mscrmshop.blogspot.com.au/2015/10/crm-soap-library-sdksoapjs-part-1.html. In this blog I will discuss the Visual Studio project structure for JavaScript(SOAP endpoints) projects. The sample project provided by Microsoft has the following structure.
![image]( "image")
All the code is contained in the folder _samples. There are 3 subfolders in that folders.
![image]( "image")
I got rid of the _sample folder. I have renames the min folder to libs as this folder also contained the jquery library. I have renamed the sampleCode to webresources and left the vsdoc as it is. I have deleted most of the sample files from this solution as I want to use this project as a project template. I have kept a few files from the sample solution to use as templates if required.
Here is a link to my project template.
Now when developers will starts a webresource project using soap endpoint. They will select a project type of “CRM SOAP JavaScript” project as shown in the screen shot.
![image]( "image")
By doing that you can have same folder structure for all the projects. The following screen shot display the structure of the new project created using the template.
![image]( "image")
![]()
All the code is contained in the folder _samples. There are 3 subfolders in that folders.
- min:
The folder contains the minified version of Sdk.soap.min.js, jquery_1.9.1.min.js and folders for actions, entities and messages. - sampleCode:
This is working folder where developers will write their html and JavaScript web resources. This folders contains 3 subfolders to organise the images, pages(html)and scripts. - vsdocThis folder contains all the files and folders as min folder but they are not minified. Libraries in this folder contains comments etc. for the developer. Script files from this folder will be used in sampleCode scripts to provide IntelliSense.
Project Template
I think development teams should use project templates if they are doing the similar works all the times. It will force the consistency to the project structure. I have changed the a few things around in the sample project and turn it into project template. My project structure looks like the following screen shot.
I got rid of the _sample folder. I have renames the min folder to libs as this folder also contained the jquery library. I have renamed the sampleCode to webresources and left the vsdoc as it is. I have deleted most of the sample files from this solution as I want to use this project as a project template. I have kept a few files from the sample solution to use as templates if required.
Here is a link to my project template.
Now when developers will starts a webresource project using soap endpoint. They will select a project type of “CRM SOAP JavaScript” project as shown in the screen shot.
By doing that you can have same folder structure for all the projects. The following screen shot display the structure of the new project created using the template.
Working with the files
libs folder
The following screen shot displays all the files and sub folders in libs folder. The most important thing to remember is to use the minified version of all the JavaScript files to reduce the size.![image]( "image")
the folder contains the Sdk.soap.min.js and jquery_1.9.1.min.js files
action folder contains all the custom action classes. The custom action will be created using Sdk.Soap.js Action Message Generator.
entities folder contains all the CRM entities classes. these classes will be used for early binding.
message folder contains all the other messages supported by the library. the library supports 202 messages. You can add and remove the messages required by your project.
vsdocs folder
This folder contains all the files and folders as in libs folder. The only difference is that the JavaScript files in this folders are not minified. These files will be used just for IntelliSense and won’t be uploaded into CRM. I have added a StartUp.htm and StartUp.js to the project template as starting webresources. You can modified them for your project or use as reference.webresources folder
This is the real working folder. This folder contain the following files and folders.![image]( "image")
images folder contains all the images used in the HTML web resources.
pages folder contains all the HTML websesources
scripts folder contains all the JavaScript files that will be called by the html webresources/ CRM forms.
- The following section displays the source code for StartUp.htm
1: <html>
2: <head>
3: <title>StartUp Page</title>
4: <script src="../../../ClientGlobalContext.js.aspx" type="text/javascript"></script>
5: <script src="../../libs/Sdk.Soap.min.js"></script>
6: <script src="../../libs/jquery_1.9.1.min.js"></script>
7: <script src="../../libs/entities/Sdk.Account.min.js"></script>
8: <script src="../scripts/StartUp.js"></script>
9: <!--<script src="../../libs/messages/Sdk.WhoAmI.min.js"></script>
10: <script src="../../libs/actions/Sdk.sample_SimpleAction.min.js"></script>-->
11: <script type="text/javascript">
12: "use strict";
13: document.onreadystatechange = function () {
14: if (document.readyState == "complete") {
15: }
16: }
17: function clearMessages() {
18: document.getElementById("messages").innerHTML = "";
19: }
20: function earlyBindingSample() {
21: clearMessages();
22: writeToPage("Starting 'Early Binding' Sample");
23: try {
24: startEarlyBindingSample();
25: }
26: catch (e) {
27: writeToPage(e.message);
28: }
29: }
30: </script>
31: <style type="text/css">
32: body
33: {
34: font-family: "Segoe UI";
35: }
36: </style>
37: </head>
38: <body>
39: <button onclick="earlyBindingSample()">"Early Binding" Sample</button>
40: <ol id="messages" />
41: </body>
42: </html>
- The script section highlighted in yellow lists all the JavaScript files required for this webresource. You can add the reference to your custom actions, entities and messages as required.
- Most of these files are from libs folder. Only the following 2 files are different
- ClientGlobalContext.js.aspx : This file will get the context for the webresource
- scripts/Sdk.Startup.js file: This file contains the startEarlyBindingSample() that StartUp.htm webresource will call.
The following code display the reference directive from the StartUp.js.
1: /// <reference path="../../vsdoc/Sdk.Soap.vsdoc.js" />
2: /// <reference path="../../vsdoc/entities/Sdk.Account.vsdoc.js" />
3: /// <reference path="../../vsdoc/jquery_1.9.1_vsdoc.js" />
- The above code is displaying the reference directive for java scripts. These directive are used to provide IntelliSense. You can read the following article to get detail information on JavaScript Intelligence.
https://msdn.microsoft.com/en-us/library/bb385682.aspx
- As you can see the code up has reference to “Sdk.Account.vsdoc.js”. It will add the IntelliSence for the account entity as shown in the screen shot below.
