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 launchpadDeployed 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″>

<Panel id=”p1″ width=”auto” class=”sapUiResponsiveMargin”>
<headerToolbar>
<OverflowToolbar id=”ov”>
<Title text=”Sending Data to Application 2″ />
<ToolbarSpacer />
<Button text=”SendData” icon=”sap-icon://information” press=”onPress”></Button>
<Button icon=”sap-icon://settings” />
<Button icon=”sap-icon://drop-down-list” />
</OverflowToolbar>
</headerToolbar>
<content>
<Text text=”” />
</content>
</Panel>

</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 application1Output 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 />

<Button icon=”sap-icon://settings” />
<Button icon=”sap-icon://drop-down-list” />
</OverflowToolbar>
</headerToolbar>

<content>
<Text text=”Welcome To Application 2″ />
<ToolbarSpacer />
<Button text=”” id=”bt1″></Button>
</content>
</Panel>
</Page>
</mvc:View>

 

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 launchpadBoth 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 launchpadOutput of application 1 in Fiori launchpad

 Here is the output of application2. 

I received Id in button  

Output of application2 in Fiori launchpadOutput of application2 in Fiori launchpad

 

Thanks and Regards,

Deepa Ramesh Ragho

 

 

 

 

 

 

 

 

Scroll to Top