Skip to Content
Technical Articles
Author's profile photo Wouter Lemaire

Fiori My inbox integration of custom detail page

Goal

The Fiori My Inbox app comes with many extension possibilities, like showing other fields from your workflow in the master, add more attributes to the detail page,.. For advanced extensions, you can even extend the UI5 app of the My Inbox by using extension points.

 

What I wanted to do was not extending the UI5 app but replacing the detail page of the my inbox with the detail page of my app. I had an app for creating requests that requires approval. This app exists out of a master and detail page.

In the My Inbox app, I wanted to use the same detail page from my app for the tasks coming from the request app. The detail page in the My Inbox will be the same as in my original app but in read only mode. So the My Inbox app will show the list of tasks that requires approval. As soon as a task, from my request app, is selected it should open the detail page of the request app in read only.

SAP provides a note to achieve this but this was not working as described in the note. Nevertheless, I was able to solve it with a few small adjustments. This is the note that I’ve used as a starting point:

 

https://launchpad.support.sap.com/#/notes/2305401

 

In this blog post I want to share the small adjustments I’ve made because I think the note is a bit outdated and others might face the same issue.

 

Solution

First step, configure the workflow task in the backend system using transaction SWFVISU. This transaction contains the navigation configuration for a specific task of a workflow which will be used by the My Inbox app. 

Create a new entry for your task with “Intend-Based Navigation”. This is needed for the Fiori version of the My Inbox:

Select the created entry and click on “Visualization Parameters”. This contains the navigation configuration for the “Intend-Based Navigation” of the selected task. It requires at least a “SEMANTIC_OBJECT” and “ACTION” for “Intend-Based Navigation”. The semantic object and action refer to the semantic object and action that’s defined in the Fiori configuration of the request app. I’m using the same target mapping for the app as for the my inbox.

In my case, I also wanted to know the id of the request in the workflow. The detail page of the app needs this to load all the information of the request. Therefore I’ve added a “QUERY_PARAM00” that contains the name of the parameter and an attribute from the workflow. In my case the ID contains the id of the request.

I’m using the same target mapping for the My Inbox configuration. This target mapping requires an additional parameter for the integration with the My Inbox.

Semantic object and action are exactly the same as in the previous configuration.

Next to that, I added the parameter “openMode” to make the target compatible with the My Inbox. The value of it contains “embedIntoDetails”. This will make sure that the My Inbox app will show the detail page of the request app in inside of it and not open the request app in a new window.

Other options are explained in the sap note that I’ve mentioned earlier.

In case  you use the same target mapping for the tile of your app, you might have to add this parameter in the tile config.

 

In the custom app that I want to show in the My Inbox app, I will have to define a specific route to react on the navigation of the my inbox. This route contain the path:”detail/{scenarioid}/{wfInstanceId}/{taskPath}” and the detail view as target. This is the same path that will be fired from the My Inbox when a task is selected.

This part is slightly different from the sap note. Probably because of the router changes in ui5 since 1.60 as mentioned in this blog post: https://blogs.sap.com/2020/02/05/ui5er-buzz-46-routing-with-nested-components/

Full router config (generated config from master detail template + route for my inbox)

"routing": {
	"config": {
		"routerClass": "sap.f.routing.Router",
		"viewType": "XML",
		"viewPath": "be.wl.my.app.view",
		"controlId": "layout",
		"controlAggregation": "beginColumnPages",
		"bypassed": {
			"target": "notFound"
		},
		"async": true
	},
	"routes": [
		{
			"pattern": "",
			"name": "master",
			"target": "master"
		},
		{
			"pattern": "detail/{id}",
			"name": "object",
			"target": [
				"master",
				"object"
			]
		},
		{
			"pattern": "detail/{scenarioid}/{wfInstanceId}/{taskPath}",
			"name": "wfobject",
			"target": "object"
		}
	],
	"targets": {
		"master": {
			"viewName": "Master",
			"viewLevel": 1,
			"viewId": "master"
		},
		"object": {
			"viewName": "Detail",
			"viewId": "detail",
			"viewLevel": 1,
			"controlAggregation": "midColumnPages"
		},
		"detailObjectNotFound": {
			"viewName": "DetailObjectNotFound",
			"viewId": "detailObjectNotFound",
			"controlAggregation": "midColumnPages"
		},
		"notFound": {
			"viewName": "NotFound",
			"viewId": "notFound"
		}
	}
},

The navigation of the my inbox app will be catched in the detail controller by defining an event handler for that route based on the matched pattern.

onInit: function () {
this.getRouter().getRoute("object").attachPatternMatched(this._onObjectMatched, this);
this.getRouter().getRoute("wfobject").attachPatternMatched(this._onWFObjectMatched, this);
},

This event handler will be able to access the parameters coming from the my inbox app by using the startup parameters. In my case this parameter will contain the id of the request which I need to get all the information of it.

At the end of the route matched function, I also add a class to the detail page to show it properly in the my inbox app.

