Skip to Content

This guide will instruct you how to use SAP Web IDE and deploy your existing on-premise transactional Fiori apps to SAP HANA Cloud Platform. Note that only client-side artifacts will be deployed and the Fiori apps will still access the on-premise SAP Gateway system to read and write business data.

Check the Reference Library for a list of available SAP Fiori apps including their technical prerequisites for the backend release and Fiori backend components.

Disclaimer

Please note that SAP recommends to use SAP Fiori, cloud edition to run selected Fiori apps on SAP HANA Cloud Platform to enjoy seamless apps and libraries (SAPUI5) updates. When deploying on-premise Fiori apps to your cloud account, the apps (UI) will be treated by SAP as custom development.

Prerequisites

Follow the Get Started documentation section. Entering Git settings is optional. However, make sure you follow the Connecting Remote Systems steps as it’s required for SAP HANA Cloud Platform to access your on-premise SAP Gateway system.

Once completed, a destination configuration should be available on the SAP HANA Cloud Platform Cockpit, pointing to your SAP Gateway system and is securely connected via SAP HANA Cloud Connector. The Fiori app you deploy will use this destination to communicate with your on-premise SAP Gateway system.

When adding your destination in SAP HANA Cloud Platform Cockpit, it must contain the following values for the WebIDEUsage properties:

  • odata_abap
  • ui5_execute_abap
  • dev_abap
  • bsp_execute_abap

There are additional configuration steps needed on the on-premise SAP Gateway system to allow communication with Fiori apps on SAP HANA Cloud Platform. A blog post with more information will be added soon.

Import to SAP Web IDE

In SAP Web IDE click File>Import>Application from SAPUI5 ABAP Repository.

/wp-content/uploads/2016/04/image001_934340.png

Select the System you would like to import from and enter your credentials if required.

If you followed the steps required to configure a destination on SAP HANA Cloud Platform Cockpit (refer to the Prerequisites section above), your on-premise system should be available on this dialog.

Select the Application and click OK.

/wp-content/uploads/2016/04/image003_934341.png

A new project folder is created on your workspace with all required files and folders.

/wp-content/uploads/2016/04/image005_934342.png

SAP Web IDE automatically adds a new neo-app.json file. This file is required by SAP HANA Cloud Platform to connect to your on-premise SAP Gateway system and to get access to SAPUI5 library.

More information about this file is available on the documentation.

Test Preview in SAP Web IDE

In order to make sure the app is running on SAP HANA Cloud Platform, select the Component.js file in under the project folder in your workspace and click the Run button on the toolbar. Enter your credentials if required. If it’s the second time you try to run the same app after doing some changes, clear the cache of the browser first (Ctrl+F5 or Shift+F5 keyboard shortcut in Chrome).

More information how to run projects is available on the documentation.

/wp-content/uploads/2016/04/image007_934343.png

If the app is running fine, you can now deploy it to SAP HANA Cloud Platform. Skip the following steps and refer to Deploy to SAP HANA Cloud Platform section below.

If the app isn’t running correctly, follow the steps in the next section.

Fix Broken Reuse Library References

Some apps use additional resources which are deployed as reuse libraries on SAPUI5 ABAP Repository. When running the app, open your browser’s Developer Tools>Network Tab. If you notice failed requests to library.js or library-preload.js with HTTP error code 404, this means you need to fix it.

/wp-content/uploads/2016/04/image009_934344.png

In the example above, the reuse library reference /resources/sap/hcm/lib/common is broken.

In order to fix it, you need to deploy this reuse library which is hosted on SAPUI5 ABAP Repository to SAP HANA Cloud Platform. This can be achieved using the same steps needed to deploy a Fiori app. So follow this document steps, but this time your goal is deploying the reuse library. Note you won’t be able to test or preview the reuse library project as it’s not a standalone app.

Once the reuse library is deployed, the app should now point to the new location of the library on SAP HANA Cloud Platform. Open the neo-app.json file and add the required reference under the routes node. In the example below, the missing reusable library reference /resources/sap/hcm/lib/common was added.


“routes”:

[

  {

    “path”: “/resources/sap/hcm/lib/common”,

    “target”: {

            “type”: “application”,

            “name”: “hcmlibcommon”,

            “entryPath”: “/sap/hcm/lib/common”,

            “preferLocal”: true

  },

        “description”: “HCM Lib Reuse”

  },

        (Existing route nodes here)

]

