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.
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
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/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
Application 2:
1.In this application I have created a Button control to receive the product Id
View1.view.xml
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/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
Click on App1 Tile it will open application1
Here is the output of application1.
Click on button !SendData
Here is the output of application2.
I received Id in button
Thanks and Regards,
Deepa Ramesh Ragho