JavaScript form customization is a way to interact with entity forms by using JavaScript that is executed for events that occur on the form.

JavaScript form customizations is one of many options to control business processes.

An advantage of JavaScript Form programming is that they are immediate and doesn’t need data to be submitted.

Frequent tasks performed by using form programming are:

1. Data Validation.
2. Automation.
3. Process enhancement and enforcement.

 

USE FIELD AND FORM EVENTS

Scripts can be added on events like

OnLoad

OnSave

OnChange

Whereas, tabs have the event

TabStateChange

and IFRAMES have an event called

OnReadyStateComplete

 

EVENTS

OnLoad Event

OnLoad event occurs after the form has loaded. onLoad event is used to prepare the data in the form for use.

 

OnSave Event

OnSave event occurs when a form is saved. It does not correspond to standard HTML OnSubmit event. The OnSave event occurs in the following scenarios:

1. When a user clicks on the save button at the bottom right corner of the screen.
2. Code executes the Page.data.entity.save method, even when there is no changed data to be saved.
3. The user navigates away from the page and there is unsaved data to be saved.
4. When auto-save is enabled, 30 seconds after the data has been changed and there is unsaved data on the form.
5. Code executes the Page.data.save and even if there is unsaved data on the form.
6. Code executes the Page.data.refresh method passing true as the first parameter and there is unsaved data on the form.

 

OnChange Event

OnChange is available for every field. OnChange event requires  two conditions to be true:

1. The data in the field must change.
2. The field must lose focus.

There is an exception to the Two-Option (Boolean) fields. OnChange event occurs immediately when the value is changed without requiring to lose focus.

The OnChange event does not occur if the field is changed programmatically using the setValue method. Instead fireOnChange method can be used in code to trigger OnChange event.

 

TabStateChangeEvent Event

This event occurs when a tab is expanded or collapsed.

This event is important in the case that you want to use script to modify the src property of an IFRAME control.

 

OnReadyStateComplete Event

This event is fired when contents of an IFRAME have completed loading.

 

STEPS TO ADD JAVASCRIPT AS A WEB RESOURCE AND APPLY FORM CUSTOMIZATIONS

• JavaScript files for form customization are applied as a Web Resource.
• Navigate to Settings > Customizations > Customize the System. Then navigate to Web Resources under Components on the left navigation pane of the Default Solution (Default solution here is used as an example).

• In order to add a JavaScript file, we need to create a new Web Resource.

A new JavaScript file could be uploaded or JavaScript code could be simply written in the Text Editor provided by CRM’s Web Resource.

• So this way, a new Web Resource of type JavaScript could be created which then can be consumed on CRM Forms for customization purposes.
• For registering events on OnLoad events, select Form Properties on the form.

• In Form Properties, Select the form libraries that we want to enable on the form level as shown below.

In the above example, a library called ‘new_sampleScript’ has been included. We can now add Event Listeners (which are the functions in that library) that we want to trigger when the library is loaded.

 

In the above dialog box, select the library which has the desired javascript file/code.

Enter the name of the function you want to trigger on this event.

 

As shown above, OnLoad events could be executed using JavaScript.

 

Similarly,

OnSave event listeners could be bound by simply changing the Event to OnSave as shown below.

For OnChange events, the Field Properties need to be changed. Steps to do so are as follows:

1. Navigate to the desired field and select its properties.

1. Follow the steps as illustrated for OnSave and OnLoad events above.
2. So JavaScript code registered OnChange will get triggered when the field value changes and when the field loses focus (Remember, data needn’t be saved for OnChange events to be fired).

Hope this is useful! 🙂