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!

1. How to customize the new CRM 2011 UR12 process
driven (Polaris) forms using JQuery and JavaScript
www.dynamic-crm.com

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.  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.  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.  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. www.dynamic-crm.com

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. www.dynamic-crm.com

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 the
function, you will need to ensure that the page is loaded and any related
scripts have executed.
www.dynamic-crm.com

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.  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. www.dynamic-crm.com

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.  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. www.dynamic-crm.com

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.  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.  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.  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