SAP UI5 Data Binding Introduction Part1

Data Binding

Its process of connecting the view with the model directly, so that the data can be exchanged between model and view

Type’s of Model

Client side and server side models are represented in the below pic

Client Side Models:

Model data is loaded completely and is available on the client. these models are intended to use the small data set for loading

• JSON Model – it use the JSON format data
• XML Model- it use the XML format data
• Resource Model – Handles the data in resource bundle, mainly used for the different languages

Server Side Model:

Data are kept in the server, data loaded only on demand

• oData – handles the data from oData services

Steps to create model in SAP UI5

Step1: create the model object

Syntax for creating the model object

var oModel = new sap.ui.model.<modelClass>.<modelName>();

var oJSONModel = new sap.ui.model.json.JSONModel();

var oXMLModel = new sap.ui.model.xml.XMLModel();

var oResouceModel = new sap.ui.model.resource.ResourceModel();

var oData = new sap.ui.model.odata.v2.ODataModel();

Step2: load or set the data to the model

In this step we can either set the data or load the data to model using below steps

oModel.setData(data);

oModel.loadData(file path);

Step3: Visibility of model to application or view or UI control

If we are using the below code model will be available to all view and all control

sap.ui.getCore().setModel(oModel);

If we need to set the model only to the view level and its control

this.getView().setModel(oModel);

If we need to set the model onlt to the control level

this.getView().byId(“id of the control”).setModel(oModel);

Step4: Binding