Cross Application Navigation with Routing

[former_member564413]

Hi.

I have coded cross application navigation logic to navigate from one component to another, however I would like to nagivate to a specific route in the target component.

Scenario:

I have two apps:

1. Credit App (Source App)
2. Query App (Target App)

The target app has the following CrossNavigation and Routing config in the manifest:

......
"crossNavigation": {
	"inbounds": {
		"intent1": {
			"signature": {
				"parameters": {},
				"additionalParameters": "allowed"
			},
			"semanticObject": "Query",
			"action": "Manage"
		}
	}
}

.....

"routes": [
{
	"name": "Overview",
	"pattern": "",
	"target": ["Overview"]
},
{
	"name": "create",
	"pattern": "Create",
	"target": ["Create"]
},

In the Source app I have coded the following cross app navigation logic which loads the target component without any issue,

var oCrossAppNav = sap.ushell && sap.ushell.Container && sap.ushell.Container.getService("CrossApplicationNavigation");
var href_For_Query_create = (oCrossAppNav && oCrossAppNav.toExternal({
target: {
semanticObject : "Query", action : "Manage" 
}, 
params: {
  "SoldTo" : sSelectedSoldTo,
  "SalesOrderNo" : sSelectedOrder,
  "Subject" : "Y2"
  }
})) || "";

I would like it to route to the Create target ("/Create") target and not the Overview target( ""). How should the navigation be coded to include the target hash route in the url?

[former_member664642]

Even though this question is two years old, I hope this helps someone who has the same requirement.

One way to do this, as has been mentioned, is to use the 'master'/default route and code an extra internal navigation inside the target app as shown in markatsap's 2016 blog on the subject: https://blogs.sap.com/2016/06/20/cross-application-navigation-between-sapui5-applications/. This is of course an extremely cumbersome way of doing it, and it is surprising that there is not a better way.

The solution I opted for is not in the documentation as far as I can see, but I found this from debugging the navigation implementation in the UI5 code.

The navigation implementation looks for a value called "appSpecificRoute" in your nav specification, which it will translate to an inner app route (meaning it adds '&/' into the hash it builds).

Example:

let navSvc sap.ushell.Container.getService("CrossApplicationNavigation")
navSvc.toExternal({
  target: { semanticObject : "MySemanticObject", action: "my_action" },
  params: {
    paraml: 'valuel',
    param2: 'value2'
  appSpecificRoute: 'appRoute'
})

(If you pass a string with a self-built hash to the "toExternal" method, it will also extract and use that, but doing it as shown here is obviously cleaner).

It is important to note that SAP does not recommend using app-specific paths in navigation (I read this in the help somewhere, but with all the zillions of tabs I have open now, obviously I cannot find that specific one; I probably closed it) but this honestly seems to me to be the cleanest option.

[lboehm]

This was very helpful! Thanks a lot!

But passing parameters in the route is also not possible, or at least not out of the box. I'm now creating the app specific route including the parameter.

There's a small typo in your code, missing a curly bracket. For other people finding this post, here's the code which is working fine for me.

Thanks again Martin!

        oCrossAppNavigator.toExternal({
          target: {
            semanticObject: "RentalOffer",
            action: "detail",
          },
          appSpecificRoute: `MainView/${obj.ID}`,
        });

[former_member141295]

Hi Sergio,

As far as I know, Navigating to specific route pattern of Target App is possible by one way :-

You can catch the parameters which is sent from Source App in the "_routePatternMatched" method of Target App and compose the routing pattern with the help of Source App's parameters (through navTo or getRoute) and move to the specific view to corresponding route pattern.