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.