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.
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.
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:
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.
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.
A new project folder is created on your workspace with all required files and folders.
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.
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.
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.
“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.
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.
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.