Varad
All ABAP developers secretly adore SAPUI5. Even if they know deep down that they should own and control them, they are nonetheless afraid to accept responsibility for them. Their inability to learn HTML, CSS, or JavaScript prevents them from becoming competent frontend developers from being proficient ABAP developers. But the future of SAP frontend lies with SAPUI5 and Fiori. They offer an improved user experience in addition to an improved user interface. Consequently, begin studying SAPUI5 right now.
The situation is
Our task is to construct a basic master-detail page. When you click on an item on the master page, the app should take you to a detail page where the hash tags have been changed in the URL. At first, the app will load the master page and an empty page without a hashtag.
The item that we have chosen on the master page is chosen.
The details page loads after we manually updated the hashtag in the URL, however the matching master item is not selected despite the new hashtag.
Our goal is to use the hash tag modifications to determine which master item should be chosen.
Note: The app will not be designed using a template.
Measures:
- In the manifest, create targets, routes, and routing.JSON
- Make a master page (View1), an empty detail page (View2), and
- searching the URL for hash tags
- Adding code to modify master list items depending on hash tags
- final result
Step 1: In the manifest, create the routes, routing, and targets.JSON
We have completed our manifest. We must structure our opinions appropriately.
Step 2: Establish the master page.
View1.xml:
View1.controller.js
We must send the binding variable to the router of the next level navigation controller since we introduced it in the navigation pattern at the target section.
Empty.view.xml:
View2.xml:
As shown below, we have generated a fragment inside view2.xml.
From the picture above:
fragmentName=”technical.gyanguru.fragment.moreinfo”>
shows that the fragment is being added as a dependent object of view2.
Info.fragment.xml Moreinfo:
View2.controller.js:
Each code logic’s description is given by a commented line in the image above. If you continue to have problems comprehending it, kindly let us know.
Step 3: Examining the URL for hash tags
Launch the application now. As specified, the master page and empty page will load. displayed below.
Now notice the pattern or hashtag at the end of the empty URL, as seen below.
I’m going to choose an item now, say the second elephant item from the master page.
The graphic above indicates that the second item, Elephant, has been chosen, and the related detail will show up on the detail page after navigation.
Step 4: Adding code to modify master list items depending on hash tags
Click Enter now. It should load the fourth item, Lion, as shown below.
The hash tag indicates that the detail page loaded correctly, but the master list item selection is still on the second item rather than the fourth.
This will be resolved in accordance with the code addition that is indicated below in view2.controller.js.
From the picture above:
Line-31: the master page view object is being obtained. Line-34: the route must be divided to form the precise address of the JSON model.
Line 39: Using the setSelectedItem function, we are allowing the line item in the master page to be picked based on path.
Step 5: Complete Product
Launch the application now. This is how the initial loading would appear:
Press Enter after changing the hash tag value from /animal/2 to /animal/4.
Enchantment. As we can see, the master page’s item selection has changed to highlight the Water bird, and the details are displayed on the detailed screen.
Thank You for your valuable time
you may be interested in this blog here:-
Top SAP Modules in Demand 2024 Insights & Trends
Advanced OOP Concepts in SAP ABAP A Comprehensive Guide
GRC Security: Ensuring Comprehensive Governance, Risk, and Compliance
