Contact Us Now - Call us on

Microsoft Dynamics CRM

xRM

Resources

About Us

Find Us

 

Gap Consulting Microsoft Dynamics CRM Blog

Tuesday, November 23, 2010

CRM 2011 Dynamic Web Resources using JScript

The concept of web resources in CRM2011 is really exciting and the option to store gif and jpeg images as web resources gives us a new opportunity in making form design graphically more informative and compelling.

The following example shows how we can utilise web resources and jscript to make images embedded on forms dynamic so that the user can be presented with different images depending on data values held within a record.

Here is an example that uses a pick list value to control the web resource that appears on a form. This simple example could be used to display a warning sign if a customer is unhappy.

Firstly, add a pick list to your form and also add a web resource.

blog1

Use the ‘New Field’ function within the Field explorer to quickly create a new field.

blog2

Note the numeric value you assign to your picklist option as you will need this in the evaluation part of the jscript. Here, ‘Warning’ has a value of 2.

blog3

Create a couple of web resources of type gif or jpeg. I prefer gif as they support transparency.

blog4

Add a web resource to the form and ensure it is visible by default. The web resource you select here can be the ‘default’ image that appears if conditions within your script are not met.

blog5

You have certain formatting options on the web resource such as defining the size (original, user defined, stretch to fit, lock aspect ratio) and alignment (centre, left, right, top, middle, bottom). Here I chose middle centre and use available area (lock aspect ratio) as this uses the available area but doesn’t distort as you may find on the wider screen monitors.

blog6

Create a web resource of type ‘Script (JScript)’ and add your script within the text editor.

My example evaluates a picklist (new_warninglevel) and when the picklist value = 2 then show a different web resource (the web resource field name is 'WebResource_warning’ on my form, I have two gif web resources called 'new_warning' and 'new_ok').

function dynamicwebres()
{

var warninglevel = Xrm.Page.getAttribute("new_warninglevel").getValue();
var webresource = Xrm.Page.getControl("WebResource_warning").getSrc();

if (warninglevel == 2)
  {
  Xrm.Page.getControl("WebResource_warning").setSrc(‘WebResources/new_warning’);
  }
else
  {
Xrm.Page.getControl("WebResource_warning").setSrc(‘WebResources/new_ok’); 
  }

}

Once we have our JScript web resource completed, we need to attach it to the on load event and pick list on change events.

blog10

Within ‘Form Properties’ on the form designer, add a new form library (select your JScript web resource), then add event handlers for the form on load and picklist field on change. Be sure to specify the correct function, in our example, the function name is ‘dynamicwebres’.

blog11

Also, remember to set the handler as ‘enabled’.

Publish your entity then open a record belonging to the same entity.

blog8

The ‘OK’ image shows when the warning level is set to ‘OK’.

blog9

A warning image is displayed when the warning level is set to ‘Warning’.

Hopefully, this example will prove useful to you in creating forms with a greater visual impact where it is important for the user to be notified of important data values.

UPDATE 18-02-2011

If your organisation configures CRM2011 for IFD, then the setSrc method will need to include the URL as follows:

Xrm.Page.getControl("WebResource_warning").setSrc(‘https://<orgname>.<sitename>/WebResources/new_warning’);

This isn’t the best in terms of deployment as you must remember to update your script (a tell tale red X will appear in place of your web resource image if you forget!) but it works.

posted @ Tuesday, November 23, 2010 2:47 PM | Feedback (0) | Filed Under [ CRM 2011 ]