Responding to an Change Event When a Field is Changed on a Creatio Freedom UI Page

In classic Creatio pages, to wire up a change event for a field on the page you would use an attribute to determine the column and the function for the change event. However, to respond to a change event for a field in a Freedom UI page, you simply need to wire up a handler for a change request. This request is named “crt.HandleViewModelAttributeChangeRequest”. This request fires for any change on the page, for any field/attribute, so you need to add code for the field/attribute you want to be listening for changes in. One very nice addition to this request type in Freedom UI pages, is that it also provides the new value it was changed to and also the old value it was changed from.

To wire up a handler for this request, simply add a handler for the “crt.HandleViewModelAttributeChangeRequest” request to the page:

{
	request: "crt.HandleViewModelAttributeChangeRequest",
	handler: async (request, next) => {
		// listen for changes to the EmployeesNumber field
		if (request.attributeName === "EmployeesNumber" && !request.silent) {
			console.log("EmployeesNumber changed", request.oldValue, request.value);
		}
		
		return next?.handle(request);
	}
}

With the code above in place, any changes to the EmployeeNumber field will output the new and old values to the console. One important thing to note, this request also fires when the page loads and the field is populated from the record’s data. Using the request.silent will help you determine if the change was triggered by the page loading or by the user (or code) changing the value. When the page loads, request.silent will be true. However, if the user changes the field, or if you have code somewhere that programmatically changes the field’s value, in this case request.$context.EmployeeNumber = newValue, the request.silent will be false.