Howto

HowTo: HTML/JS WebResources

We (developers) have a great feature in CRM 2011 release. If you want to give your CRM application new client side features or controls not available OOB and you want your solution to remain supported, you have to use HTML/JS webresources. This article describes some approaches, tricks and code snippets I found or developed while using HTML/JS webresources.

Embedding and passing parameters
To pass context of execution (entity and identifier or a record) or some custom parameters, you first have to define it in webresource configuration:

To parse and use the parameters in your webresource, you can use the following code:

Important Note: To make GetGlobalContext method available, you have to reference ClientGlobalContext.js.aspx in your code:

And here is one way passed parameters could be used:

To get the identifier or type of a record you can use the following code:

Obviously, if parameters.id equals null that means that user creates a record or you haven’t checked the ‘Pass record object-type code and unique identifier as parameters’ checkbox. So if you are sure that you have checked the checkbox and that the id is null, the webresource wil be executed in a context of create form.

If you added a custom parameter or parameters, you can access it using the following code:

If you use multiple parameters and you use the format “Parameter1=Value1&Parameter2=Value2”, the following code could help you in the parsing of parameters passed:

and here is usage of mentioned method:

UPD: Today, I got a brilliant suggestion from my friend and MVP Artem Grunin – try to use JSON format when you pass custom parameters. I tried it and here are the results I got:

Registration of custom parameters:

And usage in webresource code:

As you can see – that work perfectly!

Communication with caller window

If you need to communicate with caller window, you can use following code to get the “Xrm” object:

and then access  everything normally available with JavaScript code for the CRM form. Below is an example of accessing the field value:


Subscription to fields and form events

Sometimes you need to react on some events raised in CRM form like OnChange of field or OnSave of form. You can do it using the following code for OnChange:

The “context” parameter of a method can be used to get information about call context. Here is a short piece of code that demonstrates how the parameter can be used:

If you need to handle OnSave event, you can use the following code:

The “context” parameter is a standard execution context for the Save event used in standard CRM forms. You can use it to analyze Save mode or to cancel Save:

Tricks

Fixing the behavior of webresources for which the execution of logic for Create and Update forms differs (special thanks to Inogic for the idea, origin – http://inogic.com/blog/2014/08/update-html-on-form-save-button/)

Let’s assume that you have developed webresources for which the execution logic is different for the Create and Update form. You have opened a new form and, in this case, webresources worked properly (followed ‘Create Form’ logic). You clicked Save and expected that webresource would be reloaded and ‘Update Form’ logic would work. Unfortunately not. CRM doesn’t reload webresources in such scenarios. Add the following code to CRM Form Onload handler to help CRM reload webresource:

Restore of standard events (special thanks to Spectr, origin – http://axforum.info/forums/showthread.php?p=301306#post301306)

If you have referenced ClientGlobalContext.js.aspx you should be aware that this would cancel the onselectstart, contextmenu, and ondragstart events. If you want to restore those handlers, you can use following code during the onload of webresources:

General Conclusions

1. Try to use supported approaches. Otherwise, your code could stop working after installing the Updates

2. If you want to build complex and beautiful extensions, start learning (if you haven’t yet done it) JavaScript Frameworks. Here is what I use at the moment:

3 Comments on “HowTo: HTML/JS WebResources

  1. Hello Andrey! Thanks for the article.
    But I have some questions:
    1. So you’ve sent two parameters with the static values like “CustomParam1 = Value1”, but if I need to pas params dynamically ? Can you describe this method?
    2. What if I need to pass a rich text variable like XML content or Base64 string, how can I pass data in this case ?

    Thanks again for your work, and thanks in advance for answer on my question 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *