In this article we would focus on Aggregation Binding in SAPUI5. It is one of the commonly used bindings in any SAPUI5 application. Before we proceed further, let us see the different types of bindings available in SAPUI5.
Types of Bindings in SAPUI5:
- Aggregation binding
- Element binding
- Expression binding
- Property binding
Aggregation Binding:
This type of binding is used to bind with the UI5 control to display array of data (more than one data like an internal table in ABAP).
Usually Aggregation binding is used with UI5 controls like Tables, Lists (which can display more than one record)
Element Binding:
This type of binding is used to bind with the UI5 control to display single record (like a work area in ABAP).
Element biding is used with UI5 controls like Simple form, smart form, etc. (which can display only one record)
Expressing Binding:
Expression binding is used with UI5 controls for conditional checks, for example displaying the value of a simple form based on condition provided. Depends on success and error based on condition the color will showcase for the same.
Property Binding:
Property binding allows properties of the control to get automatically initialized and updated from model data. You can only bind control properties to model properties of a matching type, or you use a formatter or a data type to parse and convert the data as needed.
As the title of the post suggests, in this tutorial we will focus on Aggregation Binding.
Scenario:
We are going to develop a simple application to display a table control with data using aggregation binding.
Steps:
- Create project from template
- Prepare the json which would be the mock data
- Configure the json model in manifest.json
- Map the table control in view and do the binding
- Execute the application and test
Step – 1: Create project from template
Click the home icon in the left hand side and select “New Project From Template” as shown below:
Choose SAPUI5 Application as below:
Click “Next”. Provide Project Name and Namespace as shown below:
Click “Next”. Provide the view name
Click “Next”
Click “Finish”. Our New project has been created as shown below:
Since we are going to show this app in full screen I am keeping my Main.view.xml as my root view with control (In case of master-detail it is ).
And providing the title of the page as shown below
In order to ensure the application, we are executing the application which should work fine as below
Step-2: Prepare the json which would be the mock data
Prepare the mock json data as shown below:
Add this json file in the respective folder as below:
Step-3: Configure the json model in manifest. Json
Step-4: Map the Table Control in View and do the Binding
Step-5: Execute the SAPUI5 Application
Output:
