2.SAPUI5 application with ABAP OData Service as backend
This series of the blogs is to help teams who are going to develop SAPUI5 application in cloud foundry since SAP applications are migrating to the cloud and to be specific cloud foundry rapidly, you can find the below list of blogs with the combinations of development by which you will migrate your current application to cloud foundry or for developing a new application.
The below are the combinations of the development and the links to the blog(All the links will be enabled once it is published).
- Simple static HTML/XML or static JSON model based SAPUI5 Applications
- SAPUI5 application with ABAP OData Service as backend
- SAPUI5 application in Fiori Launchpad
- SAPUI5 application with non-ABAP service as a backend
Let us start with the second use case where we will develop a SAPUI5 application with back-end as ABAP.
Since this is not a static application, you have to develop the SAPUI5 application as Node-js app which acts like an app router and as well as SAPUI5 application
Let’s add service to the application. Open manifest.json and goto “models” section under “sap.ui5” and add your OData Service like below
Add a table in the view1 to display the data from the Features entity set.
Now perform cf push by going to the folder where the manifest.yml file exists via command prompt ( you can see the steps to log-in and cf push in the first blog)
After cf push is done open the application you will see the table with no data.
If you open Developer tools ( F12 (or) Ctrl+Shift+I), you will find 404 calls for the metadata of the service
Because since it is a static application it doesn’t know how to route ( It will be checking this in the webapp folder ->if you open entire URL ).
let’s convert our app as a dynamic application by creating an app router and create a route to the ABAP system
This is the architecture of the Cloud Foundry to the ABAP system connection.
So we need the below services to connect to the ABAP systems
- Destination Service
- To maintain URL mainly for cross-site management also for configuration management.
- Connectivity Service
- Since the ABAP system is behind a firewall you need a connector for the cloud to on-Premise call
Let’s create the services
Go to your SAP Cloud Platform trial account and navigate to your Cloud Foundry sub-account.
Fill the below details
Name <backend> – > Mentioned in Figure 1.1 odata URI section.
You can provide your User name and password of your ABAP system by changing the mode of Authentication to Basic.
If you keep it as NoAuthentication a popup will appear and ask for credentials in UI.
Step 4: –
Cloud connector Setup
Follow the steps in this URL for setting up the configurations for the same destination in Cloud connector to connect the ABAP system. ( In Protocol select HTTPS in the cloud in Step 2 and point 3).
Step 5: Creating Destination Service
Go to your account and choose
Service Marketplace Filter for
dest and choose
Service: destination - Instanceschoose.
Skip all optional parameter by pressing the Next button
On the next screen, use as
Instance Name and choose.
Step 6: – Creating connectivity Service
Go to space and navigate to.
Service Marketplace Filter by
conn and choose
Service: connectivity - Instances choose
Skip all optional by pressing the Next button
On the next screen, use
Instance Name and choose
Step 7: – Creating an XSUAA service
The application router will use the XSUAA instance to authenticate the user before routing the HTTP request to a defined destination. For more general information, see Authorization and Trust Management in the Cloud Foundry Environment in the official documentation.
Go to your space and navigate to
Service Marketplace. Filter by
Auth and choose
Authorization & Trust Management.
Service: Authorization & Trust Management - Instances choose
application as service plan and choose
Provide the following parameters and choose
Note: approuter-demo is the app name you are going to deploy which you can find in your manifest.yml file.
Step 8: Create a package.json with below parameters
Step 9: – Create a file xs-app.json with the below details
- This file is similar to neo-app.json in web-ide used for routing
Destination field below is an exact name which we provided in Destinations in Cloud Foundry.
Note : authenticationType:xsuaa for localDir is mandatory for your back-end service to load.
The path staticsapui5app/StaticSAPUI5application is your Application component name which you can find in your component.js
Step 10: Create a file manifest.yml with the below details
Services names should be the same as in figure 1.8.4, 1.7.3, 1.6.3
Step 11: – Perform CF push operation
Now when you open your application you will be able to see the application with data from the ABAP system.
The folder structure of the app will look like
The above blog explains how you can develop a SAPUI5 application in cloud foundry with ABAP service as a back-end service.
You can find the code here.