All about SAPUI5 Data Models and Data Binding.

Authored by

In this blog I am going to discuss about data binding in SAPUI5 in detail, how through the different types of data binding, we can display the back end data in our UI Controls.

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.

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 –

Example –

JSON Model –

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

Syntax –

Example –

XML Model –

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

Syntax –

Example –

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 –

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:

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:

 

  • Relative bindings

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

Example: