Skip to main content
SAP BTP

Cross Application Navigation

Amrit Mohapatro Amrit Mohapatro, Team Lead 4 min read

What is Cross Application Navigation?

  • 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 in Fiori Launchpad.
  • This can be done in the On-premise Launchpad and the BTP Launchpad.

How to do Cross Application Navigation?

  • For any Fiori application, when launched from Fiori Launchpad, you can find the semantic object with the action separated by “–“ in the Launchpad URL for that application. For example – for the “Manage Sales Orders” application, the semantic object name is ‘Sales Order,’ and the action name is ‘manage’ as shown in the screenshot below.

Manage Sales Orders app in the Fiori launchpad, with SalesOrder-manage highlighted at the end of the URL

  • If you want to launch the “Stock Multiple Materials” application, you can search the application in Fiori Apps Library and get the semantic object name “Material” and the action name “displayStockMultipleMaterials” from the “Target Mapping(s)” in the “Configuration” section.

Fiori Apps Library target mapping for Stock - Multiple Materials: object Material, action displayStockMultipleMaterials

  • Now replace the semantic object name with “Material” and the action name “displayStockMultipleMaterials” in the URL to launch the “Stock Multiple Materials” application, as shown below.

Stock - Multiple Materials app opened from a launchpad URL ending in Material-displayStockMultipleMaterials

  • So, to do a 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.

The syntax for Cross-Application Navigation

  • The API used is the “ushell” API for Cross Application Navigation, and the “ushell” API is only available when your app is running in the Fiori Launchpad.

JavaScript getting the CrossApplicationNavigation service, building href with hrefForExternal and calling toExternal

  • The “href” creates the required intent with # and semanticObject-action inside “target” for the URL.
  • “xnavservice.toExternal” does the navigation to the target application.

Passing Values from One Application to Another During Cross-Application Navigation

  • For some Business Analytical Applications, customers want to navigate to another application to see some specific information without doing any filter. For example, in the Stock Multiple Material application, the user only wants to see the information for the material “ZTRAY01.”

Stock - Multiple Materials filtered by material number ZTRAY01, showing two rows for plants 1010 and 1710

  • To pass the value “ZTRAY01,” we can find the parameter name “Product” under “Target Mapping(s)” inside the “Configuration” section in the Fiori Apps Library

Fiori Apps Library target mapping for Stock - Multiple Materials with the Product parameter highlighted

  • In this instance, we can pass values with the parameters inside the “params.”

handleSubmit function passing the input value as the Product param to Material-displayStockMultipleMaterials

Creating a Sample Application and Navigating to a Standard Application at the Click of a Button

  1. Create an application to enter a Material number in an Input box control and a Button control to submit the entered Material number.

View1.view.xml in Business Application Studio with a Label, an Input idInp and a Submit Button calling handleSubmit

  1. Run the application.

Running Cross App Navigation app with an Enter Material Number field and a Submit button

  1. Enter the following code to the “handleSubmit” function in the controller file to do the Cross Application Navigation to the standard application “Stock Multiple Material” and pass the Product or Material number in the “Product” parameter.

View1.controller.js open in Business Application Studio showing the handleSubmit navigation code

  1. Now deploy the application to the on-premise system and create a Tile “Cross Application Navigation” during Launchpad Configuration.

Fiori launchpad Demo group with a Cross App Navigation tile, subtitle Demo Application

  1. Now click on the tile you created to launch the application.

Cross App Navigation app opened from the launchpad tile, with the material number input and Submit button

  1. Enter the material number “ZTRAY01” and click the “Submit” button. It will navigate to the “Stock Multiple Materials” application with the filter parameter “Product” and the value “ZTRAY01” and shows records for “ZTRAY01” material. We can also see the semantic object “Material” and action “displayStockMultipleMaterial” with the parameter “Product” and value “ZTRAY01” in the URL.

Stock - Multiple Materials showing ZTRAY01 rows, with Product=ZTRAY01 highlighted in the URL

Cross-Application Navigation in BTP Launchpad

  • The Technique to navigate from one application to another in BTP Launchpad is the same as in On-premise. It works with the same semantic object and action.

Before deploying our application, we must do the “crossNavigation“ configuration to define the Semantic object name and the action under “sap. app” in the manifest.json file.

manifest.json crossNavigation inbound intent with semanticObject, action display, title and icon

If you are interested in viewing similar content, visit our blog, here.

View our LinkedIn, here.

SAP BTP SAP Fiori SAPUI5 Web Development
Share

Related posts