Skip to Content

SAPUI5 app routing and navigation not working when run in Fiori launchpad using semantic objects

Hi guys

I've been following this guide:

Best Build Fiori Apps Rule 7: Always use intent-based navigation to navigate within an app and between apps

But I still don't understand how we link intent based navigation (#SemanticObject-Action) to local routing and navigation using router in the manifest (routes and targets: #employees/{employeeId}

I'm using the sample app to guide me with local routing using the .navTo() funtion:

Sample: Navigation - Step 10 - Implement Lazy Loading

All the routing in my app works 100% when I run it outside the Fiori Launchpad, but as soon as I run it inside the Fiori Launchpad, the local navigation and routing stops working.

Outside Fiori Launchpad:

http://<server>:<port>/<path_to_app>/myApp/index.html

Routing works fine:

http://<server>:<port> /<path_to_app>/myApp/index.html#employees/{employeeId}

Inside Fiori Launchpad

http://<server>:<port> /<path_to_flp>/FioriLaunchpad.html#MySemanticObject-create

Routing does not work

http://<server>:<port> /<path_to_flp>/FioriLaunchpad.html#MySemanticObject-create <How do you add local navigation #employees/{employeeId} to a url that already contains a # value for the semantic object?>

When I click on the buttons to navigate to other views nothing happens, there are no errors in the console.

How can I get my local navigation to work inside Fiori Launchpad using Semantic Objects?

Thanks

Antonette

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • avatar image
    Former Member
    Nov 09, 2017 at 05:00 AM

    Hi Antonette,

    For cross application routing, you have to use:

    var crossAppNav = sap.ushell.Container.getService("CrossApplicationNavigation")

    To add the local navigation #employees/{employeeId} to a url that already contains a # value for the semantic object you have to pass param to it.

    var empHash = (crossAppNav && crossAppNav.hrefForExternal({
      target:{
      semanticObject:"MySemanticObject",
      action:"create"},
      params:{"employeeId": "12631" }}))||""; crossAppNav.toExternal({
      target:{
      shellHash: empHash}});

    Then, in onRouteMatched event of first page in Employee App you have to get the startup parameter to get the employee ID.

    var startupParam = this.getOwnerComponent().getComponentData().startupParameters;
    var empId = startupParam.employeeId;

    Based on this value you can internally navigate to the local route using router.navTo function.

    Regards,

    Nikhil

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      May you please share screenshot of error which you are getting while running in launchpad. And please share console error (if any) as well.

      Regards,

      Nikhil

  • Nov 08, 2017 at 11:44 AM

    i did a google search on sapui5 routing navigation and semantic objects... this is what i found:

    https://blogs.sap.com/2016/06/20/cross-application-navigation-between-sapui5-applications/

    is that what you were lookign for?

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 08, 2017 at 11:50 AM

    Not sure if this is useful but in my app it's something like this:

    https://flpnwc-xxxxxxxx.dispatcher.us2.hana.ondemand.com/sites/haydukapp#haydukapp-Display&/DetalleDeSolicitudesDeAprobacionDeEmbarcaciones/ShipownerSet(Ruc='111',Origin='T',Status='P',Request='0000000287')

    where "#haydukapp-Display" is the intent-action and &/Detalle.... is the routing.

    Add comment
    10|10000 characters needed characters exceeded

    • The targets look like this:

      "targets": {
          ...
          "AprobacionDeSolicitudesEmbarcaciones": {
              "controlAggregation": "pages",
              "viewName": "AprobacionDeSolicitudesEmbarcaciones",
              "viewId": "AprobacionDeSolicitudesEmbarcaciones",
              "viewLevel": 8,
              "transition": "slide"
          },
          "DetalleDeSolicitudesDeAprobacionDeEmbarcaciones": {
              "controlAggregation": "pages",
              "viewName": "DetalleDeSolicitudesDeAprobacionDeEmbarcaciones",
              "viewId": "DetalleDeSolicitudesDeAprobacionDeEmbarcaciones",
              "viewLevel": 9,
              "transition": "slide"
          }
      }

      The routes look like this:

      "routes": [
          ...
          {
              "pattern": "AprobacionDeSolicitudesEmbarcaciones/:context:",
              "name": "AprobacionDeSolicitudesEmbarcaciones",
              "target": [
                  "AprobacionDeSolicitudesEmbarcaciones"
              ]
          },
          {
              "pattern": "DetalleDeSolicitudesDeAprobacionDeEmbarcaciones/:context:",
              "name": "DetalleDeSolicitudesDeAprobacionDeEmbarcaciones",
              "target": [
                  "DetalleDeSolicitudesDeAprobacionDeEmbarcaciones"
              ]
          }
      ]

      And the navTo call looks like this:

      var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
      ...
      oRouter.navTo("DetalleDeSolicitudesDeAprobacionDeEmbarcaciones", {
          context: sContext
      });