Skip to Content
avatar image
Former Member

Fiori - Cross Application Navigation

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

@Masayuki Sekihara

Message was edited by: v g

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • avatar image
    Former Member
    Jan 13, 2015 at 07:00 AM

    Your code looks fine! The only scenario where the navigation is not supposed to happen is when you're already in the same app 😉 I believe you are not trying to navigate to SalesOrder create from the same. You can try an alternate way to change the Hash url as below,

    this.oCrossAppNavigator.toExternal({ target : { shellHash : "#SalesOrder-create" } });
    Add comment
    10|10000 characters needed characters exceeded

  • Feb 20, 2015 at 07:41 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

    • Thanks for the response and useful posts @Martin Gerritsen 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.

  • avatar image
    Former Member
    Apr 17, 2015 at 01:17 PM

    Hi Venu.

    The CrossAppNav service only works if the application is loaded as a UI5 Component

    into the FioriLaunchpad.

    Just loading the code into an index page and running the application in an Iframe in the FLP will not work!  So if you are talking index.html you are on the wrong track. It is not used if we load the component.

    In your target mapping, make sure to configure  SAPUI5.Component=your.component.name as additionalInformation. (If you use LPD_CUST).

    It looks to me as if you are may loading your app into an iframe in the FLP

    (which may look alike).

    Matter of fact: the trace tells you this is the case:

    core-min-0.js:91 2015-01-14 12:51:39 Received OData response for GET "/sap/opu/odata/UI2/INTEROP/ResolveLink?linkId='Z_SD_MYQUOTES_0-QuotationToCash'&shellType='FLP'&formFactor='desktop'" -  sap.ui2.srvc.ODataWrapper
    core-min-0.js:91 2015-01-14 12:51:39 Triggering navigation to  - [object Object]
    core-min-0.js:91 2015-01-14 12:51:39 Rendering 'to' page 'Element sap.m.Shell#shellPage-Z_SD_MYQUOTES_0-QuotationToCash' for 'to' navigation - 
    core-min-0.js:91 2015-01-14 12:51:39 Not resolved as "SAPUI5.Component=" or "SAPUI5=" , will attempt to load into iframe  - 
    core-min-0.js:91 2015-01-14 12:51:39 Event fired: 'focusout' on Element sap.ui.unified.ShellHeadItem#configBtn -  sap.ui.core.UIArea
    core-min-0.js:91 2015-01-14 12:51:39 Event blur reached Focus Handler (target: javascript:void(0);configBtn) -  sap.ui.core.FocusHandler
    core-min-0.js:91 2015-01-14 12:51:39 app was opened -  a.abap.js:8 2015-01-14 12:51:39 [index.html] Device API logging initialized - DEVICE b.abap.js:26 Starting XHR Logon Manager -  c.abap.js:26 Opening request GET /sap/bc/ui2/start_up?shellType=FLP&depth=0 -  d.abap.js:26 Sending request GET /sap/bc/ui2/start_up?shellType=FLP&depth=0 -  e.abap.js:26 Sent request to URL /sap/bc/ui2/start_up?shellType=FLP&depth=0 -  sap.ui2.srvc f.abap.js:26 Opening request

    Remove the index.html from your project , try loading then app then :-),

    or look at the network trace whether it sources your index page.

    Then you are not loading the app as a component without iframe.

    You can also check in the DOM whether an iframe is present.  -> wrong loading.

    Kind regards,
    Gerd.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 21, 2015 at 01:14 PM

    Hi Venu,

    Can you try this code?

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

    navigationService.toExternal({

    target : { semanticObject: "XXX", action: "XX" }

    });

    Hope this will help you ;-)

    Best Regards,

    S.Vikgnesh

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 27, 2015 at 05:31 PM

    S. Vikgnesh,

    This worked with the method...

          window.parent.location = "http://host:8000/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html#ZMRT_DENEME-display";

    Add comment
    10|10000 characters needed characters exceeded