How Can I Modify the Master List Item Selection in SAPUI5 Based on Hash Tag URL Changes?

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

Role Of Data Science Engineer In Data Science 2024

  • Related Posts

    Single Popup Instead Multiple Popup for BAPI Return and Custom Messages

    Get practical on Single Popup Instead Multiple Popup for BAPI Return and Custom Messages. ABAP RAP, ABAP Cloud, ABAP Discs, ABAP Programming interface and so on are the trendy expressions…

    How to pass Reversal Date & Reason to BAPI_ACC_DOCUMENT_POST?

    Know How to pass Reversal Date & Reason to BAPI_ACC_DOCUMENT_POST? One motivation behind why the software engineer’s occupation is the most intriguing one is; you learn new stuff consistently. Regardless,…

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You Missed

    Single Popup Instead Multiple Popup for BAPI Return and Custom Messages

    • By Varad
    • April 22, 2025
    • 11 views
    Single Popup Instead Multiple Popup for BAPI Return and Custom Messages

    How to pass Reversal Date & Reason to BAPI_ACC_DOCUMENT_POST?

    • By Varad
    • April 21, 2025
    • 33 views
    How to pass Reversal Date & Reason to BAPI_ACC_DOCUMENT_POST?

    Automatically Fill Test Data in FM & BAPIs for SE37 – The Lazy Way

    • By Varad
    • April 20, 2025
    • 40 views
    Automatically Fill Test Data in FM & BAPIs for SE37 – The Lazy Way

    How to Add and Change PO Service Line using BAPI BAPI_PO_CHANGE?

    • By Varad
    • April 19, 2025
    • 44 views
    How to Add and Change PO Service Line using BAPI BAPI_PO_CHANGE?

    How to Get Accurate Pricing in SD for Customer and Material?

    • By Varad
    • April 18, 2025
    • 75 views
    How to Get Accurate Pricing in SD for Customer and Material?

    How to update custom field of PRPS table

    • By Varad
    • April 17, 2025
    • 62 views
    How to update custom field of PRPS table