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


Wednesday, 01 May 2019 14:57

SAPUI5 Binding Part 2 – Element Binding Approach 1

Written by
Rate this item
(0 votes)

We have starting our series on Binding in SAPUI5 from our last article. In this tutorial we would look into the next binding, i.e. Element Binding. As

mentioned already in previous article, element binding is used for binding UI5 controls to display single record. ABAP developers can relate them to work area. If you are still confused, please go through the scenario and steps explained below and it would start clarifying your doubts.


We are having a table displayed in a view. When user clickson any item of the table, it should navigate to next view which should displaya 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.


The above scenario can be done in multiple approaches. We aregoing to demonstrate two approaches:

  1. Approach– 1 (Set and Get using local JSON Model)
  2. Approach– 2 (Pass the path in router and bind the path to the form)

Also Check : Free Video Tutorial on SAP OData End to End

In this article, we would dive deep into approach 1 where we use Json Model.

Element Binding:Approach – 1

Set and Get Using LocalJson Model


  1. Createview1 (Aggregation view) which contains table
  2. Createview2 (Element view) which contains simple form
  3. Createlocal json model in view1 to hold the value of item pressed in table
  4. Setthe model globally in view1
  5. Getthe model in view2
  6. Setthe value to the simple form
  7. Executethe application

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

As explainedin last article, entityset name “animals” is bound as aggregation with table “items”.

Controller.js – view1:

Wondering what is sItemIndex?

We are getting the path from binding context which would look like /animal/0. We need to pass this path to the next view in router, and the path has ‘/’ slash character which could not be sent in router as it accepts only data type string. So, we are splitting the path and sending only the number ‘0’ from the path.

“EleRoute” is the name of the Router which is used for navigating to the next view. You can name it anything.

As explained above, sItemIndex has value ‘0’ or the index of the line item.

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

Take a note of the {local_model>name} or{local_model>city} etc. These are element binding. A model named local_modelis bound to each element viz name, city, place, type and photo.

Controller.js – view2:

Do not be puzzled with the word “herculis”. ? You may name it as my ElementBinding.

Once the route matched pattern is reached, we have to take the path value say ‘0’ which we have passed from the previous view. After receiving the value, we will concatenate the string path and do the element binding. In order to perform this activity, we are using event handler and writing the logic inside it (we have named the function herculis, you can name it atlas). ?

Also Check: You may take this Free Video Course on HANA Database for ABAP Developers

Step – 3: Create local json model in view1 tohold the value of item pressed in table

Step – 4: Set the model in globally in view1

Step – 5: Get the model in view2

Step – 6: Set the value to the simple form

Step – 7: Execute the application

Now the table should display the data as per step1.

Now press an item in the table, I am going to press 3rdrecord which should put the data in local json

Note: Item press is the event handler function of pressing arecord in table

Now we are setting the data in local json. Check the debuggerscreen below.

Keep the debugger in our view2 controller to get the datafrom the local model as below.

Also Check :Detailed Step by Step Training on ABAP on HANA.

Now execute the debugger to see the final output. Check thesimple form which has element binding, is displayed.

This was a very simple example for beginners. We did notoverwhelm the beginners with more complex scenarios. You are learning the ABCsof UI5 with us. If you have the fundamentals, you can design complex UI5 applicationsyourself.

In the next article, we would explore Element Binding using Path in Router and Form. 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 4675+ 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 126 times

Leave a comment

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