Skip to Content
Author's profile photo Elina Visoki

SAP Web IDE: App to App Navigation in FLP Sandbox


In this blog I will show how to preview 2 different applications in one FLP sandbox while developing in SAP Web IDE. I will also show an example of how to navigate from one app to another.

  1. Make sure you have 2 (or more) apps in your SAP Web IDE workspace.
  2. In each of the apps, make sure its .project.json file has an entry called “hcpdeploy” with the following parameters:
    "hcpdeploy": {
    "account": “<your account name. For example, 'myaccount123' in http:/>”,
    "name": “<a unique name for the app, usually it is the name of the app in the workspace in lowercase without dots>”,
    "entryPath": “<the relative location of the component.js file to the root folder of the app. For example: webapp >”

    If you do not have this entry, please create it in each file.

  3. Create a new empty project in your workspace for the FLP sandbox by selecting Workspace > New > Folder.
    For simplicity, let’s call this project FLPsandbox.
  4. Create a new folder called appconfig under the FLPsandbox’s root folder.

  5. In this folder, create a file called fioriSandboxConfig.json with the following content:
    "applications" : {

  6. In the fioriSandboxConfig.jsonfile, under “applications” add the following for each of the projects you configured in step 1:
    "FioriObject-action" : {
     "additionalInformation" : "SAPUI5.Component=<application namespace> “,
                    "applicationType" : "URL",
                    "url" : "<path to MyFioriApplication . MyFioriApplication name as it is in the Web Ide workspace >",
                    "description" : "<The description for the application >",
                  "title" : "<the title of the tile>"




    An identifier used later by the application. It must be constructed from two identifiers with a dash, not “FioriObject display” or “FioriObjectdisplay”.


    The namespace of the root component of your Fiori app.

    You can copy it from the Component.js file of the app.

    It will be in the declaration of the component.

    For example: “return UIComponent.extend(“”, {  …” make sure to copy without “.Component”


    The application type for SAPUI5 applications is always URL.


    The URL property is the path of the applications relative to the fioriSandboxConfig.json file. In my example it will be “url”: “../../mySourceApp”

  7. Right-click on the FLPsandbox project and choose New > HTML5 Application Descriptor. The neo-app.json file is added to the project. Add the following at the beginning of the neo-app.json file under “routes” for each of the applications you configured in step 1:
          "path": "/test-resources/sap/ushell/<application name in Web IDE workspace> ",
          "target": {
            "type": "application",
            "name": "<the unique name for the app, as it was defined in its .project.json file of the application>"
          "path": "/<application name in Web IDE workspace > ",
          "target": {
            "type": "application",
            "name": "<the unique name for the app, as it was defined in its .project.json file of the application>"
  8. Run the sandbox.The sandbox is launched with the configured apps as tiles. You can now navigate from the FLPSandbox to the apps.

      1. Select the FLPsandbox project and open the run configurations.
      2. Create a new “SAP Fiori Component on Sandbox” configuration and make the following configurations:
        1. Give it meaningful name
        2. In the General tab, the file name should be the fioriSandboxConfig.json. The field will be populated with the full path.
        3. In the Advanced Setting tab, under the Application Resources section, select Use my workspace first.
        4. Save and run the configuration.
  9. Add navigation between the apps.In the origin app, add the following code as a callback to the navigation event:
    var oCrossAppNav = sap.ushell && sap.ushell.Container && sap.ushell.Container.getService("CrossApplicationNavigation");
    var href_For_Product_display = (oCrossAppNav && oCrossAppNav.toExternal({
                                    target: {
                                                    shellHash : "<the target app key configuration defined in step 4, e.g.  FioriObject-action>"   
                                    params: a map of parameters to be forwarded to the target app
    })) || "";

  10. Re-run the sandbox.

That’s it!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Thilo Seidel
      Thilo Seidel

      Thanks for this post Elina! Very helpful!

      Author's profile photo Prerana CV
      Prerana CV

      Hello Elina,

      This is an interesting blog! I tried this in local SAP Web IDE but the app is unable to find that the root folder is my workspace and I get 404 error for each component. Is there anyway possible that "advanced setting" feature is available in local sap web ide version too? Would love to know! Thanks.

      Author's profile photo Elina Visoki
      Elina Visoki
      Blog Post Author

      Hi Prerana,

      As this feature is heavily depends on SAP Cloud Platform, it is currently not part of personal edition.