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
- Create view1 (Aggregation view) which contains table
- Create view2 (Element view) which contains simple form
- Pass the path of the item pressed in table to router in view1
- Get the path and bind the path to the form in view2
- 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:
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.
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
- 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 Load a Full Screen and Navigate to Master-Detail Application – Approach 2
- SAPUI5 – How to change the background color of sap.m.Table’s cells of each row based on specific condition?
- SAPUI5 Binding Part 1- Aggregation Binding in Table Control
- SAPUI5 Binding Part 2 – Element Binding Approach 1
- SAPUI5 Binding Part 3 – Element Binding Approach 2
- SAPUI5 Binding Part 4 – Expression Binding Approach 1
- SAPUI5 Binding Part 5 – Expression Binding Approach 2
- Expression Binding Overview in SAPUI5
- SAPUI5 – Factory Functions for Beginners