Implementing the CrossApplicationNavigation Service

After the recap of the target mapping and the tile configuration, we want to take a look on how to implement navigation using the class sap.ushell.services.CrossApplicationNavigation.

The CrossApplicationNavigation service is used to navigate from one SAP Fiori application to another. We will next see how to implement navigation using the class sap.ushell.services.CrossApplicationNavigation and how to use CrossApplicationNavigation service in custom SAP Fiori Application implemented as SAPUI5-freestyle application.

Let's look at the code snippet that triggers navigation using the  CrossApplicationNavigation service.

The code snippet shows how to use the sap.ushell.services.CrossApplicationNavigation. In the display onInit implementation, we will check in the first line of code whether the application is running in the SAP Fiori Launchpad or not.

Remember one of the golden SAPUI5 rules was Every SAP Fiori app must run as a web app. This says that it should also be possible to run the application outside of the SAP Fiori Launchpad, of course we limited features, but it runs.

If the reference to sap.ushell.Container.getService can be resolved, the reference to the getService function is stored in the variable _fnGetService. Next we can call the function and pass the value CrossApplicationNavigation as a parameter. In the third line of the implementation we call the function hrefForExternal and pass the name of the semantic object and the action to the function as parameter.

The parameter _hash will contain the calculated hash. In the shown example the value is #UX410NavEnd00-display. And this is the value that was created automatically during target mapping configuration.

The implementation of the onPress function in the code snippet will trigger the navigation directly.

As you can see in the implementation, it is also possible to pass simple key-value pairs as navigation parameter to the target. The target application is able to fetch these data and work with them.

Next, we will look at the code snippet that shows how to work with navigation parameters.

In the code snippet, you can see how to handle parameters that were passed during intent-based navigation. The navigation parameters sent by the navigation initiator will be stored in the parameter startupParameters of the target application. In our example the first application passed a parameter with the name helloText and the value Hello UX410. Please have in mind that the parameter helloText is handled as an array inside the target application.

Time to look at an end-to-end example to explain implementation of CrossApplicationNavigation service.

Let's say that the user has two applications in the SAP Fiori Launchpad. These applications are named startnavigation and endnavigation. To complete a business process, the user has to navigate, after the user has completed the first task of the process, to another application, pass arguments to that second application, and proceed in the second application.

We will next look at a series of videos explaining the usage of CrossApplicationNavigation service to navigate from the startnavigation application to the endnavigation application.

Watch the first video to see how to implement the link and button controls to navigate from the startnavigation application to the endnavigation application.

The following code shows how to implement the onInit function to check if the application is running the SAP Fiori Launchpad.

1234567891011121314151617181920212223242526272829303132
sap.ui.define([
 "sap/ui/core/mvc/Controller"
 ],
 /**
 * @param {typeof sap.ui.core.mvc.Controller} Controller
 */
 function (Controller) {
 "use strict";

 return Controller.extend(
 "student##.sap.training.startnavigation.controller.Main", {
 
 onInit: function () {
 this._fnGetService = sap.ushell && 
 sap.ushell.Container &&
 sap.ushell.Container.getService; 
 this._oCrossAppNavigation = this._fnGetService &&
 this._fnGetService("CrossApplicationNavigation");

 this._hash = (this._oCrossAppNavigation&&
 this._oCrossAppNavigation.hrefForExternal({ 

 target : {
 semanticObject : "UX410NavEnd00", 
 action: "display" 
 }

 })) || "";
 
 let _oLink = this.byId("idNavLink");
 _oLink.setHref(this._hash);
}

The following code shows how to implement the onPress event handler in the controller Main.controller.js of the Main view of project startnavigation.

123456789
onPress : function(oEvent) {
 if(this._oCrossAppNavigation) {
 var oHref = this._oCrossAppNavigation.toExternal({ 
 target : {
 shellHash : this._hash 
 } 
 }) 
 }
}

Watch the next video to see how to extend your implementation of the startnavigation application and pass a parameter to the navigation target.

The following code shows how to pass parameters to the navigation target.

12345678910111213141516171819
onInit: function () {
 this._fnGetService = sap.ushell && 
 sap.ushell.Container && 
 sap.ushell.Container.getService;
 this._oCrossAppNavigation = this._fnGetService && 
 this._fnGetService("CrossApplicationNavigation");

 this._hash = (this._oCrossAppNavigation&&
 this._oCrossAppNavigation.hrefForExternal({
 target : {
 semanticObject : "UX410NavEnd00",
 action: "display"
 }

 })) || "";

 let _oLink = this.byId("idNavLink");
 _oLink.setHref(this._hash);
}

Watch the last video in the series to see how to extend your implementation of the endnavigation application to fetch a parameter passed from another application.

The following code shows how to extend the endnavigation Application to fetch a parameter passed from another application.

1234567891011121314151617181920
sap.ui.define([
 "sap/ui/core/mvc/Controller"
],

 function (Controller) {
 "use strict";

 return Controller.extend(
 "student##.sap.training.endnavigation.controller.Main", {
 onInit: function () {
 var oComponentData = this.getOwnerComponent().getComponentData();
 if(oComponentData && oComponentData.startupParameters &&
 oComponentData.startupParameters.helloText) { 
 var sHelloText = oComponentData.startupParameters.helloText[0];
 var oLabel = this.byId("idInfo");
 oLabel.setText(sHelloText);
 }
 }
 });
});