cancel
Showing results for 
Search instead for 
Did you mean: 

Fiori - Cross Application Navigation

Former Member
0 Kudos

Hello everyone,

I want to navigate between the applications in launchpad. I have found with lot of searching that, through CrossApplicationNavigation in ushell is the way. Here is the link to documentation (SAPUI5 SDK - Demo Kit)

Each application in launchpad has 'semantic object' and 'action' for further navigation.


I have followed documentation and written following piece of code to create CrossApplicaionNavigation service.   


var fgetService         =  sap.ushell && sap.ushell.Container && sap.ushell.Container.getService;

this.oCrossAppNavigator = fgetService && fgetService("CrossApplicationNavigation");

Just to make sure that oCrossAppNavigator service is properly initiate wrote following code.

var hashForApp =  this.oCrossAppNavigator.hrefForExternal({

                         target : { semanticObject : "SalesOrder",action : "create" }

                 });

console.log("Hash for the application: " + hashForApp);

Console Output: #SalesOrder-create

So knowing the service works, I wrote following code to navigate to the "SalesOrder" application and to the "create" action.

this.oCrossAppNavigator.toExternal({

        target : { semanticObject : "SalesOrder",action : "create" }

});


Here is the my issue. Above statement neither goes to the SalesOrder application nor prints any error in the console.

It supposed to update the URL with the above hash code and go to that application.


Note: Manual changing of URL with the above hash code correctly going to SalesOrder application.

Thanks in advance,

venu

Message was edited by: v g

View Entire Topic
martingerritsen
Explorer
0 Kudos

I've found a solution to navigate between applications by using the CrossApplicationNavigation services. I'm currently buiding several applications which are integrated within the Fiori Launchpad. One application is generic build and displays a notificationheader, positions, causes, actions and tasks.

From several other applications, it's possible to click on the notificationnumber which triggers the CrossApplicationNavigation service. The Fiori Launchpad catch this event and opens the generic notification application.

The code i'm using contains the semantic object and action extended with a hash "&/Notification/<notificationId>"


var hash = "<semantic object>-<action>&/Notification/" + notificationId;

sap.ushell.Container.getService("CrossApplicationNavigation").toExternal({ target : { shellHash : hash }});

This will triggers the Fiori Launchpad to open the Notification application and navigates within the application directly to "/Notification/#". Example of component.js routes:


routes : [
{
  pattern : "",
  name : "NotificationList",
  view : "NotificationList",
  viewLevel: 0,

          },
          {
          pattern : "Notification/{notificationId}",
          name : "Notification",
          view : "Notification",
          viewLevel: 1,
          },
          {
  pattern : "Notification/{notificationId}/Position/{positionId}",
  name : "Position",
  view : "Position",
  viewLevel: 2,
          },
// etc..
          ]
}

I had to change a couple of things within my application in order to make it work. These changes are only needed for the application which will be called when using the CrossApplicationNavigation service.

1. I had to change app.view.js to app.view.xml. I've read somewhere @ SDN... (can't find it anymore )

2. The routing within the component.js didn't work anymore during navigation within the app (after changing the app.view to XML). In firstplace, i used subroutes to navigate from notificationheader to position to action etc. I came to notice that removing subroutes was the solution in order to navigate again in combination with app.view.xml. Still wondering what the problem was...

3. Best practices described that you have to extend the routing (MyRouter) with a myNavBack function. This code will check if there is a previousHash available. I'v notice that this isn't working always the right way if you navigate from the second app back to the first app. I've fixed this problem by using a parameter that indicates the viewLevel. Go back with viewLevel equals 0 means that I've to use window.history.go(-1).

4. Index.html will not be used by the Fiori Launchpad when calling a application from the Fiori Launchpad or by using the CrossApplicationNavigation service. Fiori Launchpad integrates the component.js directly within it's own framework. Make sure that you have declared all libaries and includes (CSS) within component.js the same way as you've done within the Index.html. Index.html will only be used when calling the application outside the Fiori Launchpad (or local testing).

