Skip to Content
Author's profile photo Akarsh Sidhartha

Consuming destinations on cloud foundry from UI5 application

In this blog we would concentrate on a nodeJS application which is deployed on cloud foundry which exposes an API. We use destination service bound to a UI5 application to make an outbound communication to the nodeJS application.

 

So, what is destinations

Connectivity destinations are part of SAP Cloud Platform Connectivity and are used for the outbound communication of a cloud application to a remote system. They contain the connection details for the remote communication of an application. Connectivity destinations are represented by symbolic names that are used by on-demand applications to refer to remote connections. The connectivity service resolves the destination at runtime based on the symbolic name provided. The result is an object that contains customer-specific configuration details. These details contain the URL of the remote system or service, the authentication type, and the relative credentials.

 

Now let’s get our hands dirty.

  1. As I said at the beginning we have 2 modules, the first one being the UI5 module which can be created using the following blog here

2.   Once UI5 application is done lets create a nodejs application which provides an API.

  • a. Setup a nodejs environment on your local machine by downloading Download | Node.js. Once the installation is complete, open command prompt and check the version of node by executing “node -v”

 

  • To the above code lets add one more api in start.js, below is the code.

 

const users = require(‘./users.json’);

app.get(‘/users’, function (req, res) {
console.log(“Get All Request “);

res.status(200).json(users);
});

  •     Create a file users.json in the root folder with dummy data like.
[
{
“first name”: “akarsh”,
“last name “: “sidhartha”,
“material”: “sponge”,
“id”: 0
},
{
“first name”: “manju”,
“last name “: “baburo”,
“material”: “sponge”,
“id”: 0
},
{
“first name”: “hari”,
“last name “: “mahi”,
“material”: “sponge”,
“id”: 0
}
]

 


Time to deploy the nodejs application on to SAP CF.

 

  •  find the correct API URL for your Region. for complete list here is the link
  • In the CLI type cf api and enter you API URL 

 

  • once the API region is set, login to CF using cf login command, 

 

  • now in the root folder of the nodejs application do a cf push in CLI.
  • once the application is deployed got the application in applications section of space, click on the application route. A new tab is opened with display as “Main Page!!”.
  • now to the url add “/users”  you will see the list of users which you created in users.json file.

Lets go ahead and create destinations for the above url.

 

  1. Expand connectivity in the sub account level, choose destinations
  2. click on new destinations and enter details as below.
  3. Note : In the Url section, mention only the url and not the subpath i.e (“/users”). the subpath will be mentioned in the xs-app.json below.

Make the changes in the UI application to call the destination API.

  1. Add getUsers destinations in xs-app.json here is the code 
  2. call the destinations from View1.controller.js file
  3. deploy the UI5 application back to CF from Webide

Now when you run the UI5 application and add breakpoint in onInit function, you would receive a success message for the destination call.

 

A complete source code is available over here

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Fabiano Rosa
      Fabiano Rosa

      Hi Akarsh, this sample code is in your private Git repository. Could you share it (public)?

       

      Best regards,

      Fabiano

      Author's profile photo Manjunath Gudisi
      Manjunath Gudisi

      Hi Fabiano

       

      The Git repo is already public and Im able to access it.

       

      Thanks, Manju

      Author's profile photo Akarsh Sidhartha
      Akarsh Sidhartha
      Blog Post Author

      Hi Fabiano,

      you can download the source code from below link

      https://github.com/akarsh014/destinatons_cloud_foundry

      Author's profile photo shalini forcfaugust
      shalini forcfaugust

      Hi Akarsh,

       

      I had tried to clone your git repository to see how destination works in Cloud Foundry. Able to clone successfully and also i have created the destination in CF envirnoment with name getUsers.

       

      When i tried to run the UI module after building the service module (able to get the user json successfully  in nodejs module) it shows me 404 not found in controller file in ajax request.

      Please let me know whether am i missing something here

       

      Thanks,

      Shalini T

      Author's profile photo Akarsh Sidhartha
      Akarsh Sidhartha
      Blog Post Author

      Shalini add a break point in line 15 and 19 of View1.controller.js and see what the is response message you are getting.

      Author's profile photo Manu Gupta
      Manu Gupta

      Hi Akarsh ,

      Nice blog. I followed and everything worked fine but I have two points to clarify -

      • Is there any way to test destination response locally using SAP webide like we do in SCP Neo using routes in neo-app.json ? Let's suppose I have to create one SAPUI5 app for CRUD operations on node.js API then every time any change happens to achieve CRUD , I have to deploy it to Cloud foundry first and then will test which will waste a lot of time.
      • if my destination uses any authentication type then where it should be defined and how ?

      Thanks,

      Manu

      Author's profile photo Akarsh Sidhartha
      Akarsh Sidhartha
      Blog Post Author

      I shall check and revert Manu

      Author's profile photo Akarsh Sidhartha
      Akarsh Sidhartha
      Blog Post Author

      It is a good feature to have your code tested in webide sandbox before deploying it on to CF, this is under consideration and will be available soon on WEBIDE.

      Author's profile photo Shilpa Koralagundi
      Shilpa Koralagundi

      Hi Akarsh @Akarsh Sidhartha

      Is the destination created in neo or CF?

      Thanks,

      Shilpa

      Author's profile photo Akarsh Sidhartha
      Akarsh Sidhartha
      Blog Post Author

      Shilpa destination is created on CF...

      Author's profile photo Meesum Kirmani
      Meesum Kirmani

      Can u pls elaborate on

      - name: destination_service

      Its nowhere defined in the project

       

      Author's profile photo Akarsh Sidhartha
      Akarsh Sidhartha
      Blog Post Author

      destination_service is the name of the destination service instance. the name "destination_service" would be replaced by the instance name which you have created.

      Author's profile photo Merbin J Anselm
      Merbin J Anselm

      This is really informative! Thanks! 🙂

      Author's profile photo Sean Kong
      Sean Kong

      Hi, Akarsh

      Nice blog, it worked for me but I got a 404 error when I switch my destination points to an on-prem URL. Any idea?

      Thanks

      Author's profile photo Akarsh Sidhartha
      Akarsh Sidhartha
      Blog Post Author

      Apologies for a late reply, did you find the additional required steps to access on-prem url from the destinations ???

      This tutorial has all the details on how to access the on-prem url

      https://developers.sap.com/group.cp-connectivity-odata.html

      Author's profile photo Preeti mayank
      Preeti mayank

      Hi Akarsh,

      I am facing issue. I have a project for CAPM service and another project for UI on CF. How to access capm service in UI. What all steps needs to follow. i created destination but its not working out. Please help.

      Thanks.

      Author's profile photo Nilesh Puranik
      Nilesh Puranik

      Hi Akarsh,

      Thank you for the tutorial.

      Is the UI module and NodeJs module part of the same MTA project ?

      I created a separate NodeJS module to give me the user details . Then created a destination in the BTP as you have done.

      I then created a new FIORI app and deployed it separately. In the xs-app.json i have maintained the route for destination created earlier. I was hoping that the url in $.ajax, would resolve to the NodeJs destination URL + '/function call' but it doesnt resolve and takes the same URL of the fiori app and add the /function call and it obviously fails.

      Any advice ?

      regards,

      Nilesh Puranik