Introduction

In some cases you may want to create a Fiori app that can navigate to another Fiori app. In Web IDE, a single Fiori app can be tested by selecting the app’s Component.js and then choosing the menu option Run -> Run in SAP Fiori Launchpad Sandbox, or in version 1.8 or later, Run -> Run as -> SAP Fiori Component.  When wanting to test the navigation from one app to another, it is required that both apps are registered in the Launchpad.  In order to execute this scenario within Web IDE we will first need to perform the following steps:

  • Create two Fiori applications
  • Create a Fiori Sandbox Project

Creating the Application

In this example we will use the ES1 system.  For access and configuration information visit the blog How to configure and external GW system with SAP Web IDE.  After validating your configuration, create two applications using the “Fiori Master Detail Application” template. Enter the following values…

The Material Application

Project Name: materials

Odata Service: MATERIAL

Screen Shot 2015-02-12 at 10.49.22 AM.png

The SalesOrder Application

Project Name: salesorders

Odata Service: SALESORDERXX

Screen Shot 2015-02-12 at 10.59.30 AM.png

After the projects have been created verify that both are working correctly by selecting their Component.js and choosing the menu option Run -> Run in SAP Fiori Launchpad Sandbox, or in version 1.8 or later, Run -> Run as -> SAP Fiori Component.

Creating the Fiori Launchpad Sandbox App

Create an empty project folder by choosing the menu option File -> New -> Folder and provide a name, for example FLPSandbox.  Within this folder create the files neo-app.json and fioriSandboxConfig.json. The contents of the neo-app.json should be as follows.  Make sure to update the description and more importantly the first entries name, shown on line 7, to match the name of your destination if it differs from ES1.


{
  "routes":[
      {
        "path":"/sap/opu/odata",
        "target":{
            "type":"destination",
            "name":"ES1",
            "entryPath":"/sap/opu/odata"
        },
        "description":"ES1"
      },{
        "path":"/orion",
        "target":{
            "type":"service",
            "name":"orion"
        },
        "description":"Orion Service"
      },{
        "path":"/resources",
        "target":{
            "type":"service",
            "name":"sapui5",
            "entryPath":"/resources"
        },
        "description":"SAPUI5 Resources"
      },{
        "path":"/test-resources",
        "target":{
            "type":"service",
            "name":"sapui5",
            "entryPath":"/test-resources"
        },
        "description":"SAPUI5 Test Resources"
      }
  ]
}
















The contents of the fioriSandboxConfig.json should be as follows, make sure to replace the values for the tenant, or the account name, and user id.  You can find the value for the account name in HCP by selecting the Account option in the HCP Cockpit.  On the trial system the value would be “<userid>trial”.



{
    "applications": {
        "materials-display": {
            "additionalInformation": "SAPUI5.Component=com.sample.materials",
            "applicationType": "URL",
            "url": "/orion/file/<TENANT>$<USER-ID>-OrionContent/materials",
            "description": "Materials App"
        },
        "salesorders-display": {
            "additionalInformation": "SAPUI5.Component=com.sample.salesorders",
            "applicationType": "URL",
            "url": "/orion/file/<TENANT>$<USER-ID>-OrionContent/salesorder",
            "description": "Sales Order App"
        }
    }
}

















Once the files have been saved, select the fioriLaunchpadSandbox.json file within the FLPSandbox project and then choose the menu option Run -> Run in SAP Fiori Launchpad Sandbox, or in version 1.8 or later, Run -> Run as -> SAP Fiori Component.  Choose each app and verify that it opens correctly in the Sandbox environment.

In the next blog we will implement the necessary code to process the navigation between the apps.

To report this post you need to login first.

32 Comments

