Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Dipankar
Participant
Introduction:

This blog showcases the approach I took to achieve the requirement of Customizing SAP My Inbox App. Even though it comes many extension possibilities like extending detail page (regular extension approach) or add more attributes to the detail page. But achieving the requirement when your app is Fiori Elements was challenging.

Requirement:

As part of other requirements, we had developed a List Page ->Object Page application. For My Inbox app’s detail page, we wanted to reuse this previously developed object page. Instead of creating a new app for the detail page, we wanted to reuse to reduce development and maintenance efforts.

Architecture:

I created a new wrapper UI5 application, which consumed the FE as a Component. It had the logic to load the FE elements app and then navigate to the Object Page with the selected context. Below diagram explains it.

 

 


Architectural Diagram


 

Let us see the details now.

First step was to create a new UI5 application as below.

A Custom SAPUI5 App was created, and Component reuse concept was utilized.

Component Container –“usage=dashboard” is the name of the app given on the manifest


Component Container -



Manifest Changes


Routes

A specific route is defined as mentioned in the above blog. And this route contains the path:”detail/{scenarioid}/{wfInstanceId}/{taskPath} and the Dashboard App component as target. This is the same path that will be fired from the My Inbox when a task is selected.

“&/detail/LOCAL_TGW/000001577878/TaskCollection(SAP__Origin='LOCAL_TGW',InstanceID='000001577878')”

Manifest – Routes ->

(Pls Note : prefix as child was used to know whether the Dashboard App is being run from My-Inbox, found this way cool to handle)

 


Route Definition



Target Definition


 

Pls note – No Routingmacthed parameter isn’t required in our case as we are reusing the component and the Detail App is a Fiori Elements App.

Next parameter of the Route- “&/Child/zgc_c_requests(req_uuid=guid'00505694-0AD9-1EED-A4CD-A9CC33EA8180',IsActiveEntity=true)”

So on Init of ListReportExt.controller , the hashkey parameter is checked for “Child” parameter and nav.to triggered.


Hashkey Parameter - `Child`


Now let us configure the newly created app.

New entry created for our task with “Intend-Based Navigation”. At least an entry for “SEMANTIC_OBJECT” and “ACTION” is required which is then used in the Fiori Configuration.

Entry created using the SWFVISU transaction


entry creation in SWFVISU Transaction


Fiori Configuration – Target Mapping (Semantic Object, Action and the Parameter below)


Fiori Configuration


 

Let us try loading the app and clicking on an item. But the whole App is getting loaded instead of loading the detail page alone


Our App


 

After lot of analysis, nav.to was written above for the navigation and another check was written to enable the detail page Full Screen (Please let me know if there is any better solution to it, looked apt to me for that time)


Code Snippet for Full Screen


 

Issues after deployment-

  • Floating Toolbar of the detail page of the Child App is shown below ->  you can hide by getting the id of the toolbar and setting it visible(false)

  • My-Inbox Footer bar and Header Layout Issue -> you can fix this layout issue by handling the height of the custom app to 85%.


Conclusion:


In conclusion, this is how I was able to show the Customized User Task using an wrapper UI5 app.  Hope you find it useful and do share yours with me in comments.


Our App in My-Inbox User task


SAP Note - 2305401 - Integration of SAPUI5 Fiori Applications into My Inbox 2.0 - SAP ONE Support Launchpad

SDK - Enabling Routing in Nested Components - Documentation - Demo Kit - SAPUI5 SDK (ondemand.com)

 

Keep learning & Keep Sharing!!

Special Thanks to @KrishnaKammaje
2 Comments
Labels in this area