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


Monday, 06 May 2019 19:16

SAPUI5 Binding Part 3 – Element Binding Approach 2

Written by
Rate this item
(0 votes)

This is our third part in our Binding Series in SAPUI5 and second part in Element Binding. By now we believe you know that element binding

is used for binding single row. They are like binding a structure or work area in ABAP. In previous approach 1, we made use of the local JSON model. Today, we will look into the router method.

Scenario remains the same:

We are having a table displayed in a view. When user clicks on any item of the table, it should navigate to next view which should display a simple form. Basically, item is one row as work area in normal ABAP program. We are trying to display the item using Element Binding in SAPUI5(approach 2).

Element Binding: Approach – 2

Pass the Path in Router & Bind the Path to the Form


  1. Create view1 (Aggregation view) which contains table
  2. Create view2 (Element view) which contains simple form
  3. Pass the path of the item pressed in table to router in view1
  4. Get the path and bind the path to the form in view2
  5. Execute the application

Also Read: How to Create you First OData Service?

Step – 1: Create view1 (Aggregation view) which contains table control

Controller.js – view1:

Step-2: Create view2 (Element view) whichcontains simple form

Controller.js – view2:

Also Check:An ABAPers First SAPUI5 App in WebIDE End to End

Step – 3: Pass the path of the item pressed intable to router in view1

Step – 4: Get the path and bind the path to theform in view2

Also Take: My first Program in S/4HANA

Step – 5: Test

Execute the application. The table should display the data as per step1.

Now press an item in the table, I am going to press 3rd record. Check the elements of rows are bound and displayed.

Our target audience to these Binding Series is the newbies in UI5, mostly ABAPers (seasoned and fresh) who are venturing into UI5. Just like in any programming language, there can be multiple ways to achieve the same functionality. We show cased two approaches, but there can be other better ways. If you know of more optimized way, please share it with us and our readers. It would help everybody.

Your feedbacks are our motivation. Please let them flow in freely.

In the next article in the series, we would dig into Expression Binding. So, please stay tuned.

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 4745+ 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.

Please SUBSCRIBE to SAPYard’s Youtube Channel for Free End to End SAP Video Course and Training.

Step by Step Tutorials on SAPUI5

Read 67 times

Leave a comment

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