How to use JQuery to insert image into Dynamics CRM 2011 form

Vincent Zhong, 13 January 2012

If you open any entity form in Dynamics CRM 2011, like the one below

You will see a very similar layout. However there will be a time when you may want to attach a photo to a record, like Account or Contact. In the next couple of blog posts, I will explore the best way to add a photo to the record.

The easiest way to add photo to the Dynamics CRM form is using JQuery. There are a couple of steps involved:

1. Make the JQuery library available to the form.

First of all, you need to download the JQuery library from its official website: http://docs.jquery.com/Downloading_jQuery

*

Then click on Settings -> Customizations -> Customize the system -> Web Resource. On the right main area, click “New” on the top to create a new Web Resource. Select Type as “Script (JScript)“ and upload the JQuery file you just downloaded. Then you need to open the Main Form of the Entity you want to customize, click Form Properties on the top, and add the JQuery Web Resource you just created to the Form Libraries section.

2. Write a JQuery function to modify the page element and add the photo/image using absolute URL.

3. Call the JQuery function when the form page loaded.

Open the Form Properties again, add the function name to the Event Handlers section.

Here is the end result.

In the next post, we will explore how to do this by using Silverlight component and read the photo from Note Attachment rather than an absolute URL.

* Image from http://docs.jquery.com/Downloading_jQuery