In this recipe we will focus our attention on the most basic action that we do on a form. We will be looking at how to select a form element in Dynamics CRM using the jQuery library.
First off, we need to get a hold of the jQuery library and load it on our solution as a web resource. Go to http://www.jquery.com and grab the latest version of the library. When navigating to the that site, on the right-hand side of the home page you will see a box that gives you the options for downloading the library. Select the production version, and click on the Download(jQuery); button:
A lot of resources on how to use this library are available starting from that page. If you are interested in using this library in your projects I strongly suggest you start from this location to learn more about how to use jQuery.
For this recipe you need access to a Dynamics CRM instance. Make sure you have at least the system customizer permission in this instance.
- Create a new blank solution
- Add the jQuery library to your solution as a web resource. I have set up the Provider with a prefix of
crm, and gave the library a name ofcrm_jquery. Upload the library file using the Upload File field on the web resource form.
- Add a new web resource of type JScript. Name it crm_jQuerySelect.
- Add a function named
jQuerySelect. For this example we want to select the form border for all contacts and change its color to yellow. The function will look similar to the following:function jQuerySelect() { $(".ms-crm-Form-Page-Main-cell").css("background-color","#FFFF00"); } - Open the Contact form for edit.
- In the form's properties, add to the Form Libraries the jQuery library and the web resource containing your function.
- On the
OnLoadevent of the form add thejQuerySelectfunction. - Save and Publish the form.
- Open a contact and observe the border color changed to yellow, as shown in the following screenshot:
While we have shown this functionality in a previous recipe, the purpose of this recipe is to demonstrate the fact that form elements are being selected using jQuery. The syntax used in the following line selects a specific html tag based on its class:
$(".ms-crm-Form-Page-Main-cell")You can easily determine the ID of a form element by using the developer tools in Internet Explorer.
Be careful when performing these selections, as not all elements can be visually modified in such way. The standard Dynamics CRM CSS definitions override in some instances your selection, or overlay an image over the element background, thus blocking you from seeing your customization. Using the developer tools, you can determine where such scenarios occur on a form.
- For additional details on jQuery syntax for form element selection see the Selectors section of the jQuery API at http://api.jquery.com/category/selectors/.