Fiori App to App Navigation in Web IDE – Part 1
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
The SalesOrder Application
Project Name: salesorders
Odata Service: SALESORDERXX
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.
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
Hi Helmut,
The services are
https://sapes1.sapdevcenter.com/sap/opu/odata/iwcnt/MATERIAL/
https://sapes1.sapdevcenter.com/sap/opu/odata/sap/SALESORDERXX/
Are you seeing some error error in the dev console?
Regards,
Jamie
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".
Thanks Helmut
Hi Helmut,
Can you please add the fioriSandboxConfig.json file?
Regards,
Jamie
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
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
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
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
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
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?
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:
Regards Helmut
Did the trick. Thanks a lot! 🙂
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.
HI Shankar,
What error are you seeing in the javascript console? Please also share your neo-app.json and your destination config.
Regards,
Jamie
Hi Jamie,
Thanks for your reply , I am using the same content for neo-app.json
The path to your application is not working. You may need to upcase the userid as indicated by Helmut on Feb 20th.
Regards,
Jamie
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)
-----------
Kindly help me to resolve this error.
Regards,
Bharani
There is an issue with SAP WebIDE itself, SAP already informed. Please follow this threat - SAP WebIDE not working
Looks like it is now working again.
Regards,
Jamie
SAP - RIG
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
Hi Bharani,
I would need to see the errors in the console and your configuration.
Regards,
Jamie
SAP - RIG
I agree with Jamie, Bharani please start SCN discussion.
Regards,
Vladi
Hi Vladimirs,
As suggested i have created a SCN discussion for my issue.
http://scn.sap.com/thread/3730406
Kindly do the needful.
Regards,
Bharani
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
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.
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
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
works now. the path was the problem. thank you!
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:
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
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
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
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
Hi Jamie, the post is very interesting. I'm trying to implement this launchpad sandbox to test app-to-app navigation (both custom OVP).
Unfortunately I get some error and I'm not able to find the reason.
I send you a couple of snapshot of error message from launchpad console , FioriSandboxconfig.Json file and last part of generated url when launching the component.js of the app I'm trying to insert into the launchpad.
Could you provide me some tips?
Thanks
FioriSandboxconfig.Json
App component url :
.... hana.ondemand.com/test-resources/sap/ushell/shells/sandbox/fioriSandbox.html?hc_orionpath=%2Fad187c57b%24S0016558251-OrionContent%2FZVENDORRATINGHOME&sap-ui-xx-componentPreload=off&sap-ui-appCacheBuster=..%2F..%2F..%2F..%2F..%2F&sap-ushell-test-url-url=..%2F..%2F..%2F..%2F..%2Fwebapp&sap-ushell-test-url-additionalInformation=SAPUI5.Component%3DZVENDORRATINGHOME.ZVENDORRATINGHOME#Test-url
Error:
The url is case sensitive. Make sure it matches the hc_orionpath when you test the app directly in the sandbox.
If you need further assistance please open your own thread in questions and answers.
Regards,
Jamie
Hi Jamie,
I get 404 for component.js. I have compared hc_orion path and it all looks same. I have attached my destination,project name , neo app.json and fiorisandboxconfig.json files
Component namespace
test.Material.Component
test.App2.Component
Project names=Material,App2
Hi Akshaya,
Please create a thread in the questions and answers and include a screenshot of the apps in web ide and the error you are seeing? If you are using full stack web ide see
https://blogs.sap.com/2018/03/05/fiori-app-to-app-navigation-in-web-ide-full-stack/
Regards,
Jamie
Created a question in Q & A
App to App not working in WebIDE Component.js 404