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: