In this article we would develop an end to end App and then explore the Hash Tag of the URL to navigate to the desired view and display your target result.
We are going to create a simple master-detail page. Initially the app will load master page and empty page with no hashtag in URL, while clicking on the item in master page it should navigate to detail page with change is hash tags in URL.
The item we have selected in master page is selected.
Now we have changed the hashtag in URL manually and refresh the screen, the details page is loaded but the corresponding master item is not selected but the hash tag has been changed.
Our intention is to make the master item to be selected based on the hash tag changes.
Note: We are not going to use template to design the app.
- Create routes, routing, targets in manifest.json
- Create masterpage – View1, empty, detailpage-View2
- Looking for hash tags in URL
- Code addition for master list item change based on hash tags
- Final output
Also Check – How to Consume Custom OData in SAPUI5 Application
Step – 1: Create routes, routing, targets in manifest.json
Our manifest is now ready. We have to design our views accordingly
Step – 2:Create Master page,
Since we have introduced a binding variable in pattern at the target section of navigation we need to pass the variable to the router of next level navigation controller.
We have created a fragment inside view2.xml as below
From the above image:
Indicates that we are adding the fragment as dependent object of the view2.
In the above image, description for each code logic is provided by commented line. Please let us know, if you still have trouble understanding it.
Also Read – Lean SAP ABAP Programming for S/4HANA
Step – 3: Looking for hash tags in URL
Now run the application. It will load master page and empty page as configured. Shown below.
Now look at the pattern/hashtag at the end of URL which is empty as below
Now I am going to select an item, for example 2nd item elephant from master page.
From the above image we can notice that 2nd item Elephant has been selected and the corresponding detail appears on the detail page after navigation.
Look at the pattern/hashtag at the end of URL now as below,
Step – 4: Code addition for master list item change based on hash tags
Now I have changed the hashtag URL as:
Now click enter. The screen should load 4th item Lion as below
It loaded the detail page successfully as per hash tag but the master list item selection is still on 2nd item instead of 4th item.
This is going to be fixed based on following code addition in view2.controller.js as shown below.
From the above image:
Line-31: we are getting the master page view object
Line-34: we need to split the path to form exact address of the json model
Line-39: we are enabling the line item in master page to be selected based on path using setSelectedItem method
Step – 5: Final Output
Now run the application. The initial loading would look as below:
Select an item from the master list and check the hash tag as below:
Now change the hash tag value from /animal/2 to /animal/4 and press enter.
Magic.. Now we can see the item selection has been changed in master page (it highlight Water bird) and the detailed screen shows the details.
Please download the complete SAPUI5 application and upload it in your WebIDE and test it yourself.
Hope you were able to understand the concept and usage of hash tags in SAPUI5 URL. Bottom line is, you navigate to any page or item by manipulating the URL hash tag.
I am planning to post series of SAPUI5 tips and tweaks which are needed in real projects. Please stay tuned for more SAPUI5 articles.
We have a very active Telegram (App) SAP Technical Group with more than 4310+ SAP Technical Practitioners from 6 Continents of the SAP World. Please join it using below link.
Telegram SAP Technical Discuss Group. You need to install the Telegram App first on your mobile device. Once you have it on your mobile, you can join the group and also access it from the Web on your computer and laptop.
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