us see the different types of bindings available in SAPUI5.
Types of Bindings in SAPUI5:
This type of binding is used to bind with the UI5 control todisplay array of data (more than one datalike an internal table in ABAP).
Usually Aggregation binding is used with UI5 controls likeTables, Lists (which can display morethan one record)
This type of binding is used to bind with the UI5 control todisplay 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)
Expression binding is used with UI5 controls for conditionalchecks, for example displaying the value of a simple form based on conditionprovided. Depends on success and errorbased on condition the color will showcase for the same.
Property binding allows properties of the control to getautomatically initialized and updated from model data. You can only bind control properties to model properties of a matchingtype, or you use a formatter or a data type to parse and convert the data asneeded.
As the title of the post suggests, in this tutorial we will focus on Aggregation Binding.
Also Check : Free Video Tutorial on SAP OData End to End
We are going to develop a simple application to display a table control with data using aggregation binding.
- Createproject from template
- Preparethe json which would be the mock data
- Configurethe json model in manifest.json
- Mapthe table control in view and do the binding
- Executethe 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 “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 <App>(In case of master-detail it is <Split App>).
And providing the title of the page as shown below
In order to ensure the application, we are executing theapplication which should work fine as below
Also Check: You may take this Free Video Course on HANA Database for ABAP Developers
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 inmanifest. Json
Step-4: Map the Table Control in View and do the Binding
Step-5: Execute the SAPUI5 Application
Also Check – Short Video Course on HANA Transport Container (HTC)
You may upload this sapui5 application project to your system and test it.
If you want to have real time discussions and resolutions, do join our SAP Technical Telegram Group where we have more than 4640+ active SAP consultants from 6 Continents.
Please Note: You need to install Telegram App on your mobile first and then you can join the group using the above link.
Step by Step Tutorials on SAPUI5
- Journey to SAPUI5
- SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part II. Routing and Navigation in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)
- SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5
- SAPUI5 Tutorial with WebIDE. Part V. Navigation in SAPUI5 without Routers
- SAPUI5 Tutorial with WebIDE. Part VI. Using Fragments in SAPUI5 Fiori Applications
- SAPUI5 Tutorial with WebIDE. Part VII. An ABAPer’s First SAPUI5 App in SAP WebIDE
- SAPUI5 Tutorial with WebIDE. Part VIII. Deploy my First SAPUI5 App in WebIDE
- SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()
- SAPUI5 Tutorial with WebIDE. Part X. Using Media Queries in UI5 Application
- SAPUI5 Tutorial with WebIDE. Part XI. An ABAPer’s Second SAPUI5 App
- SAPUI5 Tutorial with WebIDE. Part XII. SAPUI5 Basic Debugging for Beginners
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 1
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 2
- Add Delete & Save Multiple Records in SAPUI5. Part 1 – ADD
- Add Delete & Save Multiple Records in SAPUI5. Part 2 – DELETE
- Add Delete & Save Multiple Records in SAPUI5. Part 3 – SAVE
- Modularization and Large Scale Architecture in SAPUI5
- Expression Binding Overview in SAPUI5
- Use of Third Party (or) External Resources in SAPUI5. Part I – Overview
- Use of Third Party (or) External Resources in SAPUI5. Part II – Practical with Gauges
- SAPUI5 For ABAPers – Component Reuse with Real Time Example
- SAPUI5 for ABAPers – Consuming OData Service from SAPUI5 Application – CRUD Operations
- Trick to Send QR code or Barcode Data Remotely from Android to PC for SAPUI5 App
- Push Notification in SAP – ABAP Push Channel, ABAP Messaging Channel in SAPUI5 – a Real Time Interaction
- How to send e-mail in SAPUI5 Hybrid App?
- How to Get Weight from the Weigh Scale/Weigh Bridge Bluetooth Device using SAPUI5 Hybrid App?
- SAPUI5 – How to Change the Master List Item Selection Based on Changes in Hash Tag URL?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application? Approach 1
- SAPUI5 – How to change the background color of sap.m.Table’s cells of each row based on specific condition?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application – Approach 2
- SAPUI5 Binding Part 1- Aggregation Binding in Table Control
- SAPUI5 Binding Part 2 – Element Binding Approach 1
- SAPUI5 – Factory Functions for Beginners
- SAPUI5 Binding Part 3 – Element Binding Approach 2