June 27, 2018 3 minute read

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.

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”

Create a node js application by following this link helloword | nodejs

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.

Expand connectivity in the sub account level, choose destinations
click on new destinations and enter details as below.
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.

Add getUsers destinations in xs-app.json here is the code
call the destinations from View1.controller.js file
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

17 Comments

You must be Logged on to comment or reply to a post.

fabiano rosa

July 2, 2018 at 1:22 pm

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

Best regards,

Fabiano

Manjunath GUDISI

July 3, 2018 at 10:07 am

Hi Fabiano

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

Thanks, Manju

Akarsh Sidhartha

Blog Post Author

July 12, 2018 at 9:32 am

Hi Fabiano,

you can download the source code from below link

https://github.com/akarsh014/destinatons_cloud_foundry

shalini forcfaugust

August 16, 2018 at 2:11 pm

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

Akarsh Sidhartha

Blog Post Author

August 17, 2018 at 5:08 am

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

Manu Gupta

August 18, 2018 at 12:50 pm

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

Akarsh Sidhartha

Blog Post Author

September 5, 2018 at 4:42 am

I shall check and revert Manu

Akarsh Sidhartha

Blog Post Author

October 1, 2018 at 6:12 am

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.

Shilpa .

September 5, 2018 at 4:31 am

Hi Akarsh @Akarsh Sidhartha

Is the destination created in neo or CF?

Thanks,

Shilpa

Akarsh Sidhartha

Blog Post Author

September 5, 2018 at 4:43 am

Shilpa destination is created on CF...

Meesum Kirmani

October 8, 2018 at 1:49 pm

Can u pls elaborate on

- name: destination_service

Its nowhere defined in the project

Akarsh Sidhartha

Blog Post Author

October 10, 2018 at 10:48 am

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.

Merbin J Anselm

October 31, 2018 at 11:05 am

This is really informative! Thanks! 🙂

Sean Kong

December 11, 2019 at 6:47 am

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

Akarsh Sidhartha

Blog Post Author

April 23, 2020 at 10:40 am

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

Preeti mayank

May 20, 2020 at 5:27 am

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.

Nilesh Puranik

May 11, 2021 at 9:48 pm

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

Consuming destinations on cloud foundry from UI5 application

Assigned Tags