Monday 18 March 2013

Microsoft Dynamics CRM 2011 and Microsoft Dynamics CRM Online - Image (PNG, JPG, GIF, ICO) Web Resources

Web resources are a great step forward and were introduced in Microsoft Dynamics CRM version 2011.

Web resources are a great way to act as a container. Web resource can store a piece of JScript code, image, etc.

Web resources are virtual files which are always stored in the Dynamics CRM 2011 database. This is beneficial as we don't have to worry about the physical files and their locations.

Web resources have a unique path and can be accessed through that URL. This is beneficial as we can use the URL in our code.

There are the following kinds of web resources:
  • JScript
  • XML
  • XSL
  • Image (types are ICO, PNG, JPG, GIF)
  • HTML
  • CSS
  • Data
  • Silverlight

The 3 most widely used types are JScript, HTML and Image. Read my blog for more information on Script (JScript) Web Resources.

In this blog I will show how to create and use an image web resource.

Image web resources are the container for the images in ICO, PNG, JPG or GIF format. Image web resources can be used for:
  • Custom Entity Icons
  • Display images on the Entity Forms
  • Icons for Custom Ribbon Buttons
  • Icons for Site Map
In this blog I will create an Image web resource to store a JPG image. I will include this image on an entity form.

1) I have an entity called "Movies". I have few movie records.

"Movies" Entity and Records
"Movies" Entity and Records

2) In the movie entity record, I want to place an image on top of the form. This image will be the same for every movie entity record. Below I have shown the area where I would be displaying the image.

Movie Record "Pirates of the Caribbean: On Stranger Tides"
Movie Record "Pirates of the Caribbean: On Stranger Tides"
3) I have an image which I would like to display on every form.

Image Displayed on Every Movie Form
Image to be Displayed on Every Movie Form
4) I will create a web resource. I will go to my "Movies" solution.

"Movies" Solution
"Movies" Solution
5) I will go to the "Web Resources" component inside the solution. 

"Web Resource" component inside the Solution
"Web Resources" component inside the Solution "Movies"
6) I will create a new web resource called "Movies Header Image". I have selected the "Type" as "JPG format". This means this web resource is of type image and format is JPG. Click "Save".

Movies Header Image Web Resource
Movies Header Image Web Resource
7) The web resource is created. There is a unique URL created for this web resource. This means the image can be accessed through this web resource URL.

By creating an image web resource, we are making sure that this image is available to Dynamics CRM 2011 for use.

The URL created here is:
http://crm2011:5555/AshishMahajan/WebResources/new_Movies.HeaderImage.

Movies Header Image Web Resource Created
Movies Header Image Web Resource Created
8) Publish this web resource. We need to publish the web resource to make it available. After publishing I can start using the web resource in my "Movies" entity form.

Publish Web Resource
Publish Web Resource
9) I will go to "Movies" entity form and insert this web resource. The "Movies" entity is under the Entities component in the solution.

Movie Entity in the Solution
Movie Entity in the Solution
10) Open the main information form for the "Movies" entity.

Open the Main Information Form for the "Movies" Entity
Open the Main Information Form for the "Movies" Entity
11) Click on the "Insert" tab on the form. Here we have the option to add a "Web Resource". Click on the ribbon button "Web Resource".

Insert Web Resource
Insert Web Resource
12) I have entered the following properties for this web resource. I have selected the image web resource; I created above in the field "Web resource". Click "OK".

Web Resource Properties
Web Resource Properties
13) This will place a control at the end of the section (which is selected).

Web Resource Control Created
Web Resource Control Created
14) Since I want to display this control on the top, so I will drag it to the top of "Movie Name" field.

Go to "Home" tab. Click "Save and Close".

Drag the Web Resource Control to the Top of Movie Name Field
Drag the Web Resource Control to the Top of Movie Name Field
15) Publish changes to the "Movie" entity.

Publish the Movie Entity
Publish the Movie Entity
16) The web resource will be displayed on all the "Movie" entity records. Below, shown, are 3 movie record examples displaying this image.

Movie - Pirates of the Caribbean On Stranger Tides
Movie - Pirates of the Caribbean On Stranger Tides
Movie - Skyfall
Movie - Skyfall
Movie - The World Is Not Enough
Movie - The World Is Not Enough
I have used this blog to create and display an image web resource on an entity form. You can very well display it as a custom ribbon button icon or a site map icon or a custom entity icon.


I hope this blog about 'Microsoft Dynamics CRM 2011 and Microsoft Dynamics CRM Online - Image (PNG, JPG, GIF, ICO) Web Resources' was informative. Please feel free to leave your comments.

9 comments:

  1. Thanks for sharing this information in very detail.
    Dynamics CRM

    ReplyDelete
  2. Thats simple :) but how do you change the image for each film? For example, lets say we wanted to display an age classification image against each film?

    ReplyDelete
    Replies
    1. Hi,

      You will need to change the image through JavaScript web resource.

      I haven't written a dedicated blog on this, but you can get some idea through one of my blogs "Microsoft Dynamics CRM 2011 and Microsoft Dynamics CRM Online - Get the Form Control ID ":

      http://ashishmahajancrm.blogspot.com.au/2013/03/microsoft-dynamics-crm-2011-and_14.html

      Delete
  3. Hi! Your blog is extremely helpful. I am a consultant for Dynamics CRM and your blog has given me tons of ideas, thanks!

    ReplyDelete
  4. Thanks Noor Jehan, I am glad my post was helpful. Have fun with Microsoft Dynamics CRM.

    ReplyDelete
  5. Hi Ashish - Thanks for this post, I found it through the Dynamics community posting. I was wondering, though, if I wanted to have this type of header image triggered by a related field, is that possible?

    For instance, if I wanted very important accounts to display a header image (such as VIP!) but I wanted it triggered when the account type was set as 'VIP' through the drop down, then would the system be able to recognize it using that means without complicated coding?

    I'm a relative novice and didn't know if something like this could be done with limited skill or if it requires a more advanced development through SDK... ( hopefully not :/ )

    ReplyDelete
  6. Hello,

    How i can use the webresource for a KB Article?The idea is to insert images in the KB article and it seems that OOB there is no chance.

    Thanks

    ReplyDelete