Form Scripting in CRM 2011

The ability to insert Javascript into Client-side Events was one of the most common ways of extending MSCRM’s functionality, allowing bespoke logic to be implemented with a small amount of development effort. This largely acted as mid-way development between Functional Customisation and more Technical Development for Server-side Plugins and Custom Workflow Actions.

However this ability to add Javascript was restricted in not being able to easily use Include Statements to incorporate Function Libraries containing common methods that the scripting could make use of across the solution – and this in turn gave rise to larger streams of Javascript on events, which could make for some unmanageable coding. (and indeed occasionally some of this, Copy and Paste Programming)

The Designers of CRM 2011 have clearly given thought to this problem and incorporated a system for attaching Javascript Libraries into CRM as Web Resources that individual CRM Events (such as Account onLoad or a particular field’s onChange) can invoke functions from.

This concept of having a Javascript Library is one that I have been advocating for a few years as way of encouraging MSCRM Developers to include their javascript files into a Visual Studio Project such that we could manage version control and source control – CRM 2011 is a big step forward to making this mandatory for including almost any Javascript in a project. This does give a natural downside in making the process for incorporating Javascript slightly more complex for people working with MSCRM, and particularly training Clients on the SDK, but this looks to be a trade-off that is common across CRM 2011 as the application comes of age.

To look at this in practise, the following steps show how to incorporate a simple helloWorld style method into the onLoad event of an Account in CRM 2011.

(1) First of all – we customise the entity in question to bring up Form Customisation.

Account Customisation - Form

Customising the Account entity form in CRM 2011

(2) Clicking Form Properties then opens a window (similar to V3 and V4) that allows Javascript to be added to the entity.

Form Scripting in CRM 2011 - 1

Customising Form Events for the Account Entity in CRM 2011

(3) From here we can either attach a Web Resource containing Javascript functions to the Account entity, or create a new Web Resource from scratch.

Form Scripting in 2011 - 2

Creating a new Javascript Web Resource from the Account Form that can then be used to hold Script Functions for events in the Account Form to invoke

(4) Typically here we would upload an existing JS file to import developed Javascript into the entity’s events – however we can also use the Text Editor button to amend or insert new Javascript directly into the Web Resource. This mimics the current method in CRM 3 and 4.

Form Scripting in CRM 2011 - 3

Directly developing the Javascript function code behind the Web Resource

(5) With the function developed within the Web Resource, and the Web Resource saved and attached to the entity within Form Properties – we can then attach the function to a particular event within the entity.

Form Scripting in CRM 2011 - 4

Attaching the helloWorld Javascript function within the Web Resource to the Account's onLoad Event with parameter

(6) This then gives us the Form Properties of the entity listing the Web Resource(s) in use with the entity, and the events that are invoking those functions:

Form Scripting in CRM 2011 - 5

The Form Properties for the Account entity listing the newly created Web Resource and Events

(7) With those steps done, we can preview the altered Account Form with the events added to see how the Web Resource script affects the running of the Account Form.

Hello World Alert

Resulting simple Hello World pop-up box alert on load of the Account Form

This gives us a simple piece of Javascript injected into CRM 2011 via a new Web Resource, and this concept of the Web Resource illustrates the change from CRM 4 in that to affect this change both the Account Form and the Web Resource must be published as two separate components before the end result will be affected to the users of CRM. In this, we can publish out code changes via the Web Resource without changing the Account Form and vice versa.

As well as the fact that we could publish this helloWorld function out to other events in CRM (such as field onChange events or other entity’s onLoad events) by simply invoking the same function and so can avoid duplicating the actual script, as we would have had to in CRM 3 or 4.

From a development management perspective, this means we can then say goodbye to managing Javascript files for each MSCRM Event in the fashion of the Visual Studio below and instead manage files of Javascript Functions that can be invoked against a variety of MSCRM Events.

Visual Studio Management of Javascript code for CRM 4 Project

Using Visual Studio to manage the Javascript for a CRM 4 Project where the Javascript code files are tied directly to MSCRM Events

