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:

js5

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:

XrmPageModel

 

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.

Method: setValue()

var sampleSet = Xrm.Page.getAttribute(“cs_sample_set”).setValue(“this 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 ” “.

Method: setRequiredlevel()

var sampleRequiredLevel = Xrm.Page.getAttribute(“cs_sample_required”).setRequiredLevel(“required”);

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().

Method: setVisible()

var sampleVisible = Xrm.Page.getControl("sample_visible").setVisible(false);

This line of code will take field named “sample_visible” and make it s a not visible, because visibility is set to false. This method is boolean type, and it can be set as a true or false.

Method: setDisabled()

var sampleDisabled = Xrm.Page.getControl("sample_disabled").setDisabled(true);

This line of code will make field “sample_disabled” disabled on the form, because disabled is set to true. This is also method with boolean arguments, so it can be set to true or false.

Besides having controls on the form, you can also have control on a tabs, sections, etc., and it will be a matter of another blog post. Stay tuned.