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

  

Tuesday, 19 March 2019 03:32

SAPUI5 – How to Change the Master List Item Selection Based on Changes in Hash Tag URL?

Written by 
Rate this item
(0 votes)

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. So, without further delay, kick start your SAPUI5 learning from here. 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:

  1. Create routes, routing, targets in manifest.json
  2. Create masterpage – View1, empty, detailpage-View2
  3. Looking for hash tags in URL
  4. Code addition for master list item change based on hash tags
  5. Final output

Also CheckHow 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,

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:

1
2
<code>&lt;core:FragmentfragmentName="sap.yard.fragment.moreinfo" type="XML">&lt;/core:Fragment></code>

Indicates that we are adding the fragment as dependent object of the view2.

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.

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

http://localhost:62871/webapp/index.html?hc_reset&origional-url=index.html&sap-ui-appCacheBuster=..%2F&sap-ui-xx-componentPreload=off

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,

http://localhost:62871/webapp/index.html?hc_reset&origional-url=index.html&sap-ui-appCacheBuster=..%2F&sap-ui-xx-componentPreload=off#/animal/1

Step – 4: Code addition for master list item change based on hash tags

Now I have changed the hashtag URL as:

http://localhost:62871/webapp/index.html?hc_reset&origional-url=index.html&sap-ui-appCacheBuster=..%2F&sap-ui-xx-componentPreload=off#/animal/3

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

Read 57 times

Leave a comment

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