In this blog post we’ll talk about JavaScript and Web Resources, specifically about attributes and controls on Xrm.Page. But, before we start, let’s briefly return to some basics related to JavaScript, Web Resources and Xrm.Page in general.

JavaScript Web Resources are individual JavaScript files that contain JavaScript functions. These functions are associated with form fields and events. Also, these functions can be associated with ribbon controls (execute specific function when user clicks specific ribbon button). It can also be used to hide or display ribbon button based on different criteria.

One JavaScript file can contain a lot of functions, but it is good practice that every JavaScript file contains one function (it would be more clear and it would make things easier for developer who takes over somebody else’s code). There can be up to 50 libraries attached to form, but it is not recommended to have that many.

When user creates web resource, this web resource needs to be associated to the form in order to do something (it can be associated with whole form, with specific field, etc).

Events that can trigger functions are:

OnLoad (it is executed when the form is loaded)

OnSave (it is executed when changes on the form are saved), and

OnChange (it is executed when certain change happens, like selecting a value in drop down menu, and getting new fields displayed on the form as a result).

When a form properties are opened, it looks like this:

When you add new library (JavaScript resource), you choose control and event it will be attached to, and you add specific function from JavaScript file to it.

Xrm.Page object model:

CRM form fields in CRM contain attributes and controls. Attribute is data element, and every form field can have only one attribute, but it can have multiple controls attached to it.

Every attribute and every control can have different methods that can be used. You can’t use attribute method on a control, and vice versa.

Attributes

Access to Attribute is done by: Xrm.Page.getAttribute().

Most used methods when working with data(attributes) are: getValue(), setValue(), setRequiredLevel().

Method: getValue()

var sampleGet = Xrm.Page.getAttribute(“cs_sample_get”).getValue();

This line of code will return/get value of the field “cs_sample_get”. You have to write exact name of the field on current page in order to get it’s value.

This line of code will take the field “cs_sample_set” and set it to the value of “this value”. Again, you have to have exact name of the field to set some value to it. In this case, value is “some value”, but you can put any value inside of ” “.

This line of code will take field "cs_sample_required" and make it required (it has to be filled on the form). This method has three different options to set requirement level, and those are: none, required and recommended.

Controls

Access to Control is done by: Xrm.Page.getControl().

Most used methods when working with controls are: setVisible() and setDisabled().