All about SAPUI5 Data Models and Data

Binding.

What is Data Binding ?

 Data binding is the process that establishes a connection between the

application UI and business logic.
 It is a bridge between binding target and binding source.
 SAPUI5 uses data binding to bind two data sources or information sources
together to keep them in sync: All changes in one source are also reflected in the
other one.
 The UI uses data binding to bind controls to the model which holds the
application data, so that the controls are updated automatically whenever application
data changes.

What are the steps for Data Binding ?

The process for using data binding for SAPUI5 controls in a includes the foll. three
steps:

 Deciding on the model.

 Creating a model and a control instance.
 Binding the properties or lists to the model and, if required, unbinding the
properties again.

What is model ?

A model object is a container for the data upon which your application operates. It holds
the data and provide the methods required to set the data or to retrieve data from the
server.

In SAPUI5, we bring the back end data and store it in the model, then we use data
binding to display this model data in our UI.

What are the modes of Binding ?

There are basically three modes of binding data in SAPUI5.

 One way binding – Here, the data is transported in one direction only, i.e. from
the model, through the binding instance to the consumer (usually the property of a
 control), but never in the other direction.Any change done on the model data from
the front end is not affected to the model. All the data changes are reflected only on
the controls.

 Two way binding – Here all input changes done from front end controls are
reflected on the model and the backend database. SAPUI5 automatically handles
the transport of data both from the model to the controls, and back from the controls
to the model.

 One time binding – Here all data will be bound from model to view just once.
After that, the connection is no more set.

What are the types of binding in SAPUI5 ?

There are basically 4 types of binding in SAPUI5.

Property Binding –It allows properties of the control to get automatically initialized and
updated from model data.

Aggregration Binding – Aggregation binding is used to automatically create child

controls according to model data. Aggregation binding requires the definition of a
template, which is cloned for each bound entry of the list.

Element Binding – It allows to bind elements to a specific object in the model data,
which will create a binding context and allow relative binding within the control and all of
its children. For element binding, we require the path of the object in the model.

Expression Binding – It is an enhancement of the SAPUI5 binding syntax, which allows

for providing expressions instead of custom formatter functions.

This saves the overhead of defining a function and is recommended in cases where the
formatter function has a trivial implementation like comparison of values.

<Icon src="sap­icon://message­warning" visible="{= ${status} === 
'critical' }">

What are the types of model in SAPUI5 ?

OData Model –

It is an server side, One way model. The data stored in the database(SAP/Non-SAP
system) is accessed by using a service, which can be accessed via 2 different formats
(XML & JSON).

Syntax –
var model_object = new  
sap.ui.model.odata.ODataModel("serviceName",true(OData)/false(XML),"UserId","P
assword");

Example –

var modelo = new  
sap.ui.model.odata.ODataModel("proxy/http/192.168.0.124:8000/sap/opu/odata/SAP
/ZARJUN_ODATA1_SRV",false,"sapuser","sap123456");

JSON Model –

It is an client side, two way model. The data is stored and accessed via the JSON
format.

Syntax –

var model_object= new sap.ui.model.json.JSONModel(JSON file Name/URL to load 
the data);

Example –

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

XML Model –

It is an client side, two way model. The data is stored and accessed via the XML format.

Syntax –

var model_object= new sap.ui.model.xml.XMLModel(XML file Name/URL to load the 
data);

Example –

  var json= new sap.ui.model.xml.XML Model("metadata.xml");

Resource Model –
It is used mostly when we need to display an static text in different languages in the
browser.A resource model is instantiated with a bundle name or an bundle URL.

Example –

new sap.ui.model.resource.ResourceModel({bundleName:"myBundle",locale:"en"});

Explain in detail about Aggregration Binding ?

Aggregation binding is a technique through which a control can be bound to a list within
the model data and relatively bound to the list entries by its child controls.

It will automatically create as many child controls as are needed to display the data in
the model using one of the following two approaches:

 Use template control that is cloned as many times as needed to display the data.

 Use a factory function to generate the correct control per bound list entry based
on the data received at runtime.

What are Binding paths ?

A binding path consists of a number of name tokens, which are separated by a

separator char. In all models provided by the framework, the separator char is the slash
“/”.

A binding path can either be absolute or relative: Absolute binding paths start with a
slash, relative binding paths start with a name token and are resolved relative to the
context of the control that is bound. A context exists either for each entry of the
aggregation in case of aggregation binding or can be set explicitly for a control by using
the setBindingContext method.

Binding path examples:

'/Vbak/0/ProductName'

'/Vbap(0)/ProductName'

'ProductName'

//with model name
'myModelName>/Vbak/0/ProductName'

'myModelName>/Vbak(0)/ProductName'

'myModelName>ProductName'

What is life cycle of binding templates ?

The life cycle of the binding templates is different from the life cycle of controls that are
contained in an aggregation. When an control is destroyed, its aggregration is destroyed
as well. To change this behaviour, we need to change the property “templateShareable”.

The list item property “templateShareable” if set to false, the lifecycle is controlled by
the framework. It destroys the template when the binding is removed, and if set to true,
the template is not destroyed and can be used again later.

What is Property Metadata Binding ?

Property Metadata Binding is an advanced binding mechanism, which is used when we

want to bind certain properties of an entity in OData services, such as heading, label,
and precision. It is an extension of property bindings, and is used alongwith annotations.
It is basically of two types :

 Absolute bindings

An absolute binding path starts with the entity name followed by the property name.
Property attributes can be accessed with @ +propertyName, nodes can be accesses
with the node name only.

Example:

var myLabel = new sap.m.Label({text:"{/#Company/CompanyName/@sap:label}"});

 Relative bindings

A relative binding path can be resolved relative to a data path/context.

Example:

var myLabel = new 
sap.m.Label({text:"{/Companies(1)/CompanyCode/#@sap:label}"});
var myLabel2 = new sap.m.Label({text:"{City/#@sap:label}"});

myLabel2.bindElement("Companies(1)")