MS CRM: Web Resource and Referencing web resources with examples

Web Resources

There are a number of available Web Resources at our disposal.

• HTML Web Pages
• Style Sheets (CSS)
• Script (JScript)
• Data (XML)
• Images(PNG, JPG, GIF, or ICO)
• Silverlight (XAP)
• Style Sheets (XSL)

The one that provides the most frequent re-use in my personal opinion would be the use of the Script Web Resource.  I am working on three additional posts concerning Web Resources:

• HTML Web Page
• Silverlight
• Data XML

Each of these posts will also incorporate the use of either CSS, XSL, and Image Web Resources as well. For this post, however, I will be focusing on the use of Scripting.

Let’s take a look at a specific example:

JScript
In this example, we are going to create a simple JScript which hides the notes tab on nearly any CRM form. In addition, this example is operating within the context of a custom solution record named, “Summit Group Software” (yeah I know if is a blatant plug for Summit Group but…..you are on our blog so I guess it comes with the territory.) Additionally, this example assumes you have added a Bit attribute named, “new_show” to the Account entity and have it on the form.

Task 1 – Create a new JavaScript Library

In this task, you are going to setup new JavaScript library that will be used later in this exercise.

While still in the Summit Group Software solution, click New from the toolbar and select Web Resource from the list.

Enter the following Information in the New Web Resource Dialog:

• Name= “HideNotes”
• Display Name= “Hide Notes”
• Type= “Script (Jscript)”

Click the Text Editor button

Paste in the following script in to the source dialog.

function hidemynotes(eventContext)

{

if (Xrm.Page.data.entity.attributes.get(“new_show”).getValue() == 1)

{

// Show the Notes tab

Xrm.Page.ui.tabs.get(“notes”).setVisible(true);

}

else

{

// Hide the Notes tab

Xrm.Page.ui.tabs.get(“notes”).setVisible(false);

}

}

Click OK

Click Save and Close

Task 2 – Attach Form onLoad event handler
Next we need to setup the event handlers on the Account form
While still in the Summit Group Software Solution Click on the Entities -> Add Existing

Select Account in the entity list and then click OK.

As soon as the Account entity appears in your list of available entities in your solution, expand the Account node and then expand the Forms node.

In the forms grid, double-click Information form type Main
Now that you are in the form editor we need to attach the event handler. To both the Form onLoad and the Show OnChange events.

Click Form Properties in the ribbon to bring up the dialog.

Click the Form Libraries Add button.
In the lookup dialog select the “Hide Notes” web resource and Click OK

In the Event Handler section Click Add.

In the Handler Properties dialog do the following:

• Function = ” hidemynotes”
• Check Enabled
• Check Pass execution context as first parameter

Click OK, to close the Handler Properties dialog
Click OK, to close the Form Properties dialog

Task 3 – Attaching onChange event handler

Next, we need to attach the event handler to the Show radio button.

In the form editor click to select the “Show” control

Click Change Properties button in the ribbon.

In the Field Properties dialog, select the Events tab.

Click the Add button in the Event Handlers grid.

In the Handler Properties dialog do the following:

• Function = ” hidemynotes”
• Check Enabled
• Check Pass execution context as first parameter

Click OK, to close the Handler Properties dialog
Click OK, to close the Field Properties dialog

Click Save and Close

Task 3 – Publishing changes and see the results
While still in the Test, Click Publish All Customizations in the top toolbar of the Solution Explorer.

Close the Solutions explorer
In the main application window Navigate to the Account entity in the Workplace.
In the ribbon, click the New button on the Account tab.

The Account form loads and the Notes tab is hidden.

Enter the following items:

• Name = “Test Company”
• Show= “Yes”
• Once the Show equals “Yes” you will see the Notes Tab.

How to use web resource below video explains in details are as follows,

Another video to understand the web resource use with example are as follows,

Referencing Web Resource:

While some web resources can be added directly to a form or a dashboard (for

example), others such as Data (XML), CSS, JScript or XSL web resources can

only be referenced through their relative path. There are several methods that you

can use to reference Web resources.

NOTE: When possible, use the $webresource directive. Only references that use

the $webresource directive in SiteMap or ribbon commands will establish

dependencies. Dependencies are not created when Web resources reference each

other.

$webresource Directive

You should always use the $webresource directive when referencing a web

resource from a ribbon control, or a SiteMap sub area. Use the $webresource

directive anywhere the XML allows a URL value. The following sample shows

how to use it.

$webresource:<name of web resource>

NOTE: When using the $webresource directive, Microsoft Dynamics CRM will

create or update solution dependencies.

Relative URL

When referencing a web resource from areas that do not support using the

$webresource: directive, the following relative URL can be used. To enable this,

it is recommended that you use a consistent naming convention for the Web

resources that reflect a virtual file structure. The solution publisher's

customization prefix will always be included as a prefix to the name of the web

resource. This can represent a virtual root folder for all Web resources added by

that publisher. You can then use the backslash character (/) to simulate a folder

structure that will be honored by the Web server.

From another web resource, you should always use relative URLs to reference

each other. For example, for the Web Page web resource

new_/content/contentpage.htm to reference the CSS web resource

new_/Styles/styles.css, create the link as follows:

<link rel="stylesheet" type="text/css" href="new_/styles/styles.css" />

For the Web Page web resource new_/content/contentpage.htm to open the Web

Page web resource isv_/foldername/dialogpage.htm, create the link as follows:

<a href="isv_/foldername/dialogpage.htm">Dialog Page</a>

Full URL

The following sample shows the style of URL you can use to view web

resources:

<Microsoft CRM URL>/WebResources/<name of Web resource>

NOTE: Including the '/' character and a file name extension in the name of the

Web resource is an optional best practice.

The following sample shows a URL for Microsoft Dynamics CRM Online,

where MyOrganization is the name of your organization, and new_/test/test.htm

is the name of the Web resource:

https://MyOrganization.crm.dynamics.com/WebResources/new_/test/test.htm

The following sample shows a URL for Microsoft Dynamics CRM on-premise,

where myServer is the server name:

http://myServer/MyOrganization/WebResources/new_/test/test.htm

Referencing the web resource video are as follows,