How do you connect to On Premise from SAP UI5 application deployed in Cloud Foundry

How do you connect to On Premise from SAP UI5 application deployed in Cloud Foundry

 

Introduction

In this Blog post, I will introduce how to connect to On Premise from SAP UI5 application developed through SAP Web IDE and  deployed in Cloud Foundry. We will go through the following steps to achieve the goal.

Prerequisites:

Connect to On Premise System using SAP Cloud Connector.

https://blogs.sap.com/2017/07/09/how-to-use-the-sap-cloud-platform-connectivity-and-the-cloud-connector-in-the-cloud-foundry-environment-part-1/

 

Build your SAP UI5 app and deploy to the Fiori launchpad on Cloud foundry via SAP Web IDE

https://blogs.sap.com/2019/01/02/how-to-build-your-first-ui5-app-and-deploy-to-the-fiori-launchpad-on-cloudfoundry-via-webide/

 

This blog explains the next steps involved in the connecting to

On- Premise from SAP UI5 App deployed in CF.

1.Create a destination in Cloud Foundry Environment.

2.Connect to the On Premise to SAP UI5 application deployed in Cloud Foundry.

 

Make sure to complete the Pre-requisites before proceeding to next steps.

Below are the application and destination names used/created .

Destination name in CF	BAN_CP
MTA Application Name	MultipleBanks_CF
SAP UI5 Component Name	MultipleBanks
Connectivity Service	conn_Multiplebanks_CF(auto generated by frame work)

1.Destination Creation in CF

 

Open the SAP Cloud Platform and login to Cloud Foundry Environment.

Create the destination name BAN_CP and enter the configuration as shown below.

 

Destination is created successfully.

Test the connectivity of the Destination. Make sure the destination is connected successfully to On Premise System.

2.Connect to the On Premise from SAP UI5 application deployed in Cloud Foundry.

 

Once the MTA application is created successfully as mentioned in prerequisites ,the project structure looks as below.

Open the mta.yaml of the project.

In Resources file ,you can see the resources which are auto generated when a MTA application is

created.

 

 

Accessing the Destination in MTA application.

 Navigate to manifest.json in the UI5 component(Mutliplebanks) of MTA application(Multiplebanks_CF).

Create a new OData service by navigating to Descriptor Editor of manifest.json

Enter the destination Name created in CF(BAN_CP)

Access the required Web Service after connecting to the On Premise System.

 Please note that list of Services will be displayed only if the connection to the Cloud Connector was successful as mentioned in Step 3.

 Create a named/default model.

 

Once the data Service is added Data Service is available in Data source available in the code.

 

Named Model Block Chain is available in Models.

 

Details can be viewed in code Editor as well.

 

Open the mta.yml , an additional resource is automatically added by the frame work i.e conn_Multiplebanks_CF which is a connectivity service that connects On -Premise System from CF.

The same is available in Cloud Foundry environment in Connectivity Service.

The connectivity service can be checked in Foundry in Connectivity in Service Market Place.

Execute the application.

 

Open Chrome debugger and check the call details in Network tab .

The Request URL retrieves the data from On Premise using the Connectivity Service and destination in CF.

 

Conclusion

Now you will be able to retrieve the data from OnPremise in SAP UI5 application deployed Cloud Foundy.