You must be Logged on to comment or reply to a post.

  1. Helmut Tammen

    Hi Jamie,

    thank you for this tutorial. Unfortunately I don’t get it running.

    First I noticed that there is no MATERIAL odata service on ES1. I assume you mean the sap/opu/sdata/iwcnt/MATERIAL service. Correct?

    Then there is no SALESORDERXX service but sap/opu/sdata/iwfnd/SALESORDER service. This salesorder service does not enclose the collection SOHeaders but there is a collection SalesOrder. This collection has other properties than you mentioned above.

    Anyway, I used the above mentioned MATERIAL service and can start the application. But the material list is not displayed although it is loaded from the Gateway server as I can see in Chrome debugger.

    Any idea what’s wrong? I’m working in hanatrial landscape.

    Thanks in advance

    Helmut

    (0) 
      1. Helmut Tammen

        Hi Jamie,

        thank you. I recreated the project with the services you suggested and then the applications work.

        But when I try to call them via the Fiori Launchpad Sandbox App they are not displayed. I get a 403 error while reading the Component.js file of my apps (s. screenshot).

        Here is the content of my fioriSandboxConfig.json. My project reside in the namespace com.sample.material (not materials) and com.sample.salesorder (not salesorders) and the projects are named “fioriNavigationMaterials” and “fioriNavigationSalesOrders”.

        /wp-content/uploads/2015/02/fiorinavigationerror_649996.png

        Thanks Helmut

        (0) 
        1. Jamie Cawley Post author

          HI Helmut,

          It may be that your url is incorrect in your fioriSandboxConfig.json.  With the dev console open when you load the Launchpad Sandbox check the network tab for a successful call. Select the call and under the headers section check the referer property, in there you should find the url property hc_orionpath.  Verfiy that you url matches this.

          Regards,

          Jamie

          SAP – RIG

          (0) 
          1. Helmut Tammen

            Hi Jamie,

            sorry, was offline for a while.

            Here is my fioriSandboxConfig.json:

                “applications”: { 

                    “materials-display”: { 

                        “additionalInformation”: “SAPUI5.Component=com.sample.material”, 

                        “applicationType”: “URL”, 

                        “url”: “/orion/file/p001984trial$p001984-OrionContent/fioriNavigationMaterials”, 

                        “description”: “Materials App” 

                    }, 

                    “salesorders-display”: { 

                        “additionalInformation”: “SAPUI5.Component=com.sample.salesorder”, 

                        “applicationType”: “URL”, 

                        “url”: “/orion/file/p001984trial$p001984-OrionContent/fioriNavigationSalesOrders”, 

                        “description”: “Sales Order App” 

                    } 

                } 

            }

            The names of my projects are:

            fioriNavigationMaterials

            fioriNavigationSalesOrders

            The namespaces from Component.js are:

            jQuery.sap.declare(“com.sample.material.Component”);

            jQuery.sap.declare(“com.sample.salesorder.Component”);

            Regards Helmut

            (0) 
          2. Helmut Tammen

            Hi Jamie,

            I just changed the userid in the URL from lowercase “p001984-OrionContent” to uppercase “P001984-OrionContent”.

            Now the application are loaded, but no data is found –> the master view is empty.

            Best regards

            Helmut

            (0) 
            1. Jamie Cawley Post author

              Did you configure the neo-app.json of the Sandbox app according to your setup?  What error appears in the console?

              Regards,

              Jamie

              SAP – RIG

              (0) 
              1. Helmut Tammen

                Hi Jamie,

                I corrected the the destination settings in neo-app.json and now the apps are running in the Fiori Launchpad Sandbox App as well.

                I will carry on with part II of the tutorial now 🙂 .

                Thanks a lot

                Helmut

                (0) 
  2. Joep Rheiter

    Hello Jamie,

    I followed the whole tutorial. Everything works except getting data in the sales en material apps when launching from the fioriSandboxConfig.json

    The following error occurs.

    GET https://webidetestingm18spf-s0008296743trial.dispatcher.hanatrial.ondemand.com/destinations/SAP_ES_GW/sap/opu/odata/sap/SALESORDERXX/$metadata 404 (Not Found)

    If I run the Salesorder app not via the fioriSandboxConfig.json everything is OK. The url is the same except the webidetestingm…. part.

    GET https://webidetestingnqvtdz-s0008296743trial.dispatcher.hanatrial.ondemand.com/destinations/SAP_ES_GW/sap/opu/odata/sap/SALESORDERXX/$metadata 200 (OK)

    Here is my neo-app.json code:

      “routes”:[ 

          { 

            “path”:”/sap/opu/odata”, 

            “target”:{ 

                “type”:”destination”, 

                “name”:”SAP_ES_GW”, 

                “entryPath”:”/sap/opu/odata” 

            }, 

            “description”:”SAP ES GW” 

          },{ 

            “path”:”/orion”, 

            “target”:{ 

                “type”:”service”, 

                “name”:”orion” 

            }, 

            “description”:”Orion Service” 

          },{ 

            “path”:”/resources”, 

            “target”:{ 

                “type”:”service”, 

                “name”:”sapui5″, 

                “entryPath”:”/resources” 

            }, 

            “description”:”SAPUI5 Resources” 

          },{ 

            “path”:”/test-resources”, 

            “target”:{ 

                “type”:”service”, 

                “name”:”sapui5″, 

                “entryPath”:”/test-resources” 

            }, 

            “description”:”SAPUI5 Test Resources” 

          } 

      ] 

    Hope you can help me out?

    (0) 
    1. Helmut Tammen

      Hi Joep,

      I guess that the route definition in your neo-app.json is wrong. Here are my settings.

      Route in neo-app.json:

            { 

              “path”:”/destinations/ES1″, 

              “target”:{ 

                  “type”:”destination”, 

                  “name”:”ES1″ 

              }, 

              “description”:”ES1″ 

            },

      Destination in Cockpit:

      /wp-content/uploads/2015/02/es1_destination_651162.png

      Regards Helmut

      (0) 
  3. Shankar V

    Hi Jamie,

    I created two applications as you mentioned above.  I am unable to launch the applications through fiorisandbox.json.  I am able to see both applications, but when i trying to launch any applications,  I am getting blank page.

    I am using HANA Cloud cockpit trial account.  I replaced only tenant, user id with my user id in change neo-app.json.

        “applications”: { 

            “materials-display”: { 

                “additionalInformation”: “SAPUI5.Component=com.sample.materials”, 

                “applicationType”: “URL”, 

                “url”: “/orion/file/p1671189893trial$p1671189893trial-OrionContent/materials”, 

                “description”: “Materials App2” 

            }, 

            “salesorders-display”: { 

                “additionalInformation”: “SAPUI5.Component=com.sample.salesorders”, 

                “applicationType”: “URL”, 

                “url”: “/orion/file/p1671189893trial$p1671189893trial-OrionContent/salesorders”, 

                “description”: “Sales Order App2” 

            } 

        } 

    Can you help to Continue with the next tutorial.

    (0) 
    1. Jamie Cawley Post author

      HI Shankar,

      What error are you seeing in the javascript console?  Please also share your neo-app.json and your destination config.

      Regards,

      Jamie

      (0) 
  4. durga prasad prasad

    Hi Jamie,

    Thanks for your reply , I am using the same content for neo-app.json

    • “routes”:[ 
    •       { 
    • “path”:“/sap/opu/odata”
    • “target”:{ 
    • “type”:“destination”
    • “name”:“ES1”
    • “entryPath”:“/sap/opu/odata” 
    •         }, 
    • “description”:“ES1” 
    •       },{ 
    • “path”:“/orion”
    • “target”:{ 
    • “type”:“service”
    • “name”:“orion” 
    •         }, 
    • “description”:“Orion Service” 
    •       },{ 
    • “path”:“/resources”
    • “target”:{ 
    • “type”:“service”
    • “name”:“sapui5”
    • “entryPath”:“/resources” 
    •         }, 
    • “description”:“SAPUI5 Resources” 
    •       },{ 
    • “path”:“/test-resources”
    • “target”:{ 
    • “type”:“service”
    • “name”:“sapui5”
    • “entryPath”:“/test-resources” 
    •         }, 
    • “description”:“SAPUI5 Test Resources” 
    •       } 
    •   ] 

    /wp-content/uploads/2015/04/destination_684893.jpg

    /wp-content/uploads/2015/04/403forbidden_684876.jpg

    (0) 
    1. Jamie Cawley Post author

      The path to your application is not working.  You may need to upcase the userid as indicated by Helmut on Feb 20th.

      Regards,

      Jamie

      (0) 
  5. BHARANIDHARAN S P M

    I am getting the below error while previously created projects and also now not able to create new projects

    Unhandled Error: Proxy: Name: repositorybrowser | Message: Original error message: Proxy: Name: repositorybrowser | Message: Request failed: Internal Server Error URI: /orion/s2s/workspace/p1155505trial$P1155505-OrionContent

    Error stack: Error: Request failed: Internal Server Error URI: /orion/s2s/workspace/p1155505trial$P1155505-OrionContent

    at https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/uitools/config-preload.js:129:709369

    at _rejected (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:807:24)

    at https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:833:30

    at Promise.when (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:1077:31)

    at Promise.promise.promiseDispatch (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:751:41)

    at https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:573:44

    at MessagePort.flush (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:108:17)

    ———–

    Error stack: Error: Proxy: Name: repositorybrowser | Message: Request failed: Internal Server Error URI: /orion/s2s/workspace/p1155505trial$P1155505-OrionContent

    Error stack: Error: Request failed: Internal Server Error URI: /orion/s2s/workspace/p1155505trial$P1155505-OrionContent

    at https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/uitools/config-preload.js:129:709369

    at _rejected (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:807:24)

    at https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:833:30

    at Promise.when (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:1077:31)

    at Promise.promise.promiseDispatch (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:751:41)

    at https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:573:44

    at MessagePort.flush (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:108:17)

    ———–

    at Function.o._error (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/core/Core-preload.js:11:70544)

    at u.o._error (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/core/Core-preload.js:11:68618)

    at https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/core/Core-preload.js:11:68514

    at _rejected (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:807:24)

    at https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:833:30

    at Promise.when (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:1077:31)

    at Promise.promise.promiseDispatch (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:751:41)

    at https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:573:44

    at MessagePort.flush (https://webide-p1155505trial.dispatcher.hanatrial.ondemand.com/resources/~44845450b37f8055c43470eca1cbb6c47fb31d4b~/sap/watt/lib/q/q.js:108:17)

    ———–

    /wp-content/uploads/2015/04/webide_686867.jpg


    Kindly help me to resolve this error.


    Regards,

    Bharani

    (0) 
        1. BHARANIDHARAN S P M

          Hi Jamie,

          Kindly provide your valuable inputs as well to my query made regarding “getting blank page for Materials app & Sales Order App”.

          I am getting same errors as mentioned by Helmut on Feb 20th but why it is showing error for Component.js and MyRouter.js under FLPSandbox Folder ? These two .js files are not found inside the FLPSandbox folder.

          Regards,

          Bharani

          (0) 
  6. Anonymous

    Hello Jamie,

    Thanks for your article. I was able to run both apps as SAP Fiori Component and I was able see them in the sandbox apps list. I have got an error when I tried to access on of the apps from the list:

    Uncaught Error: found in negative cache: ‘com/sample/salesorders/Component.js’ from http://webide-p998004trial.dispatcher.hanatrial.ondemand.com/orion/file/p998004trial$P998004-OrionContent/salesorders/Component.js: 0 – NetworkError: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load ‘http://webide-p998004trial.dispatcher.hanatrial.ondemand.com/orion/file/p998004trial$P998004-OrionContent/salesorders/Component.js‘.

    I was able to access Component.js just by clicking on the link in the message above.  I use hanatrial.ondemand.com free account. My webide version is 1.10.2

    Please advise,

    Dmytro

    (0) 
  7. Dmytro Golynkin

    fioriSandboxCongig.json:

        “applications”: { 

            “materials-display”: { 

                “additionalInformation”: “SAPUI5.Component=com.sample.materials”, 

                “applicationType”: “URL”, 

                “url”: “http://webide-p998004trial.dispatcher.hanatrial.ondemand.com/orion/file/p998004trial$P998004-OrionContent/materials“, 

                “description”: “Materials App” 

            }, 

            “salesorders-display”: { 

                “additionalInformation”: “SAPUI5.Component=com.sample.salesorders”, 

                “applicationType”: “URL”, 

                “url”: “http://webide-p998004trial.dispatcher.hanatrial.ondemand.com/orion/file/p998004trial$P998004-OrionContent/salesorders“, 

                “description”: “Sales Order App” 

            } 

        } 

    Yes, I used plural materials, salesorders for the namespaces.

    (0) 
  8. Dmytro Golynkin

    Hello Jamie,

    My first comment didn’t post for some reason. Long story short. Both apps run as expected as SAP Fiori components. I saw blank page when I tried to run them clicking on the sandbox links.

    The error is below and I can access the .js file from the error by clicking on the link in the error message.

    Uncaught Error: found in negative cache: ‘com/sample/salesorders/Component.js’ from http://webide-p998004trial.dispatcher.hanatrial.ondemand.com/orion/file/p998004trial$P998004-OrionContent/salesorders/Component.js: 0 – NetworkError: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load ‘http://webide-p998004trial.dispatcher.hanatrial.ondemand.com/orion/file/p998004trial$P998004-OrionContent/salesorders/Component.js‘.

    Please advise,

    Dmytro

    (0) 
    1. Jamie Cawley Post author

      Hi Dmytro,

      The url in you fiorisandboxconfig should be relative, should start with /orion/../.  Also make sure that the value of the SAPUI5.Component matches the namespace in the component.js

      Regards,

      Jamie 

      (0) 
  9. Gregor Wolf

    Hi Jamie,

    thank you for this great Blog. Have you tried recently if it still works on the HCP Trial? I’ve tried today and created two Fiori Apps based on the standard SAP Gateway Services delivered with NetWeaver ABAP 7.40:

    EPM_OIA_FIORI_GW_SERVICE_SRV with the Entity BusinessPartners

    and

    S_EPM_SADL_GW_DEV_SCEN_RO_SRV with the Entity SalesOrderHeaders


    The Apps work perfectly running standalone.


    Unfortunately I’m not able to get them running in the FLP Sandbox. Have a look at the following screenshot for my fioriSandboxConfig.json. I’ve already adjusted the username to uppercase:

    fioriSandboxConfig.png

    But I get a:

    HTTP Status 404 – Not Found

    when I click the tile and the framework tries to load the Component.js from:

    /orion/file/s0001142741trial$S0001142741-OrionContent/EPMCustomersOld/webapp/Component.js

    Any hints?

    Best regards

    Gregor

    (0) 
    1. Jamie Cawley Post author

      It looks like you may have the URL incorrect, you have an “s” in the project name, EPMCustomersOld, that’s not shown as the name in Web IDE.

      Regards,

      Jamie

      SAP – Technology RIG

      (0) 
      1. Gregor Wolf

        Hi Jamie,

        thank you for coming back so quickly. Good catch. I’ve fixed it and tried again. Unfortunately doesn’t make any difference. And for the other app the name was correct. But that has not worked either.

        Best regards

        Gregor

        (0) 
        1. Jamie Cawley Post author

          You can run the app normally, select the component.js and press play, and compare the url property “hc_orionpath” to what you have entered.

          Regards,

          Jamie

          SAP – Technology RIG

          (0) 

Leave a Reply