Fiori and SAPUI5 are the secret love of all ABAP Developers. Deep in the heart they want to own them and master them but they still fear to accept them and take the responsibility. No knowledge or little knowledge of HTML, CSS, JavaScript prevent them from evolving from a good ABAP developer to a decent frontend developer. But SAPUI5 and Fiori are the future of SAP frontend. They not only provide better User Interface, but also a better User Experience. It is never too late to learn anything.
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.
Scenario:
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.
Steps:
- 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
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,
View1.xml:
View1.controller.js
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.
Empty.view.xml:
View2.xml:
We have created a fragment inside view2.xml as below
From the above image:
<code><core:Fragment fragmentName="sap.sapspot.fragment.moreinfo" type="XML"></core:Fragment></code>Moreinfo.fragment.xml:
View2.controller.js:
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.
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.
