There can be many uses for web resources. This post will describe how to swap images using the HTML imagemap element in Microsoft Dynamics CRM 2011 forms using web resources.
Let’s first assume that you have some valid reason why you would want to swap images out first of all and you would like to expose this in CRM. You may have an image of a building that you would like to allow some click through functionality, possibly to drill into other images giving you “zoom-in” functionality like Bing Maps or Google Earth. For this post I will use one of my real world examples that I use in my demo’s. I work for Avanade and we have developed several assets around Microsoft Dynamics CRM. The Relationship Tree asset shows related data in a graphical manner. I really like to show this asset in my demo’s but as of April 2011 we had not released our Relationship Tree asset for CRM 2011 yet. So in order to show the asset in CRM 2011 I had to do a little “smoke and mirrors” with web resources to basically simulate how the asset works. I accomplish my “smoke and mirrors” by using 2 html files and 2 png images. All 4 files are loaded into Microsoft Dynamics CRM as web resources and then I tie them all together.
Steps to follow:
1. Create your images (I use 2 in this example)
2. Write your HTML pages (I use 2 in this example)
a. In my example, you can expand and collapse the data associated to someone under the Holdings node. There are 2 things to understand in order to make sense of this:
1) The first HTML file uses the 1st png file as the image. The imagemap in this 1st HTML file points to the 2nd html file. When the user clicks on the + “plus sign” next to “Holdings” the image will appear to expand.
2) The second HTML file uses the 2nd png file as the image. The imagemap in this 2nd HTML file points back to the 1st html file. When the user clicks on the + “plus sign” next to “Holdings” the image will appear to collapse.
b. Additional Items:
1) You will need to test your html pages locally to make sure the mouse click properly swaps your images. Notice that I have commented out the lines of HTML for my local image and local HTML.
3. Upload the 2 image files as web resources
a. Additional Items:
1) Note the URL of the web resource because you will need to change your HTML to point to this location. Once you upload the first image file you will be able to deduce what the URL will be for the subsequent files you upload as web resources. You will see in my example that the URL path was:
https://My OnLine Environement//WebResources/THE NAME I GAVE MY RESOURCE HERE
2) CHANGE your HTML to point to the new URL of the image and HTML files.
4. Upload the 2 HTML files as web resources
Here is the syntax of my 2 HTML files for your reference:
ContactRelTree1.html:
<html>
<body>
<!–COMMENTED OUT- THIS IS THE ACTUAL SYNTAX USED IN MY CRM ENVIRONMENT <img src=”https://avanade34.crm.dynamics.com//WebResources/new_RelTree1_png” usemap=”#navigation” border=”0″> –>
<!– COMMENTED OUT-This is my test line when the image was local on my machine<img src=”RelTree1.png” usemap=”#navigation” border=”0″> –>
<img src=”http://g97eia.bay.livefilestore.com/y1pk8d-PK5Rq9wMFcMGdeeLq01Cg6F8JxGkJ7kuwsWwTE-ApQgs4aztXpoRwvNyvIgsLgY1SGC7gRHYo8Y89zKkTpmgN-4pufl8/RelTree1.png?psid=1″ usemap=”#navigation” border=”0″>
<map name=”navigation”>
<area shape=”rect” coords=”24,83,40,99″ href=”http://g97eia.bay.livefilestore.com/y1puw2En7o62lFP1madagrWnCV7fZYvp631RcBnUC5ghB7RAU-kNmwVITUqB0iv62X7HuHQD34g02BQoKrB3uvnREVGSB-KZ8DZ/ContactRelTree2.html?psid=1″>
<!–COMMENTED OUT-THIS is my test line when the HTML file was local on my machine <area shape=”rect” coords=”24,83,40,99″ href=”ContactRelTree2.html”> –>
</map>
</body>
</html>
ContactRelTree2.html:
<html>
<body>
<!– COMMENTED OUT- THIS IS THE ACTUAL SYNTAX USED IN MY CRM ENVIRONMENT <img src=”https://avanade34.crm.dynamics.com//WebResources/new_RelTree2_png” usemap=”#navigation” border=”0″> –>
<!– COMMENTED OUT-This is my test line when the image was local on my machine <img src=”RelTree2.png” usemap=”#navigation” border=”0″> –>
<img src=”http://g97eia.bay.livefilestore.com/y1pntSs_KKA1NONWEW-9GiQ5a-OVeVd-5UZF5U4GDzMsSIhn0vKoAW5rFgRKU2X0PGe2g_NDQPJk2oAAT1TtnUIeYiGYHzQ86u4/RelTree2.png?psid=1″ usemap=”#navigation” border=”0″>
<map name=”navigation”>
<area shape=”rect” coords=”24,83,40,99″ href=”http://g97eia.bay.livefilestore.com/y1pU-jMj7S3axx2-UpXt1Fy_iHRFkTBYGiB6ZcKFtDOtGFk9QlgWmTdP2xEOeiVh2vi8rYcsbdJ-Gt19iZ_CNolKFcH25bAk0jr/ContactRelTree1.html?psid=1″>
<!– COMMENTED OUT-THIS is my test line when the HTML file was local on my machine <area shape=”rect” coords=”24,83,40,99″ href=”ContactRelTree1.html”> –>
</map>
</body>
</html>