Cross Application Navigation Between SAPUI5/FIORI Applications In Fiori Launchpad

Hi Everyone,

Today, I’m writing a blog about cross-app navigation. This feature is essential for allowing users to move seamlessly between different FIORI/SAPUI5 applications without losing their context.

Below, I’ll guide you through a simple step-by-step process to implement cross-app navigation.

Overview:

Cross Application Navigation is to navigate between different applications in the Fiori Launchpad without coming to the Home Page.

We can do this from a Custom Fiori app to a Standard Fiori app. Alternatively, we can navigate from a Custom Fiori app to another Custom Fiori app OR Sapui5 to Sapui5 App in Fiori Launchpad .

This can be done in the Fiori Launchpad .

To do cross App navigation, we need to deploy application to ABAP repository and configure Fiori launchpad .

Please follow the below link to deploy application to ABAP repository and configure Fiori launchpad .

Deploy Application To ABAP Repository

Cross app navigation is achieved by deploying two applications in Fiori Launchpad for demonstration I have deployed two applications as shown in below screenshot.

Deployed two applications in Fiori launchpad

How to do Cross Application Navigation :

To enable cross-app navigation, all applications must be assigned to specific intents. An intent consists of a semantic object and an action.

For creating semantic objects and more information about semantic objects click Here .

Here I have taken ZAPP1_semobj1 as semantic object for first application and ZAPP2_SEMOBJ2 as a semantic object for second application.

So, to do cross-application navigation, we need the semantic object and the action name of the target application.

We can trigger a target application by an event from a Fiori Application or a response inside a backend service call.

It is also important to assign the role to the user for the target application you want to navigate during cross application navigation.

Creating a Sample Applications and Navigating to a APPLICATION2 AT THE CLICK OF A BUTTON

Application 1:

1.Create an application to a Button control to submit the product Id View1.view.xml

<mvc:View controllerName=”applicationcross1.controller.View1″
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns=”sap.m”>
<Page id=”page1″ title=”Application1″>

</Page>
</mvc:View>

2. Enter the following code to the “onPress” Function in the controller file to do the Cross Application Navigation to the application “Application1” and pass the ProductID

View1.controller.js

sap.ui.define([
“sap/ui/core/mvc/Controller”
],
function (Controller) {
“use strict”;

return Controller.extend(“applicationcross1.controller.View1”, {
onInit: function () {

},
onPress:function(){
debugger
var xnavservice = sap.ushell && sap.ushell.Container &&
sap.ushell.Container.getService &&
sap.ushell.Container.getService(“CrossApplicationNavigation”);
var href = ( xnavservice && xnavservice.hrefForExternal({
target : {
semanticObject : “ZAPP2_SEMOBJ2”,
action : “display”
},
params : { “ProductID” : “102343333” } })) || “”;

var finalUrl=window.location.href.split(“#”)[0] + href;
sap.m.URLHelper.redirect(finalUrl,true)
}
});
});

3. Run the application

Output of application1

Application 2:

1.In this application I have created a Button control to receive the product Id

View1.view.xml

<mvc:View controllerName=”applicationcross2.controller.View1″
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns=”sap.m”>
<Page id=”page2″ title=”Application2″>
<Panel width=”auto” class=”sapUiResponsiveMargin”>
<headerToolbar>
<OverflowToolbar>
<Title text=”Receiving Data From Application 1″/>
<ToolbarSpacer />

2.Enter the following code Into the Onintit function in the controller file to receive data from “Application1” like ProductID

View1.controller.js

sap.ui.define([
“sap/ui/core/mvc/Controller”
],
function (Controller) {
“use strict”;

return Controller.extend(“applicationcross2.controller.View1”, {
onInit: function () {
debugger
var rec2 = this.getOwnerComponent().
getComponentData().startupParameters.ProductID[0]
this.byId(“bt1”).setText(rec2);
}
});
});

Here is the output of cross application navigation.

In Fiori launchpad both application is present

Both application present in Fiori launchpad

Click on App1 Tile it will open application1

Here is the output of application1.

Click on button !SendData

Output of application 1 in Fiori launchpad

Here is the output of application2.

I received Id in button

Output of application2 in Fiori launchpad

Thanks and Regards,

Deepa Ramesh Ragho