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