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.
- SAP Managed Tags:
41 Comments
