Model-driven apps offer a client API that allows us to implement some business logic in JavaScript. The client API accepts to attach functions to events such as form loading, data changing and more.
Generally, we have two possibilities to register a function for a given event. Either in a static way, using configuration. Or dynamically, by registering functions for an event during the form loading.

Let’s take the example of the account table form, where a function needs to be executed once the telephone1 field is changed. This is possible to implement in the following way:

	var MEA = window.MEA || {};
	var accountForm = MEA.accountForm || {};
	(function () {
	this.OnLoad = function (onLoadContext) {
	console.log("onLoad ….");
	var formContext = onLoadContext.getFormContext();
	formContext.getAttribute('telephone1').addOnChange(this.OnChangeHandler);
	};
	this.OnChangeHandler = function (onChangeContext) {
	console.log("The field is changed…")
	};
	}).call(accountForm);

view raw AccountForm.js hosted with ❤ by GitHub

Case 1 (Existing Record)

Let’s start with the case of an existing record. Let’s open the console and check what’s going on

We noticed the following things:

• The OnLaod function event was executed when the form was loaded.
• Then, the OnChangeHandler function was executed only once after changing the telephone1 field.
• Also, after saving the form. No function is triggered.

So far, nothing special. The form reacts as expected !!

Case 2 (New Record)

After clicking New, the Account form is loaded and then the OnLoad function is executed.

After saving the form, the OnLoad function is executed again !!

Then, by changing the telephone1 field. The OnChangeHandler function is executed twice in a row. This can cause problems and mess up the logic you want to implement…

Indeed, the OnChangeHandler function was executed twice, because it was registered twice. At the first form loading and then after saving the new record. To correct this, it is appropriate to register the OnChangeHandler function only during the initial load.

For this, the client API proposes the method getDataLoadState() which returns an enum with the following values:

• InitialLoad =1
• Save = 2
• Refresh = 3

Indeed, when the form’s OnLoad event occurs. The execution context provides the getEventArgs() method. This method returns an object that contains the method getDataLoadState(). Let’s see the result of using this approach.

	var MEA = window.MEA || {};
	var accountForm = MEA.accountForm || {};
	(function () {
	this.OnLoad = function (onLoadContext) {
	console.log("onLoad ….");
	var eventArgs = onLoadContext.getEventArgs();
	var formContext = onLoadContext.getFormContext();
	if (eventArgs.getDataLoadState() == 1) {
	formContext.getAttribute('telephone1').addOnChange(this.OnChangeHandler);
	}
	};
	this.OnChangeHandler = function (onChangeContext) {
	console.log("The field is changed…")
	};
	}).call(accountForm);

view raw AccountForm.js hosted with ❤ by GitHub

After modifying the code. The OnLoad function was executed when the creation form was opened. Then when saving the form.

After changing the telephone1 field. The OnChangeHandler function was executed only once. In fact, the function was registered only once when the form was initially loaded.

Hope it helps …