UI Integration options in My Inbox

Contents
I. Introduction .......................................................................................................................................... 2
II. Integration options ............................................................................................................................... 2
III. Prerequisites ..................................................................................................................................... 3
IV. Required Configuration ..................................................................................................................... 3
Visualization Configuration in the back-end system (specific to SAP Business Workflow) ...................... 3
Target Mapping Configuration in the Launchpad Designer ...................................................................... 5
Embed in Detail View on Task Selection ............................................................................................... 5
Embed in detail view on Open Task action ......................................................................................... 6
External ................................................................................................................................................. 7
V. Handle Routes in the integrated application (Embed integration option) ........................................... 8
Embed in Detail View on Task Selection ................................................................................................... 9
Embed in detail view on Open Task action ............................................................................................. 9
VI. Updating/Refreshing My Inbox from within the integrated application ........................................ 10
 I. Introduction

It is now possible to integrate an SAPUI5 Fiori application into My Inbox. Multiple ways of integration are
supported by My Inbox in order to facilitate this.

The goal of this document is to explain in detail, the procedure that needs to be followed, in order to
set-up such an integration.

After following this document, you will be able to understand:

The different types of integration supported by My Inbox.

Configurations required for setting-up such an integration with My Inbox.
Technical changes that might be required in the target application for handling routes.
The APIs exposed for refreshing the data in My Inbox from within the integrated application.

II. Integration options

This table outlines the supported integration types and the corresponding actions that trigger the
integration.

Integration Description Action Additional Details

Type
Embedded The target SAPUI5 Fiori
application is embedded
into the detail view of My
Inbox
Embedded The target SAPUI5
application is embedded
into the detail view of My
Inbox
Embedded on selecting a The header and toolbar
task in the master list. in the detail screen is
provided by My Inbox as
shown below. The user
can perform all the
default actions provided
by My Inbox on the
selected task.
Embedded on performing My Inbox does not
the Open Task action render any header or
from the detail view of My footer in this scenario
Inbox. and they should be
provided by the
integrated application.
.The application can
choose to have its own
 set of actions in the
footer bar.

External Navigate out of My Inbox Performing the Open It is recommended that

into the external Task action from the the integrated SAPUI5
application. detail view of My Inbox fiori Application provides
triggers the navigation to a back button which
the target application. can be used to navigate
Note : It is recommended back to My Inbox.
that such an application
has a Back button using
which the user can return
to My Inbox.

III. Prerequisites

The target SAPUI5 Fiori application must be deployed to the same Front-end server as My Inbox.
A target mapping should be created for this application in the SAP Fiori Launchpad designer.
Follow this link to know how to create a target mapping.

The target mapping defined in the previous step should be mapped to the task for which the
integration is intended. This configuration needs to be done in the back-end.
Note : SAP Business Workflow allows such a configuration via the SWFVISU transaction for a
Task type. See section VI.

IV. Required Configuration

Visualization Configuration in the back-end system (specific to SAP Business Workflow)

This configuration defines the mapping between the task and the target mapping defined for the SAPUI5
application. In order to map a task in My Inbox to the target SAPUI5 Fiori application the transaction
SWFVISU should be used in the SAP Business workflow back-end system. The visualization type used
for this purpose is called Intent-Based Navigation.
The following visualization parameters should be maintained

SEMANTIC_OBJECT: <semantic object as configured in Fiori Launchpad>

ACTION : <action name as configured in Fiori Launchpad>

QUERY_PARAM00 : App specific parameters.

QUERY_PARAM01 : App specific parameters.

......

QUERY_PARAM09 : App specific parameters.

As an example we have the following sample configuration parameters maintained in the visualization:

SEMANTIC_OBJECT: WorkflowTask

ACTION : displayCustomApp

QUERY_PARAM00 :

QUERY_PARAM01 :

The below example displays a mapping between a task with the TaskDefinitionID TS00008319 to an
application with the action displayCustomApp2 and semantic object WorkflowTask

Note : App-speciifc query parameters can be maintained using the QUERY_PARAMXX parameters and
would be passed to the application. In this example we do not maintain any query parameters.
For further information on configuring visualizations for the type Intent-Based Navigation follow this
link.

Target Mapping Configuration in the Launchpad Designer

Embed in Detail View on Task Selection

The application is rendered into the detail view of My Inbox on selecting a task in master list.
The header and toolbar in the detail screen is provided by My Inbox as shown below. The user can
perform all the default actions provided by My Inbox on the selected task.

A target mapping for the target SAPUI5 Fiori application should exist in the Launchpad designer with the
value of the parameter openMode set to embedIntoDetails as follows:

Embed in detail view on Open Task action

The application is rendered into the detail view of My Inbox on performing the Open Task action for
the selected task in My Inbox . My Inbox does not render any header or footer in this scenario and they
should be provided by the integrated application. .The application can choose to have its own set of
actions in the footer bar.

A target mapping for the target SAPUI5 application should exist in the Launchpad designer with the
value of the parameter openMode set to replaceDetails as follows:

External
Cross Application navigation to an external application is triggered on clicking the Open Task button
from My Inbox detail view as shown below. In this scenario the user is navigated away from My Inbox to
the configured SAPUI5 application.

It is recommended that the integrated SAPUI5 fiori Application provides a back button which can be
used to navigate back to My Inbox.

A target mapping for the other SAPUI5 application should exist in the Launchpad with the value of the
parameter openMode set to external as follows:

V. Handle Routes in the integrated application (Embed integration

option)
There are different changes that are required in the routing patterns of the integrated application for
supporting internal navigation within the app.

Embed in Detail View on Task Selection

For this type of integration, the target application needs to associate a parent application to its routes.
This can be done as follows:

In the Component.js file of the target application , following changes are required in the routes:

"routes": [
{
"pattern": "",
"name": "mainView",
"view" : "mainView",
"parent":"cross.fnd.fiori.inbox.Component:detail"
},
{
"pattern": "ItemDetails",
"name": "ItemDetails",
"view" : "ItemDetails",
"parent":"cross.fnd.fiori.inbox.Component:detail"
}
]

Embed in detail view on Open Task action

For this type of integration, the target application needs to associate a parent application to its
routes.This can be done as follows:

In the Component.js file of customApp, following changes are required in the routes:

"routes": [
{
"pattern": "",
"name": "mainView",
"view" : "mainView",
"parent":"cross.fnd.fiori.inbox.Component:replace_detail"
},
{
"pattern": "ItemDetails",
 "name": "ItemDetails",
"view" : "ItemDetails",
"parent":"cross.fnd.fiori.inbox.Component:replace_detail"
}
]

VI. Updating/Refreshing My Inbox from within the integrated

application

My Inbox provides an API onTaskUpdate that can be used by the integrated application to update the
selected task

As an example, the integrated application can define a button as shown below, on click of which the
method refreshTask is executed.

The refreshTask method uses the My Inbox API to refresh the task in My Inbox. The code snippet is given
below:

refreshTask: function(){

this.getOwnerComponent.getComponentData().onTaskUpdate();

VII. Limitations

Following are the limitations in the UI integration approach defined in this document:

The deep-linking support is only available for Embed in Detail view on Task Selection.
 Only one level of deep-linking is supported. That means the deep-linking is not possible once the
user navigates within the target application.
Multiple target mappings being used in this scenario cannot have the same application
associated with it. This creates problems in rendering the correct application.