Which gives us a much more structured method of managing our script files that separates out Entity Customisation from the underlying Script Functions – even if at the cost of getting accustomed to the change and appreciating the slight rise in complexity.

For further reading on using Web Resources for Form Scripting in CRM 2011 and how this now allows us to include additional Javascript libraries such as jQuery, the later post in this blog may be useful.

Advertisements
This entry was posted in CRM 2011, JavaScript, MSCRM and tagged , , , . Bookmark the permalink.

23 Responses to Form Scripting in CRM 2011

  1. Pingback: CRM 2011 | CRM Consultancy Blog

  2. Excellent article by Ayaz Ahmad (MVP) on a very similar theme about the changes to how CRM 2011 will allow us to manage Javascript.

    http://ayazahmad.wordpress.com/2010/09/25/javascript-libraries-in-microsoft-dynamics-crm-2011/

  3. Pingback: Tweets that mention Form Scripting in CRM 2011 | CRM Consultancy Blog -- Topsy.com

  4. Pingback: Did you know, Dynamics CRM & xRM #4 « North 52

  5. Stian says:

    Great article.

    I have one question though: do you know if there is any way to switch between multiple forms runtime (i.e. JScript)?

  6. Pingback: Top 10 CRM 2011 Customization Tutorials - Customer Effective Blog - CRM Technical Blogs - Microsoft Dynamics Community

  7. Pingback: CRM 2011 – JScript Basics – Hello World « Crm Business

  8. Pingback: Overview CRM 2011 | Onestopdynamics

  9. Mitch says:

    I feel like I’ve taken a huge step backwards due to the new formated code. I followed the steps here exactly and I still receive an error message every time I try to run this simple of code.

  10. Mitch says:

    Thanks for the resources. After posting this, I had one of those “Is the computer turned on moments.”
    Since then, I have been able to get various pieces of code to work. I keep forgetting to encapsulate the code into specific functions to run and also referencing the fields at the onset in the form properties.

  11. Sigfredo Malave says:

    I did the same in my form and when previewing it, I receive a error on page. Does anybody know how I fix it ?

  12. Andrey says:

    I also receive the following:
    Error: the value of the property’ helloWorld’ is null or undefined, not a Function object

  13. Hi Andery, best bet is to make sure that the Web Resource containing the helloWorld function is attached with the Entity Form that you are trying to use it within – that and remember that the function names are case sensitive.

    If you can – upload some screen shots via SkyDrive or Dropbox of how you are attaching the Web Resource to the Form, the Web Resource and how you are invoking the function from an Event in CRM and I’ll take a look.

  14. Hosk says:

    excellent blog post, keep up the good work.

    I think the new javascript is much more logical once you have got your head around it

  15. finisterre says:

    So I’m being dumb, but where and how are you passing the string ‘Earthscape’ to the script? Thanks.

    • When you add a Javascript function to an event in CRM 2011 (step 5 in this blog post) you specify the name of the function and the function parameters separately in the Handler Properties form.

      The function name in this case being ‘helloWorld’ and the single parameter passed in is ‘crmForm.all.name.DataValue’ which is the name of the Account – in this case ‘Earthscape’ (this could just as easily be a fixed value, say “My passed in parameter” rather than a CRM field value). Is quite tricky to describe in words but hope that helps.

      • finisterre says:

        Ah, thanks. I didn’t realise it was the name of the Account. I’ve just added my first ever ‘Hello World’ script to my Opportunity page, so I’ll hopefully be on to more advanced stuff soon.

  16. yao says:

    Thanks, great blog. I’ve a question though, how to load to another form based on a value of a field in current form? The 2 forms are in same entity, and they both have a field called “form number”. I tried Xrm.Page.ui.formSelector.items.get(1).navigate(); , but the ribbon is disabled once the form load to another. Any ideas?

  17. Ben Hosking says:

    great blog post, thanks for taking the time to write it

  18. Marta says:

    Awesome! Its actually remarkable piece of writing,
    I have got much clear idea regarding from this piece of writing.

  19. salah says:

    nice article…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s