SAP Fiori Cloud offers selected SAP Fiori apps for SAP Business Suite and packaged content on SAP Cloud Platform. Customers can run & extend these applications and securely connect them to an on-premise SAP Business Suite backend. SAP Fiori Cloud offers apps from various lines of business such as human resources, procurement, sales and supply chain. Organizations may need to complement the out of the box offering to meet their specific requirements. Therefore, customers can either develop custom SAP Fiori apps or manually deploy standard transaction apps (on-premise) SAP Fiori apps for SAP Business Suite to SAP Cloud Platform.
This document will instruct you, how to use SAP Cloud Platform Web IDE to import and deploy an application. Note that only client-side artifacts (the frontend part) will be deployed.
Contents
Disclaimer
SAP recommends to leverage the out of the box SAP Fiori Cloud apps, in order to enjoy seamless app lifecycle and updates. When manually deploying on-premise Fiori apps to your cloud account, it's your responsibility to track and apply support packages or patches. SAP treats this approach as custom development. In case of issues, SAP Support may ask you to verify the correct functioning of the app on your on-premise backend system (ABAP), in order to check, whether it its related to the standard app or customer-specific setup and configurations.
Set up your SAP Cloud Platform account and configure secure connectivity to the backend system via SAP Cloud Platform Cloud Connector. Decide for either internal or external access point setup, depending on your landscape requirements. Establish the proper OData communication channel through either an on-premise SAP Gateway system or SAP Cloud Platfrom OData provisioning service. Check the SAP Fiori Cloud implementation guide for further details.
SAP Gateway Backend Framework needs to be installed on SAP Business Suite backend system.
You can use the SAP Fiori Apps Reference Library to explore available SAP Fiori apps. Apply the following filters to find relevant apps, since not all applications qualify to run on the cloud:
The following instructions focus on transactional apps, as classic analytical Fiori apps and factsheets are not supported on SAP Cloud Platform. Customer can build modern analytical applications in the cloud using technologies such as Smart Business service.
Each SAP Fiori application consists of a frontend and backend part. The frontend part is what you are deploying to SAP Cloud Platform. Each app comes with specific prerequisites for the backend release and SAP Fiori backend components, that also need to be taken care of.
As there is no option to directly run a standard, on-premise app on SAP Cloud Platform, customers can use the Maintenance Planner (integrated into Fiori Apps Ref Library) to download the latest software components from SAP Software Download Center. The Fiori UI software component containing the application is (temporarily) installed on the relevant SAP backend. You do not need to set up a dedicated frontend server for this step. Alternatively, you can install the Fiori software component on an ABAP system, where the pre-requisites for the software component are fulfilled. As the UI software component is a lightweight add-on, you may also directly install the software component on the ABAP server via SAP Add-On Installation Tool (SAINT) tool.
Please note: installing the UI software component on an ABAP server is currently the only possible way to import the UI sources via Web IDE to SAP Cloud Platform.
Before you can import your first SAP Fiori app, follow the Get Started section in the documentation for Web IDE. Entering Git settings is optional. However, make sure you follow the Connecting Remote Systems steps as it’s required for SAP Cloud Platform to access your SAP backend.
When adding your destination configuration in SAP Cloud Platform Cockpit, it must contain the following values for the WebIDEUsage properties (details see documentation).
Example of a destination configuration:
Open Web IDE and click File > Import > Application from SAPUI5 ABAP Repository.
Select the system you would like to import from and enter your credentials, if required. Based on the correct configuration of your destination your own backend systems 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.
Web IDE automatically adds a new neo-app.json file. This file is required by SAP Cloud Platform to connect to your backend and to get access to SAPUI5 library.
More information about this file is available on the documentation: Application Descriptor File.
In order to make sure the app is running on SAP Cloud Platform, select the Component.js file in the project folder of your workspace and click the Run button on the toolbar. Enter your credentials, if required.
Note: 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 about how to run projects is available on the documentation: Running Applications in Development Mode.
If the app is running fine, you can deploy it to SAP Cloud Platform. Skip the following steps and refer to Deploy to SAP Cloud Platform section below.
If the app isn’t running correctly, follow the steps in the next section.
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 Cloud Platform. This can be achieved using the same steps needed to deploy a Fiori app, 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 point to the new location of the library on SAP Cloud Platform.
Go to your Fiori application project and open the neo-app.json file. Add the required reference to the reuse library under the routes node. In the example below, the missing reusable library reference /resources/sap/hcm/lib/common was added.
Modify the following property values as required by your reuse library:
Make sure you keep the JSON syntax valid (route nodes are separated by commas).
Select the project folder in your workspace and click Deploy > Deploy to SAP 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 Cloud Platform.
More information how to deploy projects is available in the documentation: Deploying Applications to SAP Cloud Platform.
After successful deployment, you can access the application to check it is functioning correctly.
Extensions you make to SAP Fiori apps should be deployed to SAP 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 Cloud Platform. Your extensions will still work as they are deployed as an additional app on SAP Cloud Platform.
For further information, check the documentation about Extending SAP Fiori Apps on Cloud
To make the app available for end users via SAP Fiori launchpad you have to assign it to a launchpad site. There are two options:
Web IDE: In the popup select “Register to SAP Fiori launchpad”. In the wizard select the relevant site, assign a catalog and group and specify the visual appearance of the tile. Prerequisite: Portal Plugin enabled
SAP Fiori launchpad configuration cockpit: In the portal service select your launchpad site for editing. In the configuration cockpit add a new “App” based on the project you deployed in step 7. Maintain the assignment to catalogs and groups and define the required tile properties (title, subtitle, icon, etc.).Save and publish your changes to make them affectively for the end users.
The documentation provides further information about content model and working with catalogs, groups and roles.
The following resources provide information for troubleshooting and common questions:
Note: original blog post is available on SAP Community by Guy Soffer
This document will instruct you, how to use SAP Cloud Platform Web IDE to import and deploy an application. Note that only client-side artifacts (the frontend part) will be deployed.
Contents
- Prerequisites
- Select and download SAP Fiori app.
- Set up SAP Cloud Platform Web IDE.
- Import to Web IDE.
- Test and preview in Web IDE.
- Fix broken reuse library references (if required).
- Deploy to SAP Cloud Platform.
- Extensions to SAP Fiori apps.
- Assign app to SAP Fiori launchpad.
- Troubleshooting.
Disclaimer
SAP recommends to leverage the out of the box SAP Fiori Cloud apps, in order to enjoy seamless app lifecycle and updates. When manually deploying on-premise Fiori apps to your cloud account, it's your responsibility to track and apply support packages or patches. SAP treats this approach as custom development. In case of issues, SAP Support may ask you to verify the correct functioning of the app on your on-premise backend system (ABAP), in order to check, whether it its related to the standard app or customer-specific setup and configurations.
1. Prerequisites
Set up your SAP Cloud Platform account and configure secure connectivity to the backend system via SAP Cloud Platform Cloud Connector. Decide for either internal or external access point setup, depending on your landscape requirements. Establish the proper OData communication channel through either an on-premise SAP Gateway system or SAP Cloud Platfrom OData provisioning service. Check the SAP Fiori Cloud implementation guide for further details.
SAP Gateway Backend Framework needs to be installed on SAP Business Suite backend system.
2. Select and download SAP Fiori app
You can use the SAP Fiori Apps Reference Library to explore available SAP Fiori apps. Apply the following filters to find relevant apps, since not all applications qualify to run on the cloud:
- Product Suite = SAP Business Suite
- Application Type = Fiori - Transactional
- Database = Any DB
The following instructions focus on transactional apps, as classic analytical Fiori apps and factsheets are not supported on SAP Cloud Platform. Customer can build modern analytical applications in the cloud using technologies such as Smart Business service.
Each SAP Fiori application consists of a frontend and backend part. The frontend part is what you are deploying to SAP Cloud Platform. Each app comes with specific prerequisites for the backend release and SAP Fiori backend components, that also need to be taken care of.
As there is no option to directly run a standard, on-premise app on SAP Cloud Platform, customers can use the Maintenance Planner (integrated into Fiori Apps Ref Library) to download the latest software components from SAP Software Download Center. The Fiori UI software component containing the application is (temporarily) installed on the relevant SAP backend. You do not need to set up a dedicated frontend server for this step. Alternatively, you can install the Fiori software component on an ABAP system, where the pre-requisites for the software component are fulfilled. As the UI software component is a lightweight add-on, you may also directly install the software component on the ABAP server via SAP Add-On Installation Tool (SAINT) tool.
Please note: installing the UI software component on an ABAP server is currently the only possible way to import the UI sources via Web IDE to SAP Cloud Platform.
3. Set up SAP Cloud Platform Web IDE
Before you can import your first SAP Fiori app, follow the Get Started section in the documentation for Web IDE. Entering Git settings is optional. However, make sure you follow the Connecting Remote Systems steps as it’s required for SAP Cloud Platform to access your SAP backend.
When adding your destination configuration in SAP Cloud Platform Cockpit, it must contain the following values for the WebIDEUsage properties (details see documentation).
- odata_abap
- ui5_execute_abap
- dev_abap
- bsp_execute_abap
Example of a destination configuration:
4. Import to Web IDE
Open Web IDE and click File > Import > Application from SAPUI5 ABAP Repository.
Select the system you would like to import from and enter your credentials, if required. Based on the correct configuration of your destination your own backend systems 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.
Web IDE automatically adds a new neo-app.json file. This file is required by SAP Cloud Platform to connect to your backend and to get access to SAPUI5 library.
More information about this file is available on the documentation: Application Descriptor File.
5. Test and preview in Web IDE
In order to make sure the app is running on SAP Cloud Platform, select the Component.js file in the project folder of your workspace and click the Run button on the toolbar. Enter your credentials, if required.
Note: 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 about how to run projects is available on the documentation: Running Applications in Development Mode.
If the app is running fine, you can deploy it to SAP Cloud Platform. Skip the following steps and refer to Deploy to SAP Cloud Platform section below.
If the app isn’t running correctly, follow the steps in the next section.
6. Fix broken reuse library references (if required)
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 Cloud Platform. This can be achieved using the same steps needed to deploy a Fiori app, 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 point to the new location of the library on SAP Cloud Platform.
Go to your Fiori application project and open the neo-app.json file. Add the required reference to the reuse library under the routes node. In the example below, the missing reusable library reference /resources/sap/hcm/lib/common was added.
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 Cloud Platform from Web IDE.
- entryPath value should point to the location of the 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).
7. Deploy to SAP Cloud Platform
Select the project folder in your workspace and click Deploy > Deploy to SAP 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 Cloud Platform.
More information how to deploy projects is available in the documentation: Deploying Applications to SAP Cloud Platform.
After successful deployment, you can access the application to check it is functioning correctly.
8. Extensions to SAP Fiori apps
Extensions you make to SAP Fiori apps should be deployed to SAP 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 Cloud Platform. Your extensions will still work as they are deployed as an additional app on SAP Cloud Platform.
For further information, check the documentation about Extending SAP Fiori Apps on Cloud
9. Assign app to SAP Fiori launchpad
To make the app available for end users via SAP Fiori launchpad you have to assign it to a launchpad site. There are two options:
Web IDE: In the popup select “Register to SAP Fiori launchpad”. In the wizard select the relevant site, assign a catalog and group and specify the visual appearance of the tile. Prerequisite: Portal Plugin enabled
SAP Fiori launchpad configuration cockpit: In the portal service select your launchpad site for editing. In the configuration cockpit add a new “App” based on the project you deployed in step 7. Maintain the assignment to catalogs and groups and define the required tile properties (title, subtitle, icon, etc.).Save and publish your changes to make them affectively for the end users.
The documentation provides further information about content model and working with catalogs, groups and roles.
10. Troubleshooting
The following resources provide information for troubleshooting and common questions:
- SAP Fiori Cloud: Troubleshooting Guide; blog post: Tips and tricks for onboarding
- OData provisioning: Troubleshooting Guide
- SAP Fiori launchpad / Portal: Frequently Asked Questions
Note: original blog post is available on SAP Community by Guy Soffer
- SAP Managed Tags:
4 Comments
