Show TOC

Developing Navigation to Another SAP Fiori AppLocate this document in the navigation structure

You can develop navigation from an SAP Fiori app to another SAP Fiori app using the CrossApplicationNavigation service.

In your application code, you specify a navigation intent and call the CrossApplicationNavigation service. The CrossApplicationNavigation service provides the following methods for cross-application navigation:

Table 1:

Method

Description

toExternal

With this method, you can directly trigger navigation to another app within the SAP Fiori launchpad.

hrefForExternal

With this method you can construct links to other apps.

Navigation is performed using URL fragments to allow bookmarking. An external navigation intent consists of a semantic object and an action, with an optional context. In addition, you can pass parameter values to the target application.

Note

The service also offers the method hrefForAppSpecificHash, which allows you to construct a link for an inner-app navigation request. For more information on inner-app navigation, see Routing and Navigation in the SAPUI5 documentation.

Caution

It is crucial to use these services for navigation. Do not use window.location.hash.

Obtaining the Interface
Sample Code
this.oCrossAppNav = sap.ushell.Container.getService("CrossApplicationNavigation"); 

You do not need to delete the obtained interface reference.

Generating a Link from a Semantic Object and Action

Generate a URL to put into a link tag:

Sample Code
var hrefForProductDisplay = this.oCrossAppNav.hrefForExternal({
  target : { semanticObject : "Product", action : "display" },
  params : { "ProductID" : [ "102343333" ] }
}); 
Generating a Link from a back-end URL

If you retrieve a shell hash (URL) from the back-end system, you can use {target : {shellHash : "..."}} to set the hash:

Sample Code
var href2 = this.oCrossAppNav.hrefForExternal({
  target : { shellHash : "Product-action?ProductID=102343333" }
}); 
Sample Code
var sShellHash = aModel.backendpreparedvalue ..... // result of a back-end call
// returns a result similar to :
// var sShellHash = "#UI2Fiori2SampleApps-appnavsample&date=" + encodeURIComponent( new Date().toString() );

var toOurApp2 = this.oCrossAppNavigator.hrefForExternal({
  target: { "shellHash" : sShellHash }
}); 

The following example generates a URL to navigate to the start page. In the SAP Fiori launchpad, this is the home page. In other scenarios this may be a different start page, for examle an initial application.

Sample Code
var href2 = this.oCrossAppNav.hrefForExternal({
  target : { shellHash : "#" }
}); 
Direct Cross App Navigation

The toExternal method, which accepts the same arguments as hrefForExternal, directly triggers the navigation.

Perform a direct navigation:

Sample Code
// trigger navigation
  this.oCrossAppNav.toExternal({
  target : { semanticObject : "Product", action : "display" },
  params : { "ProductID" : [ "102343333" ] }
}); 

URL to navigate to the start page:

Sample Code
var href2 = this.oCrossAppNav.toExternal({
  target : { shellHash : "#" }
}); 

The following example navigates to a fact sheet:

Sample Code
this.oCrossAppNav.toExternal({
  target: { semanticObject : "SalesOrder", action: "displayFactSheet" },
  params : { SalesOrder : 27 }
});
Checking whether an Intent is Assigned to a User

Navigation to a target app is only possible if a target app is mapped to the respective semantic object, action and parameters, for the current user and for the current device type. The isIntentSupported method allows you to check whether this prerequisite is met. This is useful if you want to hide links created by the hrefForExternal method if there is no target application assigned for the current user on the current platform.

Note that you can test an array of links in one request.

Sample Code
this.oCrossAppNav.isIntentSupported(["SalesOrder-approve?SOId=1234"])
  .done(function(aResponses) {
    if (oResponse["SalesOrder-approve?SOId=1234"].supported===true){
       // enable link
    }
    else {
       // disable link
    }
  })
  .fail(function() {
    // disable link
  });
Tip

You can use the getSemanticObjectLinks method of the CrossApplicationNavigation service to find out all applications that are assigned to the current user for a given semantic object and optionally a given parameter. For example, this can be useful if you want to generate a list of "See also" links in your application.