1 | The Concept of Data Binding
Benefits of Binding
Data binding is a fundamental technique in SAPUI5 that allows linking model data to UI controls. Efficient use of this technique can significantly reduce the amount of code needed in a SAPUI5 application, simplifying development and maintenance.
Types of Binding
There are several types of binding modes in SAPUI5 to handle different scenarios:
- One-way binding
- Changes in the model are reflected in the UI, but changes made in the UI do not affect the model.
- Example: Updating the price of a product in the model automatically displays the new price in the UI.
- Two-way binding
- Ensures that both the model and the UI are always synchronized. Any change in one is automatically reflected in the other.
- Example: If the user updates their address in the UI, the model is also updated with the new address.
- One-time binding
- Model values are transferred to the UI only once and do not update afterward.
- Example: Displaying a welcome message that does not change after initially being shown.
- Aggregation Binding
- Aggregation binding is relevant for controls that have multiple child elements, such as tables, lists, or dropdowns. This type of binding allows child controls to be automatically created based on the model data.
- Example: Binding a table to a JSON model containing a list of products. Each row of the table will be automatically generated for each product in the model.
2 | Creating a Project and Binding
Creating a Project
We will create a SAPUI5 project where we configure a user interface (UI) with two input fields for the first name and last name, and a text field to display the full name (a concatenation of the first and last names). When the first name or last name changes, the full name field will automatically update.
Practical Example
- Create an MTA Project
- Select a SAPUI5 application.
- We do not connect to a database in this example.
- Create the XML View
<mvc:View
controllerName="myApp.controller.Main"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<VBox>
<Input id="firstName" placeholder="First Name"/>
<Input id="lastName" placeholder="Last Name"/>
<Text id="fullName" text="{= ${firstName} + ' ' + ${lastName} }"/>
</VBox>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("myApp.controller.Main", {
onInit: function () {
var oModel = new sap.ui.model.json.JSONModel({
firstName: "",
lastName: ""
});
this.getView().setModel(oModel);
}
});
});
3 | The Element Binding Technique
Element Binding
The element binding technique allows a SAPUI5 control to be linked to a specific data element in a model, creating a binding context for the control and all its children.
Practical Example
var oModel = new sap.ui.model.json.JSONModel({
suppliers: [
{
name: "Supplier 1",
products: [
{ name: "Product A" },
{ name: "Product B" }
]
},
{
name: "Supplier 2",
products: [
{ name: "Product C" },
{ name: "Product D" }
]
}
]
});
<mvc:View
controllerName="myApp.controller.Main"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<List items="{/suppliers}">
<items>
<ObjectListItem title="{name}" press="onSupplierPress"/>
</items>
</List>
<Table id="productsTable" items="{}">
<columns>
<Column>
<Text text="Product Name"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{name}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("myApp.controller.Main", {
onInit: function () {
var oModel = new sap.ui.model.json.JSONModel({
suppliers: [
{
name: "Supplier 1",
products: [
{ name: "Product A" },
{ name: "Product B" }
]
},
{
name: "Supplier 2",
products: [
{ name: "Product C" },
{ name: "Product D" }
]
}
]
});
this.getView().setModel(oModel);
},
onSupplierPress: function (oEvent) {
var oContext = oEvent.getSource().getBindingContext();
this.getView().byId("productsTable").setBindingContext(oContext);
}
});
});
4 | How to Perform Advanced Operations like Filtering, Sorting, and Grouping?
Filtering
Filtering allows limiting the data displayed in a list or table based on certain criteria.
Practical Example
- Add Filter in the Controller
var oFilter = new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.Contains, "Product A");
var oList = this.getView().byId("productsTable");
var oBinding = oList.getBinding("items");
oBinding.filter([oFilter]);
Sorting and Grouping
Sorting arranges the data in ascending or descending order, while grouping organizes it based on a specific property.
Practical Example
<mvc:View
controllerName="myApp.controller.Main"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<VBox>
<List id="productList" items="{
path: '/products',
sorter: [
{
path: 'category',
group: true
},
{
path: 'price',
descending: true
}
]
}">
<items>
<StandardListItem
title="{name}"
description="{price}"
info="{category}" />
</items>
</List>
</VBox>
</mvc:View>
- Sorting in the Controller
var oSorter = new sap.ui.model.Sorter("name", false); // false for ascending
var oList = this.getView().byId("productsTable");
var oBinding = oList.getBinding("items");
oBinding.sort([oSorter]);
- Grouping in the Controller
var oSorter = new sap.ui.model.Sorter("supplier", false, true); // true for grouping
var oList = this.getView().byId("productsTable");
var oBinding = oList.getBinding("items");
oBinding.sort([oSorter]);
5 | Model Inheritance
In SAPUI5, a model assigned to a higher level in the view hierarchy is automatically inherited by all lower levels unless overridden at a lower level.
Practical Example
- Define Models in manifest.json
"models": {
"": {
"dataSource": "mainService"
},
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "myApp.i18n.i18n"
}
}
}
- Assign a Named Model in the Controller
var oView = this.getView();
var oModel = new sap.ui.model.json.JSONModel(data);
oView.setModel(oModel, "mainModel");
Resource Model
A resource model is used for internationalization, linking i18n files to obtain translatable texts.
Practical Example
- Create an Instance of the Resource Model
var oResourceModel = new sap.ui.model.resource.ResourceModel({
bundleName: "myApp.i18n.i18n"
});
this.getView().setModel(oResourceModel, "i18n");