The purpose of this tutorial is to suggest how to detect any change a user could do in a Web form and more specifically within an SAP UI5 Form that is binded to a JSONModel. Indeed, unlike the oData model (sap.ui.model.odata.ODataModel), the JSON model (sap.ui.model.JSONModel) doesn’t offer a native “hasChanges” method. Yet, as we are about to demonstrate, there exists an easy alternative that consists in creating a Binding Model linked to the JSON model context and then listening to the “change” event of this binding Model.

The following steps illustrate how to implement such technique using SAP Web IDE.

01. Create a project from a template and select SAPUI5 Application.


02. Enter a Project Name (here FormChangeTutorial ).


03. Set the view Type as XML, fill in the view name and click Finish .


Project is now created with an empty View and Controller.

04. Edit the Form.view.xml to create the form elements as below:


05. Edit Form.controller.js to create the controller as below:


Below are some details regarding the controller.

A. Controller attributes:

• JSONdata => contains data Model (first name and last Name).
• oClonedObject => initialize as empty object, this attribute will contains data model cloned before changes.
• hasChange => initialize to false, this attribute will contains the state of model changes.

B. “getClonedObject” method:

This method uses a simple trick to create a clone of a JSON object. It first converts the object into a String and then uses the parse method to get a new instance of that object.

C. Create “equals” method:


This method converts the two objects into strings and uses the === to compare them. This works fine on complex structures but has restrictions. For instance if the obj1 is {a:1,b:2} and obj2 is {b:2,a:1} then this method will return false. It is therefore important to keep this in mind when using such method.

D. “onInit” method:

This method is in charge of instantiating the class attributes and also defines the event listener on the model binding change. This listener will then compare a saved/cloned version of the model’s JSON data with the current one. The result of this comparison is then stored into the boolean class attribute hasChange.

E. “handleBtnPressed” method:

This method is the event listener for the button click event and will then just check on this hasChange event to set the correct text.


If we are now run the application, we see the following:

Clicking on the button will prompt the following message


Then if any of the fields gets modified and the button is pressed again, the following message is displayed.

As you see, it is pretty simple to detect form changes when using a JSONModel in a SAP UI5 appliation. You can download the code of this blog here: