Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member


Hi,

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:/webide-myaccount123.dispatcher.hanatrial.ondemand.com/>”,
    "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>"
    }

























    Object



    Description



    FioriObject-action



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



    additionalInformation



    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("my.target.app.Component", {  …" make sure to copy without ".Component"



    applicationType



    The application type for SAPUI5 applications is always URL.



    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!



3 Comments