Your SlideShare is downloading. ×
CRM 2011 JavaScript: Learn how to customize the new CRM 2011 UR12 process driven (Polaris) forms using JQuery and JavaScript
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CRM 2011 JavaScript: Learn how to customize the new CRM 2011 UR12 process driven (Polaris) forms using JQuery and JavaScript


Published on

Learn how to customize the new CRM 2011 UR12 process driven (Polaris) forms using JQuery and JavaScript in this video. Visit the blog for sample code as well!

Learn how to customize the new CRM 2011 UR12 process driven (Polaris) forms using JQuery and JavaScript in this video. Visit the blog for sample code as well!

Published in: Self Improvement
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. How to customize the new CRM 2011 UR12 process driven (Polaris) forms using JQuery and JavaScript
  • 2.  Before its release, there was certainly plenty of buzz surrounding Update Rollup 12 for Microsoft Dynamics CRM 2011, especially the new process driven UI. Unfortunately, if you plan on leveraging the new forms, one of the biggest drawbacks is the lack of support for form events such as OnLoad, OnChange, and OnSave.
  • 3.  So not being one to get easily discouraged, I set out on a mission to ensure that I could add my beloved client side scripting techniques to this rehabilitated user experience that Microsoft has bestowed upon me. So before I begin I must point out, that since there is no native support for scripting events related to the new forms, the approach outlined below is considered an unsupported customization. What this really means, is that any future updates from Microsoft could cause the execution of the scripts to halt. Additionally, this article assumes that you have a working knowledge of HTML and JQuery.
  • 4.  Now, if you are still reading this then you are obviously a bold and daring individual or possibly just faced with a business scenario that needs to be solved. The code in future slides will demonstrate how to set the value of a field on the form. Using similar techniques, this same approach could be used to handle any number of alterations to the form. The first thing you will need to do is create a HTML page to handle our script. The new forms, Dynamics CRM 2011 update, do not allow Javascript web resources to be directly inserted into the form. To get around this, we can use a HTML web resource. To create a new html page (which will eventually become our web resource), you can use any text editor. Simply create a new document and save it with the .htm extension.
  • 5.  Obviously we want to ensure that we have the proper markup in our document, html, head, title etc. Now let’s get to our scripting. If you dig into the code rendered by the new crm 2011 forms you will see that they rely on JQuery. This is great because using JQuery can save ourselves a ton of coding. Inside the head tag of our HTML document, we can add the same reference to JQuery that our CRM site uses which should be as follows:
  • 6.
  • 7.  Between the opening and closing script tags, we will create our function. Since CRM will add our web resource within an iframe, we know that we want to get a reference to the parent or more specifically the main content window that contains the web resource. The rest of the code is described as follows:1. Get any “DIV” elements within the main document that have a “data- attributename” attribute that contains a value equal to our target field.2. Loop through the results, because the field may exist on both the form as well as the process header.3. Initiate a user click, using CRM’s built in function from the Mscrm.Utilities library, on the child element. This will expose the target field and ensure that it is ready to accept data.4. Set the underlying text field (or textarea) with the desired value.
  • 8.
  • 9.  The final step is to call our function. Typically to set the value of the budget amount field to $100,000.00 this would just be:Now that would just be too good to be true, and it is. Before you can call thefunction, you will need to ensure that the page is loaded and any relatedscripts have executed.
  • 10.  Using JQuery, we can encapsulate the call to our function with the window load event as follows: But wait! This still might not ensure that everything is done, so to be absolutely sure you can wait a few more milliseconds using the setTimeout MS CRM JavaScript method.
  • 11.  In the next slide is an example of my final HTML page. I am calling the function twice, once to set the budget amount, and again to set the Current Situation field (both exist on my Opportunity form).
  • 12.
  • 13.  Now we can add this page as a web resource in CRM. Navigate to your Settings -> Customizations then click on Customize the System. This will launch the Components window. From here, select Web Resources in the left navigation. Click on New to launch the new web resource dialog. Enter the required information and select Web Page (HTML) as the Type. Browse to the file we created from the (Upload File) Choose File button. Then save and publish the web resource.
  • 14.  The Final step is to add the newly created web resource to the new form. From the form editor of the target form, click on the Insert tab then Web Resource from the ribbon control. Browse to the HTML web resource added above. Enter the required fields and ensure that Visible by default is not checked (this is so the actual HTML page does not display on the form, alternatively you can adjust the formatting to meet your needs) and Show this Web Resource in Read Optimized Form is checked.
  • 15.
  • 16.  That’s all there is to it! Simply save, publish and close (you may also want to clear out your browsers cache). Leveraging JQuery and a similar approach, you can bind events to the fields to simulate the OnChange events as well. Obviously there are different approaches that one could take to accomplish similar results. I am sure if one were to spend enough time digging through the JScript libraries included in CRM’s root directory, they could find some additional functions to further ease the customization process (Oh, and if that person is you, feel free to let us know what you find).
  • 17.  Would you like to customize MS Dynamics CRM 2011 forms without having to read, write, or debug code? Oh, and in about half the time it normally takes? Then…… Download “Script Author” for FREE!
  • 18.  Script Author is Dynamic-CRM’s javascript generator that generates scripts in formatted, readable code for MS Dynamics CRM 2011. Script Author works with existing customizations, there is no intricate syntax to memorize and it requires NO programming knowledge!
  • 19.  Download your FREE version of Script Author. When you are ready to push your customizations to your CRM environment, then purchase your license key(s)! Happy coding!