_onWFObjectMatched: function (oEvent) {
	this.getModel("appView").setProperty("/layout", "MidColumnFullScreen");
	var compData = this.getOwnerComponent().getComponentData();
	if (compData 
			&& compData.startupParameters 
			&& compData.startupParameters.Param1 
			&& Array.isArray(compData.startupParameters.Param1) 
			&& compData.startupParameters.Param1[0]) {
				
		var id = compData.startupParameters.Param1[0];
		this.byId("detailPage").addStyleClass("myInboxPage");
		this.showDetail(id);
	}
},

The parameter of the config in SWFVISU will be the same in the startup parameters.

One last thing, to visualise the detail page correctly the following css needs to be added:

.myInboxPage{
    height:85% !important;
}

Result, my inbox with a detail page from another app:


 

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Syambabu Allu
      Syambabu Allu

      Hi Wouter,

      Great Blog.

      Thanks for sharing!

      Thank you,

      Syam

      Author's profile photo Clark Dennison
      Clark Dennison

      Can you show the entire detail control code and the XML for the detail view?  Great Blog and thanks so much for this.

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      The detail page is part of another bigger app which I’m not able to share..

      Author's profile photo Sandeep Kumar
      Sandeep Kumar

      Hi Wouter Lemaire ,

      Thanks for the Great blog, was very helfuly. by refering was able to integrate a custom application.

      Just have few technical Challenge which i am facing for my senario, will be helful if you provide some valuable input.

      1. How to Accept Manager Input from custom screen, the Footer in My Inbox is standard one, if we extend My Inbox and add custom buttons, then Visual paramter configuration  do not work.
      2. Even if we complete the WF from custom App, List is not updating. How we can catch the standard app event in custom application.

      Regards,

      Sandeep

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Not sure, we only use it for display only. If you want to use it for changing data I would put a save button in the custom page but not change the default toolbar.

      Author's profile photo Sandeep Kumar
      Sandeep Kumar

      Hi Wouter Lemaire ,

      It Worked. 🙂

      I tried to put a Button in Custom page itself but it did not completed and refesh the List in My Inbox.

      So,I extended the My Inbox S3 controller method "extHookChangeFooterButtons" and made a call to custom Odata to update the Work Item and called the sendAction() method to trigger the Work Flow completion BADI extension.

      In Standard My Inbox for version 1.23.21, they are calling sendAction() method in S3.controller.js for WF completion and showDecisionDialog() method for the Dialog box popup.

      Regards,

      Sandeep Rai

      Author's profile photo Sandeep Kumar
      Sandeep Kumar

      Wouter Lemaire ,

      There is one more patter available in My Inbox for complete Detail page replacement.

      "replaceDetail/{SAP__Origin}/{InstanceID}/{contextPath}" under "replace_detail" namespace, but it is triggering from Open Task button only. may be i am doing something wrong ?

      Regards,

      Sandeep Rai

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Don’t know, haven’t used that..

      Author's profile photo Sandeep Kumar
      Sandeep Kumar

      Hi Wouter Lemaire ,

       

      Just to Corret my self, Visual paramter configuration is working for Extended My Inbox application also.

       

      Regards,

      Sandeep Rai

      Author's profile photo Rodrigo Garcia Sallanes
      Rodrigo Garcia Sallanes

      Great! Thanks for sharing, it worked for me.

      Do you know how to do the same thing in BTP My Inbox app?

      Thank you.

      Author's profile photo Paul Rintisch
      Paul Rintisch

      Thank you for the great post!

      Is it possible to use that scenario for a Fiori Elements application with jumping directly to the Objectpage?

      My stand alone App is working fine so far (providing a key in the url for skipping the List Report). How can I achieve that in the MyInbox custom detail page?

      Thank you! 🙂

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      In theory it should work exactly the same but haven’t tried it myself. Fiori elements might be a bit more complex…

      Author's profile photo Paul Rintisch
      Paul Rintisch

      Thank you for the fast reply! The configuration in SWFVISU is working so far, the target mapping also. Whats missing is the direct routing to the object page. Do you know how to achieve that with OData V2? In your example, the routing is based on xml views with a path, which I guess I don´t have with the sap.suite.ui.generic.template. Do you have any example or solution for this? Can´t find any helpful documentation or blog entry.

      Thank you 🙂

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Interesting question:) You need to have a route in your app exactly like I defined in the blog post otherwise it won’t work. Fiori elements generate the routes based on the config and I don’t know if it is possible to change the standard routes.

      An idea that I’m thinking of but not sure if it will work would be to create a complete custom app which you use as a proxy app for your fiori elements. In this custom app you can define a custom router. In the onRouteMatched event handler you load the fiori elements as a component in your custom app. You should be able to pass workflow properties when loading the component to the fiori element.

       

      Author's profile photo Aqib Pathan
      Aqib Pathan

      Hi! Wouter

      Thanks for nice blog. I have query though. In SWFVISU definition you have just defined one parameter while in the manifest.json pattern you are defining 3 parameters.

       

      "pattern": "detail/{scenarioid}/{wfInstanceId}/{taskPath}",

      I guess Param1 corresponds to {scenarioid}

      Can you explain this? If you are already getting the request id, do you still need other parameters?

       

      Regards,

      AQIB

      Author's profile photo Adnan Maqbool
      Adnan Maqbool

      Hi All

      Any idea about below code as details of showDetail is missing.

      this.showDetail(id);
      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      This function should contain your own code to fetch the data for your app.