Data binding is one of the cornerstones of SAPUI5 development, and understanding how to use it effectively can make the difference between an application that feels alive and one that requires constant manual intervention.
Property binding is one of the central and most frequently used forms of data binding in SAPUI5. It allows the direct linking of properties of UI elements with data from a model. This means that changes in the model are automatically applied to the UI without the need for manual updating.
With property binding, numerous properties of UI elements such as texts, numbers, colors, visibility, and status can be dynamically controlled. This makes applications more flexible and data-driven, as the display of the UI is always based on the current data. At the same time, the application remains clear, as data and display are clearly separated from each other. The property binding syntax is simple but flexible.
In addition to basic bindings that directly access properties in the data model, it also supports advanced use cases such as the use of formatting functions or complex expressions. Property binding also offers different modes (e.g., one-way or two-way) to adapt the data exchange to the requirements of the application.
There are two ways to apply property binding to a UI control:
In the following sections, we’ll take a closer look at how to apply property binding, and then we’ll see in detail which function the SAPUI5 framework provides to realize property binding.
Once the property binding has been defined, the property is automatically updated whenever the value of the property in the bound model changes and vice versa. For our example, let’s assume the following data is available in a JSON model and the JSONModel has the name employeeModel.
let data = {
"employee": {
"firstName": "Max",
"lastName": "Mustermann",
"age": 40
}
}
let model = new JSONModel(data);
this.getView().setModel(model, "employeeModel");
If you now want to bind the data from the preceding listing directly in the view, it looks like this.
<mvc:View controllerName="" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Input value="{employeeModel>/employee/firstName}"/>
<Input value="{employeeModel>/employee/lastName}"/>
<Input value="{employeeModel>/employee/age}"/>
</mvc:View>
The complex syntax can also be used in a property binding. This syntax makes it possible to define additional binding information, such as a formatting function. The listing below shows, for example, how a formatting function can be applied to a binding.
<mvc:View controllerName="" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Text text="{parts: [{path: 'employeeModel>/employee/firstName'}, {path:
'employeeModel>/employee/lastName'}], formatter: '.employeeFormatter'}"/>
</mvc:View>
However, if you want to create the UI elements in the controller and set the binding programmatically, this has to be done as shown here.
let oInputFirstName = new Input({value: "{employeeModel>/employee/
firstName}"});
let oInputLastName = new Input({value: "{employeeModel>/employee/lastName}"});
let oInputAge = new Input({value: "{employeeModel>/employee/age}"});
The bindProperty function offers another option for programmatically setting the binding to a control. This is particularly helpful if bindings are only to be set at runtime at a certain point in time. This method receives the name of the UI control property to which a binding will be set as the first parameter. The second parameter is an object that contains the following information on the property from the model that will be bound:
Now, let’s assume there’s an input like the one shown here.
<mvc:View controllerName="" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Input id="inputFirstName"/>
</mvc:View>
To set a binding to this input, you can proceed as shown.
let oInputFirstName = this.getView().byId("inputFirstName");
oInputFirstName.bindProperty("value", {path: "employeeModel>/employee/
firstName"});
A binding can also be removed from a UI element via the unbindProperty method. This method receives the name of the UI control property for which the binding will be removed as the first parameter. In addition, a Boolean can be passed as the second parameter, which defines whether the default value should be restored after the binding is removed. If you want to remove the binding from the input used earlier, this can be done as in this listing.
let oInputFirstName = this.getView().byId("inputFirstName");
oInputFirstName.unbindProperty("value");
Values in bindings are usually displayed in an internal format. However, this format often isn’t very user-friendly. It’s therefore possible to implement formatting functions and apply them to the binding. These functions make it possible to carry out any formatting based on the initial value and ultimately display the formatted value. This is particularly useful when numerical or date values need to be displayed. SAPUI5 offers two different options for carrying out this formatting:
Data types can also be used to validate user input based on defined constraints.
To use a formatting function, it must be explicitly specified in the property binding in the XML view and implemented in the controller. An example implementation of a formatting function that formats a date value can look like this.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
"use strict";
return Controller.extend("at.clouddna.demo.App", {
…
formatDate: function(fValue) {
if (fValue) {
return new Date(fValue).toLocaleDateString();
}
return "";
}
}
));
});
The next listing shows how the formatting function can be used in the binding in an XML view. To do this, the function name must be specified in the binding in the formatter property. The this context of a formatter function is usually set to the control (or managed object) that has the binding. In XML views, however, the formatter function is generally defined in the controller of the view. To refer to this function, the formatting name is preceded by a dot (.) (e.g., {formatter: '.formatDate'}). This ensures that this context of the formatter is bound to the controller.
<mvc:View controllerName="" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Text text="{path: 'model>/someDateField', formatter: '.formatDate'}"/>
</mvc:View>
If you’re using JavaScript, you can either pass the formatter function as the third= parameter of the bindProperty method or define it in the binding information with the formatter key. The formatter function receives the value to be formatted as the only parameter and is executed in the context of the control. This gives it access to other properties of the control and to data from the model. This listing shows how a formatter can be integrated using the bindProperty or directly in the constructor.
let formatterFunction = function(sValue){…};
oInput.bindProperty("value", "model>/someDateField", formatterFunction);
let oControl = new Input({
value: {
path: '/someDateField',
model: 'model',
formatter: formatterFunction
}
});
Because the formatter function can contain any code, it can be used for formatting as well as for type conversions. The return type of the function doesn’t necessarily have to be identical to the type of the value to be converted. For example, formatters can also be used to return a corresponding status or icon based on a Boolean flag.
The framework only updates a binding if one of the properties contained in the binding definition changes. However, if the formatter accesses additional properties that aren’t defined in the binding, the framework doesn’t recognize this dependency and could therefore overlook necessary updates. To avoid this, a composite binding should be created that explicitly includes all relevant properties, even if they come from different models.
The use of data types allows data to be formatted, parsed, and validated to check whether the entered data is subject to defined constraints. SAPUI5 already offers a large number of data types as standard. Following are the data types from the sap.ui.model.type namespace:
The following data types from the namespace sap.ui.model.odata.type are also available:
The data types from the sap.ui.model.odata.type namespace support OData V2 and V4. At the same time, these data types represent the OData EDM (entity data model) data types.
If the data types contained in the standard aren’t sufficient, you can also implement your own data types. To do this, a class must be created that inherits from the base type sap.ui.model.SimpleType and implements the corresponding methods of formatValue, parseValue, and validateValue.
To define a data type in a binding within an XML view, this must be specified in the corresponding property in the binding.
<mvc:View controllerName="" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Text text="{path: 'model>/someFloatField', type:
'sap.ui.model.type.Float'}"/>
</mvc:View>
The formatOptions and constraints parameters can be supplied accordingly so that values can be validated or formatted in a binding. The possible parameters that can be defined within the two parameters depend on the types used. The next listing shows an example in which both formatOptions and constraints are defined for the sap.ui. model.type.Float. In this case, the formatOptions define that the value is always displayed with a minimum of two and a maximum of three decimal places. The constraints define that only values from 5 to 10 are valid.
<mvc:View controllerName="" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Text text="{path: 'model>/someFloatField', type: 'sap.ui.model.type.Float',
formatOptions: {minFractionDigits: 2, maxFractioDigits: 3}, constraints:
{minimum: 5, maximum: 10}}"/>
</mvc:View>
The same behavior as in the XML coding can also be achieved by corresponding coding in the controller (see next listing). The formatOptions must be passed as the first parameter and the constraints as the second parameter in the constructor of the type.
let control = new Input({
value: {
path: "model>/someFloatField",
type: new sap.ui.model.type.Float({minFractionDigits: 2,
maxFractioDigits: 3}, { minimum: 5, maximum: 10})
}
});
To implement a custom type, as already mentioned, a subclass of sap.ui.model.SimpleType must be created, and this custom type can then be used in the same way as the predefined types. A schematic implementation of a custom type can be seen here.
var MyCustomType =
sap.ui.model.type.SimpleType.extend("at.clouddna.MyCustomType", {
formatValue: function(oValue) {
return oValue;
},
parseValue: function(oValue) {
return oValue;
},
validateValue: function(oValue) {
if (oValue < 0) {
throw new sap.ui.model.ValidateException("Invalid Input!");
}
}
});
To check whether a binding is suspended, you can use the isSuspended method of the sap.ui.model.Binding class. If the binding is suspended, the resume method can be used to trigger the binding. This triggers the corresponding request, causing the binding to no longer be suspended.
Property binding in SAPUI5 gives developers a powerful and flexible way to keep the UI in sync with application data. Whether you're working directly in XML views or setting bindings programmatically in the controller, the framework provides the tools to handle everything from simple value display to complex formatting and validation logic. By leveraging formatting functions and data types—or building your own when the standard options fall short—you can ensure that data is always presented accurately and in a format that makes sense to the user. As you build more complex applications, a solid understanding of property binding will serve as a reliable foundation for everything else.
Editor’s note: This post has been adapted from a section of the book SAPUI5: The Comprehensive Guide by Rene Glavanovits, Martin Koch, Daniel Krancz, and Maximilian Olzinger. Rene is an SAP consultant and developer who specializes in the latest SAP technologies. Martin conducts training for SAP and has developed four training courses on the topics of SAPUI5, SAP Fiori, cloud integration, and cloud security. Daniel is a software developer and consultant who focuses on full-stack development. Maximilian is a software developer and consultant.