Cross-app Navigation in SAP Fiori launchpad

In this blog, I would like to discuss on Cross-app navigation, which is from one SAP UI5 application to the other in the SAP Fiori launchpad.

I have created two  SAP UI5 applications:

1. app1 consist of an “employee Id” field and a “get employee Id” button.
2. app2 Consist of a simple text.

In the Fiori launchpad, I am calling app2 from app1.

In case of internal navigation in the SAP UI5, which is from one view to the other view / from one page to other: we define our root view, patterns and targets.

In the same way, in order to achieve cross-app navigation in SAP Fiori we define intents in the SAP UI5 application. Intents acts as a target and is mapped with the actual URL at run time. Intents comprises of a semantic object and action to be performed.

Our goal is to navigate to app2, so in the app2 we need to define the intents. In the navigation tab of manifest.json file provide the semantic object name and action to be performed as display

Now in the first application ( app1 ) write the code in the controller as follows.

	onPress: function(oEvent) {
		 
			// get a handle on the global XAppNav service
			var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation"); 
			oCrossAppNavigator.isIntentSupported(["employeeId-display"])
				.done(function(aResponses) {

				})
				.fail(function() {
					new sap.m.MessageToast("Provide corresponding intent to navigate");
				});
			// generate the Hash to display a employee Id
			var hash = (oCrossAppNavigator && oCrossAppNavigator.hrefForExternal({
				target: {
					semanticObject: "employeeId",
					action: "display"
				}
			})) || ""; 
			//Generate a  URL for the second application
			var url = window.location.href.split('#')[0] + hash; 
			//Navigate to second app
			sap.m.URLHelper.redirect(url, true); 
		}

Deploy the apps to Fiori cloud platform by selecting our intent while registering to Fiori launchpad as follows:

Now when you try to navigate from application1 ( app1 ) to application ( app2 ) in the Fiori launchpad by hitting get employee Id button.

you will encounter the following issues:

•  Failed to resolve navigation target: “#employee-display” –  sap.ushell.renderers.fiori2.Shell.controller.
• Could not open app. Please try again later.

This is because the conflict between the semantic object name specified in SAP UI5 application and semantic object name in Fiori launchpad.

Change the semantic object name and action in the SAP UI5 application controller as specified in Fiori launchpad.

oCrossAppNavigator.isIntentSupported([“app2-Display“])
.done(function(aResponses) {

})
.fail(function() {
new sap.m.MessageToast(“Provide corresponding intent to navigate”);
});
// generate the Hash to display a employee Id
var hash = (oCrossAppNavigator && oCrossAppNavigator.hrefForExternal({
target: {
semanticObject: “app2”,
action: “Display”
},
params: {
“EmpId”: emp
}
})) || “”;

Now you will navigate to the URL obtained in the app1 which is to our app2.

Hope its useful!!

Thank you 🙂