How to Make Data Binding in SAPUI5 Framework

Data binding is one of the most powerful and convenient way of developing web interfaces based on some predefined data. There are several different possibilities on SAPUI5 to use data binding in applications. First of all we need to review refinements of binding modes and binding types that SAP UI5 Framework has. Let’s get started.

Binding Modes

Binding mode is usually contains of 2 main categories: Two Way, One Way and One Time modes. Let’s get some explanations on that:

One Way – means that all data changes will be reflected on the controls. If you have input field mapped on {name} field in model all model’s name property value changes will be displayed in that input. Changing the input will not be reflected on the model.
Two Way – means that all input changes will be reflected in the model. Unfortunately this will not work for data binding made with formatter functions.
One Time – means data will be bound from model to view just once.

By default JSON and XML models have Two Way bind mode, resource and OData models have One Way mode. Right now OData and resource models don’t support Two Way mode.

Binding Types

Binding types might include property binding, aggregation binding and element binding.

Property binding

Let’s have a look at sap.m.Input control which is bound to several model fields.

var oInput = new sap.m.Input({
value: {
parts: [{path: "Cost"}],
	  	formatter: function(sCost){
	  		return Math.round(parseFloat(sCost)*10)/10;
	  	}
	},
	enabled: "{Enabled}",
	description: {
		parts: [{path: "/profile/Type"}],
	  	formatter: function(sType){
	  		return (type != "percent")? "%" : "";
	  	}
	}
});

In this example value (and description) of the Input control is bound to cost fields via a formatter function. In this case it is possible to modify the value before it will be shown in the input. As it was mentioned before the negative side of using formatter is that we will lose the possibility to implement Two Way binding mode for this property. The next property – enabled is used without formatter function, so Two Way binding mode is possible here.

It is also possible to use generic “bindProperty” method instead of defining binding settings in constructor:

oInput.bindProperty("enabled", "{Enabled}");
oInput.bindProperty("value", "Cost", function(sCost){
	return Math.round(parseFloat(sCost)*10)/10;
});

Aggregation binding

Aggregation binding requires definition of a template which is cloned for each bound entry of the list, it is also possible to use factory function instead of template. Path should be connected with data represented in list format.

var oListTemplate = new sap.ui.core.Item({
key : "{Key}",
text : "{Text}"
});

var oSelect = new sap.m.Select({
selectedKey: "{currentKey}"
}).bindAggregation("items", "/level_set", oListTemplate);

The other method how the aggregation can be bound is factory functions. Factory function is called for each list entry and based on some data values it is possible to use different templates for each row.

oSelect.bindAggregation("content", "/company/properties",
function(sId, oContext) {
		var value = oContext.getProperty("value"),
			key = oContext.getProperty("key");
		return new sap.ui.core.Item({ key : key, text : value });
}
);

Element binding

This technique allows to set binding context to some control by the binding path. In this case all controls which are connected to this base control will be bound relatively to the object described in the given path attribute.

oForm.bindElement("/company");
oInput.bindProperty("value", "name");

Thus input which is placed inside the form control will be bound to “/control/name” property of the model.

Conclusion

Data binding from SAPUI5 looks very promising, it combines best approaches in order to create powerful tool for developing complex user interfaces. The one thing each SAPUI5 developer should remember is that view’s data model should be coherent with UI. In this case it will be easy to create simple data bindings and avoid complex and not supportable binding constructions.