Microsoft Dynamics CRM 2011 is a web application. It is setup as a web application in IIS. It can be browsed through the clients such as a web browser or Microsoft Outlook. Previously Dynamics CRM could only be accessed through a single web browser Internet Explorer. The latest release of Microsoft Dynamics CRM called Update Rollup (UR) 12 delivered multi-browser support. The Dynamics CRM 2011 access in Microsoft Outlook is also through Internet Explorer. If you open the records in Microsoft Outlook, they actually open in the Internet Explorer browser window.
In this blog I will show how to get the ID of any Microsoft Dynamics CRM 2011 form controls in Internet Explorer.
There are many occasions where one would need the ID of a control on a Dynamics CRM 2011 form. Like in my case I want to change the images on the form based on the record selected. I have an entity called "Movies". For every movie record there is a "JPG" web resource storing the movie poster image. I want to dynamically display the related image for a movie record.
|"Movie" Entity Records|
Below are the 3 "Movie" records and the dynamically displayed images (related to the movie).
|"Movie" Record Skyfall|
|"Movie" Record Casino Royale|
|"Movie" Record GoldenEye|
The image, on a CRM 2011 form, is displayed as an inserted web resource control.
|"Movies" Entity Form Design Showing the Web Resource Control|
This web resource displays an image by default. The same image will be displayed for all movies. In order to dynamically change this image I need to write a JScript web resource. The JScript code displays the image web resource and is dynamically selected based on the "Movie" record name.
As seen above the web resource is selected based on the movie record name. There is an Image Web Resource for every movie and is named after the record name. In Jscript to code the display of the Image Web Resource in the image control, I need the ID of this image control. In the JScript code, above, the ID used is "WebResource_Movie_Images".
I can find the ID of any Microsoft Dynamics CRM 2011 control from the Internet Explorer "F12 Developer Tools". Internet Explorer Developer Tools (formerly known as Internet Explorer Developer Toolbar), is a component of Internet Explorer that aids in design and debugging of web pages.
Open any "Movie" form. Let's say I have opened the "Movies" entity record GoldenEye. Press F12 on the keyboard to open the tools. Or else select the "F12 Developer Tools" option from the Internet Explorer right hand side "Tools" menu.
|Internet Explorer "Tools" Menu|
The Internet Explorer window, below, will now display the "F12 Developer Tools".
|Internet Explorer Window Displaying the F12 Developer Tools|
I want to find out the ID for the image control. Click the arrow button "Select Element By Click".
Select the element (control) on the form whose ID you want. In this case I want the ID of the Image so that I can use that in JScript code. Take the mouse cursor on the image and click once. This will open the HTML for the page on left hand side. On right hand side it displays the CSS for the page. The HTML tag for the image is selected and highlighted in blue.
|Select Element By Click|
|Select The Image Element (Control)|
|Selected Image HTML Tag and The ID|
In this way we can use the Internet Explorer "F12 Developer Tools". Using this tool we can find out the ID of the Dynamics CRM 2011 form controls. These ID can be used in the JScript as I have done above.
A piece of advice: Before using the control and the ID in JScript code, always check whether the code is supported or unsupported. Unsupported code is the one which doesn't conform to the CRM 2011 platform coding principles. If you write unsupported code, there could be problems in installing future service packs or upgrading to the new Dynamics CRM release.
I hope this blog about 'Microsoft Dynamics CRM 2011 and Microsoft Dynamics CRM Online - Get the Form Control ID' was informative. Please feel free to leave your comments.