How to customize the new CRM 2011 UR12 process driven (Polaris) forms using JQuery and JavaScript                         ...
   Before its release, there was certainly plenty of    buzz surrounding Update Rollup 12 for Microsoft    Dynamics CRM 2...
   So not being one to get easily discouraged, I set out on a    mission to ensure that I could add my beloved client sid...
   Now, if you are still reading this then you are obviously a bold    and daring individual or possibly just faced with ...
   Obviously we want to ensure that we have the proper    markup in our document, html, head, title etc. Now let’s    get...
www.dynamic-crm.com
    Between the opening and closing script tags, we will create our function.     Since CRM will add our web resource wit...
www.dynamic-crm.com
   The final step is to call our function. Typically to     set the value of the budget amount field to     $100,000.00 t...
   Using JQuery, we can encapsulate the call to    our function with the window load event as    follows:     But wait! T...
   In the next slide is an example of my final HTML    page.   I am calling the function twice, once to set the    budge...
www.dynamic-crm.com
   Now we can add this page as a web resource in    CRM. Navigate to your Settings -> Customizations    then click on Cus...
   The Final step is to add the newly created web    resource to the new form. From the form editor of the    target form...
www.dynamic-crm.com
   That’s all there is to it! Simply save, publish and close    (you may also want to clear out your browsers cache).   ...
   Would you like to customize MS Dynamics CRM    2011 forms without having to read, write, or debug    code?   Oh, and ...
   Script Author is Dynamic-CRM’s javascript    generator that generates scripts in formatted,    readable code for MS Dy...
   Download your FREE version of Script Author.   When you are ready to push your customizations    to your CRM environm...
Upcoming SlideShare
Loading in...5
×

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

2,675

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!

Published in: Self Improvement
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,675
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. How to customize the new CRM 2011 UR12 process driven (Polaris) forms using JQuery and JavaScript www.dynamic-crm.com
  2. 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. www.dynamic-crm.com
  3. 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. www.dynamic-crm.com
  4. 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. www.dynamic-crm.com
  5. 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: www.dynamic-crm.com
  6. 6. www.dynamic-crm.com
  7. 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. www.dynamic-crm.com
  8. 8. www.dynamic-crm.com
  9. 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. www.dynamic-crm.com
  10. 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. www.dynamic-crm.com
  11. 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). www.dynamic-crm.com
  12. 12. www.dynamic-crm.com
  13. 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. www.dynamic-crm.com
  14. 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. www.dynamic-crm.com
  15. 15. www.dynamic-crm.com
  16. 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). www.dynamic-crm.com
  17. 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! www.dynamic-crm.com
  18. 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! www.dynamic-crm.com
  19. 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! www.dynamic-crm.com

×