SAP UI5 - Controls

SAP UI5 - Design Patterns

In SAP UI5, data binding concept is used to update the data automatically by binding the data with the controls that holds the application data. Using data binding, you can bind simple controls like text field, simple button to application data, and data is automatically updated when there is a new value.

Using two-way data binding, application data is updated when the value of bound control changes. The value can be changed via different methods, like user input, etc.

In SAP UI5, different data models can be used for data binding. These data models support different features −

JSON Model

JSON model is used to bind JavaScript objects to controls. This data model is a client-side model and is suggested for small data sets. It doesn’t provide any mechanism for serverside paging or loading.

Key features include −

JSON model for data binding supports data in JavaScript notation format.
It supports two-way data binding.

Creating a model instance −

Var oModel = new sap.ui.model.json.JSONModel(dataUrlorData);

XML Model

XML model of data binding allows you to bind the controls to XML data. It is used for clientside objects and for small data sets. It doesn’t provide any mechanism for server-side paging or loading.

Key features include −

XML model of data binding supports XML data.
It also supports two-way data binding.

Creating a model instance −

Var oModel = new sap.ui.model.xml.XMLModel(dataUrlorData);

OData Model

OData model is a server-side model, so entire data is available at the server side. Client side can see only rows and fields and you can’t use sorting and filtering at the client side. There is a need to send this request to the server to complete these tasks.

Data binding in OData model is one way but you can enable two-way binding using experimental write support.

Key features include −

OData model of data binding supports Odata compliant data.
This data model allows you to create OData requests and handle responses.
It supports experimental two-way binding.

Creating a model instance −

Var oModel = new sap.ui.model.odata.ODataModel (dataUrl [,useJSON, user, pass]);

Assigning the Model

You can use the setModel method to assign the model to specific controls or core.

Sap.ui.getcore().setModel(oModel);

To bind a model to view −

Var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewname:”view name”});
myView.setModel(oModel);

To bind a model to a control −

Var oTable = sap.ui.getCore().byId(“table”);
oTable.setModel(oModel);

You can bind the properties of a control to model properties. You can bind the properties of a model to a control using bindproperty method −

oControl.bindProperty(“controlProperty”, “modelProperty”);
or by using below methodvar
oControl = new sap.ui.commons.TextView({
   controlProperty: “{modelProperty}”
});

Aggregation Binding

You can use aggregation binding to bind a collection of values like binding multiple rows to a table. To use aggregation, you have to use a control that acts as a template.

You can define aggregation binding using bindAgregation method.

oComboBox.bindaggregation( “items”, “/modelaggregation”, oItemTemplate);

SAP UI5 - Data binding