Skip to Content
Technical Articles
Author's profile photo Chaitanya Priya Puvvada

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.

Assigned tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo vishwanath vedula
      vishwanath vedula

      Helpful.

      Author's profile photo Akhthaar Ali Badhusha
      Akhthaar Ali Badhusha

      Hi Chaitanya,

      When I tried to access this link using Postman, it is not returning the data, instead, it is returning Your browser doesn’t support javascript(HTML) file.How to overcome this problem?

       

      Thanks,

      Badhusha.

      Author's profile photo Chaitanya Priya Puvvada
      Chaitanya Priya Puvvada
      Blog Post Author

      Hi Badhusha,

      Can you please let me know which link you are exactly referring to ?

       

      Regards,

      Priya

      Author's profile photo Akhthaar Ali Badhusha
      Akhthaar Ali Badhusha

      Author's profile photo Chaitanya Priya Puvvada
      Chaitanya Priya Puvvada
      Blog Post Author

      @Akhthaar Ali Badhusha:

      Guess your destination in CF?

      Did you use OAuth 2.0 authentication when you had tested in postman?

      Regards,

      Priya

      Author's profile photo Akhthaar Ali Badhusha
      Akhthaar Ali Badhusha

      No I didn't...

      Author's profile photo Akhthaar Ali Badhusha
      Akhthaar Ali Badhusha

      Is the OAuth 2.0 authentication is mandatory ?

      Author's profile photo Chaitanya Priya Puvvada
      Chaitanya Priya Puvvada
      Blog Post Author

      If your destination is in Cloud Foundry and if you want to test any  Cloud web services in POSTMAN, it is mandatory to use OAUTH 2.0 .

      If your destination is in Neo and if the Webservice needs to be tested in POSTMAN, OAUTH 2.0 is not required.

      Author's profile photo Akhthaar Ali Badhusha
      Akhthaar Ali Badhusha

      I am using the destination in Neo, for the UI5 application

      Author's profile photo Chaitanya Priya Puvvada
      Chaitanya Priya Puvvada
      Blog Post Author

      @Akhthaar Ali Badhusha: :Can you please check if your  browser supports JAVA Script.

      Below are settings.

      Author's profile photo Prashant Patil
      Prashant Patil

      Any idea, if wanted to consume on-prem services without having XSUAA login to SAPUI5 application? ["authenticationMethod": "none"]

       

      Author's profile photo Kartheek Barathepudi
      Kartheek Barathepudi

      Hi Priya Really useful blog for my business scenario,

      I have a different query me trying to deploy a standalone UI5 app to CF

      some of above steps followed but it did not work.. need to modify any chages in Mta.yaml file?

      .yaml setting