Modify the following property values as required by your reuse library:

  • path value should point to the relative URL the app is expecting to find the reuse library in. This is the URL found on your browser’s Developer Tools>Network Tab failed requests (see previous steps).
  • name value should contain the name of the reuse library as defined by you when you deployed it to SAP HANA Cloud Platform from SAP Web IDE.
  • entryPath value should point to the location of the library.js or library-preload.js file in the reuse library project.
  • description value may contain a description of the reuse library.

Make sure you keep the JSON syntax valid (route nodes are separated by commas).

Deploy to SAP HANA Cloud Platform

Select the project folder in your workspace and click Deploy>Deploy to SAP HANA Cloud Platform on the menu.

/wp-content/uploads/2016/04/image011_934345.png

Enter your credentials if required and click Deploy. If everything goes well, a popup dialog will be displayed with a link to the app on SAP HANA Cloud Platform.

/wp-content/uploads/2016/04/image013_934352.png

More information how to deploy projects is available on the documentation.

Extensions to Fiori Apps

Extensions you made to Fiori apps should be deployed to SAP HANA Cloud Platform along with the original apps. The steps required for deployment are exactly the same as for the original apps.

When a newer version of the original app is available, you need to deploy it again to SAP HANA Cloud Platform. Your extensions will still work as they are deployed as an additional app on SAP HANA Cloud Platform.

To report this post you need to login first.

14 Comments

You must be Logged on to comment or reply to a post.

  1. Jeremy Good

    Thanks Guy – a nice guided story that satisfies some of the customer concerns voiced in the last design council workshop, and one that the SCN community will appreciate!

    (0) 
  2. Jennifer Cha

    Hi Guy,

    Could the on-premise SAP Fiori Factsheet and Analytical apps be running on the HCP?  Please advise how to proceed.

    Best Regards,

    Jennifer

    (0) 
    1. Aviad Rivlin

      Hi Jennifer,

      The blog is focusing on transactional apps (see title 🙂 ). We do not yet support Factsheets and Analytics.

      Regards,

      Aviad

      (0) 
      1. Jennifer Cha

        Hi Aviad,

        Is supporting Factsheet and Analytics apps planned in the roadmap?  Can you advise the timeline?

        Best Regards,

        Jennifer

        (0) 
  3. Murali Shanmugham

    Hi Guy,

    Is there a way for a customer to deploy a standard Fiori App without the need to download the ABAP UI Add-on and installing it on their ABAP backend system. I am dealing with few customers who do not have Fiori or Gateway system. If they are looking to use a standard transactional Fiori App on HCP (which is not in the Fiori Cloud), they would now need to install the ABAP add-on which gives them the source code and then extract the source code from the ABAP system to deploy it on HCP. 

    (0) 
    1. Michael Appleby

      Hi Murali,

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      PS with your experience you should already know this! 😉

      (0) 
  4. Henrik Bruentrup

    Hi Guy,

    been trying to get this scenario to work and luckily came across your guide. I am trying to deploy a Backend Transactional App to my HCP Fiori Launchpad hosted via HCP Portal Service.

    However, I just can’t get the library to work. Maybe you could take a look? Please also take a look at the lower example in which I tried to recreate your demo scenario.

    The app is Application Log.

    HCP1.jpg

    HCP2.jpg

    It doesn’t seem to catch the path and forward it to the entry path. I only put a / due to the library.js being in the main folder. Both are deployed. There is a second path  leading to “/resources/sap/nw/core/applogs/lib/reuse” with type destination. Should that one be deleted from neo.app.json?

    Any input would be much appreciated.

    ———————————————————————————————————–

    Edit:

    I tried to recreate your example. Still the same error:

    /wp-content/uploads/2016/07/hcp3_999119.jpg

    /wp-content/uploads/2016/07/hcp4_999120.jpg

    Best regards,

    Henrik

    (0) 
  5. Kurt Kristiansen

    Hi,

    Thanks for a great blog.

    Regarding this statement in the beginning of the article:

    “Note that only client-side artifacts will be deployed and the Fiori apps will still access the on-premise SAP Gateway system to read and write business data.”

    Does this mean that the OData provisioning service could not be used instead of the SAP Gateway Hub server when deploying On-Premise SAP Fiori Transactional Apps to SAP Cloud Platform?

    Or is it so that this article was written before the OData Provisioning service was available and it was therefore not considered? I would think that it would be easier to use the OData Provisioning service than having an on-premise SAP Gateway hub server.

    Thanks

    BR Kurt

     

    (0) 

Leave a Reply