Hope this will work for you.

Former Member
0 Kudos

thanks Gerri,

I will try and update you on the same. Eagarly waiting solution for this issue.

Thanks once again,

venu

former_member187439
Active Participant
0 Kudos

Hello M. Gerritsen ,

We are using this service to navigate from second screen of first application to the second application and also to navigate back to the second screen of first application.

Navigation from 1st to 2nd application is working fine but navigating back is happening to the first screen of the first application instead of the second screen from which the user just came from. What could be missing in our code? Here is the code of the "back" function in second application.

              var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation"); 

                           oCrossAppNavigator.toExternal({ 

                                  target: {semanticObject : "ZManageAccount", action: "displayMangeAccount" }

                           });


More information on the issue is here:


Do you have any suggestions?


Thank you,

Kavitha

martingerritsen
Explorer
0 Kudos

When you navigate from app1 to app2, you will notice that app1 isn't alive anymore. If you are navigating back (from app2) to app1, you will also notice that all components of app1 will be loaded again.

Within app1 (or app2), you can have different views. The navigation between those views will be executed by the router (and component). The navigation between views will change the URL of the browser. Moving from app2 back to app1 will be done by the browser back function. The browser stores the latest url of app and use this one to rebuild app1 in the latest view which has been visited (instead of going back to the startview of app1).

I thing your problem is that the navigation within app1 doesn't change the URL of the browser, or doesn't create a bookmark while navigating. Are you using the replace option while navigating?


navTo(sName, oParameters, bReplace): sap.ui.core.routing.Router

Navigates to a specific route defining a set of parameters. The Parameters will be URI encoded - the characters ; , / ? : @ & = + $ are reserved and will not be encoded. If you want to use special characters in your oParameters, you have to encode them (encodeURIComponent).

Parameters:

{string} sName Name of the route
{object} oParameters Parameters for the route
{boolean} bReplace Defines if the hash should be replaced (no browser history entry) or set (browser history entry)

Returns:

{sap.ui.core.routing.Router} this for chaining.

Another challange is the following scenario..

App1 View1 -> App1 View2 -> CrossAppNavigation -> App2 View2 -> Click on back button in the left corner of the page.

Normally this will trigger the router navTo function, because in front of App2 View2 you have probably configured an App2 View1 within your router (component).

I've solved this problem by extending the router (MyRouter). In the constructor i've created a variable viewLevel. If the navTo function is triggered and the viewLevel equals zero means that we don't want to navigate back to App2 View1, but instead using the browser back function to Cross Navigate back to App1 View2. Of course, the viewlevel needs to be decrease and increase each time the navTo or navBack function has been triggered.

Before i execute a cross navigation to another app, I will first store the current viewLevel of the current application inside the Local Session storage of the browser. In case of navigation back from app2 to app1, i will retrieve the viewlevel again. This will help me to make sure the internal navigation by the router performs well.

Maybe it's a little overdone, but it works for me . Also when i perform multiple cross navigation between several apps .

Hope this will work for you.

Former Member
0 Kudos

Hi,

I am working on the same type of situation, although,

using the same layout: App1 View2 -> CrossAppNavigation -> App2 View2 ,

my App1 does correctly call the CrossAppNavigation and my App2 does receive the componentData with the parameter on the Component.js.

But I am still with a problem on figuring to get the App2 call directly the view and use the data.

Any one of you can give me a hand.. the SAP documentation on this mater is by far too reduced (http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/907ae317-cb47-3210-9bba-e1b5e70e5...).

I look forward to hear from you guys!

Best regards,

Marc

former_member187439
Active Participant
0 Kudos

Thanks for the response and useful posts Actually in my project, the component-preload of App 1 was “routing” to the first view on "init" and hence we are always landing in the first screen even if we modify the App 2’s navigation code to land in second screen. We changed this and got rid of the issue.