SAPUI5 application with ABAP OData Service as 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

You can use the static SAPUI5 application from this URL

Step 1:

Let’s add service to the application. Open manifest.json and goto “models” section under “sap.ui5” and add your OData Service like below

Step 2:

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

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 app router and create a route to the ABAP system

This is the architecture of the Cloud Foundry to the ABAP system.

So we need the below services to connect to the ABAP systems

1. Destination Service

- To maintain URL mainly for cross-site management also for configuration management.

2. Connectivity Service

- Since the ABAP system is behind a firewall you need a connector for the cloud to on-Premise call

3. XSUAA

Let’s create the services

Step 3:

Go to your SAP Cloud Platform trial account and navigate to your Cloud Foundry sub-account.

Choose Connectivity| Destinations| New Destination.

Fill the below details

Destination: For ABAP application

URL:  http://server:port

proxyType: OnPremise

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 Services|.Service Marketplace Filter for dest and choose destination.

On-screen Service: destination - Instanceschoose.New Instance

Skip all optional by pressing the Next button

On the next screen, use asdestination-demo-liteInstance Name and choose.Finish

Step 6: – Creating connectivity Service

Go to space and navigate to.Service Marketplace Filter by conn and choose connectivity.

On-screen Service: connectivity - Instances choose New Instance.

Skip all optional by pressing the Next button

On the next screen, use connectivity-demo-lite as Instance Name and choose Finish.

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. 

Go to your space and navigate to Service Marketplace. Filter by Auth and choose Authorization & Trust Management.

On screen Service: Authorization & Trust Management - Instances choose New Instance.

Choose application as service plan and choose Next.

Provide the following parameters and choose Next:

{

“xsappname” : “approuter-demo”,

“tenant-mode”: “dedicated”

}

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.

staticsapui5app/StaticSAPUI5application – Application component name

You can find this in you component.js

Step 10: Create a file manifest.yml with the below details

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