How to set a Fiori Elements object page as a detail page of SAP My Inbox application

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%20Diagram

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%20Container%20-

Component Container –

Manifest%20Changes

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%20Definition

Route Definition

Target%20Definition

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%20Parameter%20-%20%26%23x60%3BChild%26%23x60%3B

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%20creation%20in%20SWFVISU%20Transaction

entry creation in SWFVISU Transaction

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

Fiori%20Configuration

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%20Snippet%20for%20Full%20Screen

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.