Today we will describe the steps required to embed a custom application within SAP Fiori “My Inbox” application. Use cases of such scenario are endless as customers always have their custom workflows and wish to expose additional functionality to end users.
This tutorial is not related to extending the “My Inbox” application through extension points / implementing BADIs, but rather integrating a stand-alone application within the existing My Inbox application. Such process makes it easier to get over the learning curve, and not deal with Fiori Extensions / BADIs / learning SAP Web IDE tools, in case SAPUI5 developers are working locally (eclipse).
A couple of assumptions before we start:
- You have a running installation of SAP Fiori Launchpad
- You have configured at least one workflow in your SAP
- You have a “My Inbox” application deployed & running on top of your Launchpad and have at least of couple items waiting for approval
Here is a short overview of what we plan to do:
- Develop & deploy a custom application on top of your front end SAP NetWeaver Gateway server
- Configure a navigation target to your custom app within your launchpad
- Customize the workflow intent-based navigation on your back end SAP
Let’s get started with making sure your system is patched to support the case we are working on. Make sure you patch following front end components according to note 2221151:
- IW_PGW
- UIX01CA1
As for back end, make sure you go over note 2274940. Please note there is also a requirement to perform manual activity – you will be required to use transaction SE11 to add the new fixed value “INTENT” with the description “Intent-Based Navigation” to the domain SWFVVTYP.
Once these steps are performed, let’s start implementing our custom application scenario:
1. Develop & deploy a custom application that will be used within My Inbox 2.0
You are welcome to use the tools you prefer, it can be a local Eclipse installation with SAPUI5 toolkit, or SAP Web IDE. I personally prefer the first one. As a result of this step you should a custom application available on your front end, let’s call it ZTEST.
Your app URL should be /sap/bc/ui5_ui5/sap/ztest at this moment, and it should be accessible on your SAP NetWeaver Gateway server.
Please note that your application must be built according to SAP guidelines and have main Component.js file along with manifest.json file that defines the application structure. You should have at least 1 main view which will be the starting point of “root” route point. Please note the “parent” attribute – this is used for “replaceDetail” case, which means this application will be navigated to when user clicks “Open Task” button in the task.
2. Configure navigation target to your custom application
First configure a semantic object “ZTEST” to make it available in your LDP configuration.
Go to your Launchpad Designer, open the role that includes “My Inbox” application (I created a one of my own), and define a navigation target to your application:
Here is the configuration you need to use, please note the “replaceDetails” property which defines how your application will be used within My Inbox:
3. Customize intent-based navigation
This step is performed on your back end SAP instance. Launch transaction SWFVISU and configure the following:
You need a perfect match between your SWFVISU customization & LPD target mapping so your front end server will trigger the proper intent-based navigation event.
Once done, you can click the “Open Task” button in your My Inbox – and there you go!
Feel free to ping us if you have any questions!
