Standard service - a fixed amount of work that is performed at a fixed price.  Post Service

  

Thursday, 25 April 2019 04:17

SAPUI5 Binding Part 1- Aggregation Binding in Table Control

Written by  https://sapyard.com/sapui5-aggregation-binding-in-table-control/
Rate this item
(0 votes)

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:

  1. Aggregationbinding
  2. Elementbinding
  3. Expressionbinding
  4. Propertybinding

Aggregation Binding:

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)

Element Binding:

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)

Expressing Binding:

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:

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

Scenario:

We are going to develop a simple application to display a table control with data using aggregation binding.

Steps:

  1. Createproject from template
  2. Preparethe json which would be the mock data
  3. Configurethe json model in manifest.json
  4. Mapthe table control in view and do the binding
  5. 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 “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 <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)

Output:

This is a simple tutorial to showcase the Aggregation Binding in SAPUI5 Application. If you still have any confusion, please feel free to write your questions in the comment section below. You may also reach us at This email address is being protected from spambots. You need JavaScript enabled to view it. or This email address is being protected from spambots. You need JavaScript enabled to view it..

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

Read 204 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.