Microsoft Dynamics CRM 2011 introduced the concept of WebResources. These components are files that are loaded and stored in the Dynamics CRM database as records. They each have a unique URL, and can be used together when creating a solution. Examples of WebResources include HTML files, JavaScript libraries, images, and Silverlight applications. ASPX files cannot be used as WebResources as no code can be processed and executed on the server directly. In this recipe, we will create an HTML WebResource that performs a simple area code and time zone lookup.
Carry out the following steps in order to complete this recipe:
- Navigate to the Customization module in Dynamics CRM and click on the Customize the System link.
- This will launch the Solution Editor dialog showing the Default Solution for Dynamics CRM 2011. Click on the Web Resources link located in the left-hand navigation list. Next, click on the New button in the toolbar, as shown in the following screenshot:
- This will open the Web Resource: New dialog. Provide the following values for the fields on this form. Click the Save button on the ribbon toolbar to commit the changes.
Field
Value
Name
AreaCode_TimeZone_Search
Display Name
AreaCode TimeZone Search
Description
HTML application that Searches for AreaCode and returns related TimeZone information
Type
Web Page (HTML)
Language
English
- Click on the Text Editor button located next to the Type field. This will launch the Edit Content dialog. Switch the content to the Source view using the tabs along the top of the dialog:
- Erase whichever HTML content might be there by default, and then replace it with the following code snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> --> <html> <head> <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"> <base> <meta> <title></title> <style type="text/css"> div.c1 {COLOR: red} </style> </head> <body> <h2>Area Code and Timezone lookup</h2> <table> <tbody> <tr> <td>Enter Area Code:</td> <td><input name="txtAreaCode"></td> <td><input onclick="doSearch()" value="Search" type="button"></td> </tr> </tbody> </table> <div class="c1" id="divResult"></div> <script type="text/javascript"> function doSearch() { var areaCode = document.getElementById("txtAreaCode").value; if(areaCode == "416") { document.getElementById("divResult"). innerHTML = "Toronto, Canada | EDT"; } else { document.getElementById("divResult"). innerHTML = "Area Code Not Found"; } } </script> </body> </html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
- Once you have entered the code, click the OK button to keep the new HTML. Click the Preview button on the ribbon toolbar to test out the HTML application, as shown in the following screenshot:
- The HTML application will launch in a new window. To test out the script, enter 416 in the input box and then click the Search button. You should see Toronto, Canada | EDT as the result:
- Once everything is tested and works properly, make sure to click the Publish button on the WebResource Editor dialog, so that this component will be available when we put it on a dashboard in the next recipe.
The HTML code for this application is stored as a record in the Dynamics CRM database. It now has a unique relative URL that can be accessed by other WebResources and components in the system. For example, the HTML WebResource we just created can now be accessed from SiteMaps and other components in Dynamics CRM using the following relative URL:
/WebResources/new_AreaCode_TimeZone_Search
Microsoft Dynamics CRM 2011 currently supports 10 types of WebResources for use in the system. However, only form-based WebResources can be used on a dashboard. A list of the various file types is given as follows:
|
File type |
Supported (can be used on a dashboard) |
|---|---|
|
Web Page (HTML) |
Yes |
|
Image (PNG) |
Yes |
|
Image (JPG) |
Yes |
|
Image (GIF) |
Yes |
|
Silverlight (XAP) |
Yes |
|
Image (ICO) |
Yes |
|
StyleSheet (XSL) |
No |
|
Style Sheet (CSS) |
No |
|
Script (JScript) |
No |
|
Data (XML) |
No |