Consuming external services(Odata/Rest) using destinations configured in BTP cockpit.

Hello All,

In this blog post, I will be demonstrating on how to call external services using destinations configured in Destinations in BTP cockpit.

Before we start with demonstration, I would like to provide a brief information about the type of application development that we will be following in this demo.
– We will be creating a MTA application
– We will use managed approuter, In order to use this, we have to enable/configure the SAP Build Workzone subscription in trial account.
– We will deploy the application on cloud foundry.
– We will be consuming below mentioned external services:
— https://services.odata.org/V3/Northwind/Northwind.svc/Customers?$format=json
— https://api.restful-api.dev/objects/4

Step 1: Creating Destination in BTP subaccount.
Destinations has to be created at each subaccount level. Since, we are using Trial account for this demo, our cockpit will have only one subaccount.
We have created 2 destinations as mentioned below:
1. Northwind destination
2. Restful API destination
To create destination, follow the path Trial home -> Account Explorer (Global account) -> trial subaccount -> Connectivity -> Destinations
Below are the screenshot of the Destinations created.

schema-version: “3.2”
ID: demomta
version: 0.0.1​

Step 3: Adding approuter to the mta project.

Use managed app router, which is maintained by SAP. For using managed approuter, you need to subscribe to portal/launchpad service. We have subscribed to workzone service in cockpit.

Right click on mta.yaml file and select ‘Create MTA Module from Template’.Follow the steps shown in below screenshots for approuter creation.

Note: mta.yaml file will be automatically updated as shown below.

_schema-version: “3.2”
ID: demomta
version: 0.0.1
modules:
– name: demomta-destination-content
type: com.sap.application.content
requires:
– name: demomta-destination-service
parameters:
content-target: true
– name: demomta_html_repo_host
parameters:
service-key:
name: demomta_html_repo_host-key
– name: uaa_demomta
parameters:
service-key:
name: uaa_demomta-key
parameters:
content:
instance:
destinations:
– Name: demomtaapprouter_demomta_html_repo_host
ServiceInstanceName: demomta-html5-app-host-service
ServiceKeyName: demomta_html_repo_host-key
sap.cloud.service: demomtaapprouter
– Authentication: OAuth2UserTokenExchange
Name: demomtaapprouter_uaa_demomta
ServiceInstanceName: demomta-xsuaa-service
ServiceKeyName: uaa_demomta-key
sap.cloud.service: demomtaapprouter
existing_destinations_policy: ignore
build-parameters:
no-source: true
resources:
– name: demomta-destination-service
type: org.cloudfoundry.managed-service
parameters:
config:
HTML5Runtime_enabled: true
init_data:
instance:
destinations:
– Authentication: NoAuthentication
Name: ui5
ProxyType: Internet
Type: HTTP
URL: https://ui5.sap.com
existing_destinations_policy: update
version: 1.0.0
service: destination
service-name: demomta-destination-service
service-plan: lite
– name: demomta_html_repo_host
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-name: demomta-html5-app-host-service
service-plan: app-host
– name: uaa_demomta
type: org.cloudfoundry.managed-service
parameters:
path: ./xs-security.json
service: xsuaa
service-name: demomta-xsuaa-service
service-plan: application
parameters:
deploy_mode: html5-repo
enable-parallel-deployments: true

Step 4: Create a UI module in the mta project.

Right click on mta.yaml file and select ‘Create MTA Module from Template’.Follow the steps shown in below screenshots for UI module creation.

Note: Project folder path should be the path of the MTA project created earlier and select the option to add deployment configuration to the project.

Note: Mta.yaml file will be updated automatically to include newly added UI module in module section as highlighted below.

_schema-version: “3.2”
ID: demomta
version: 0.0.1
modules:
– name: demomta-destination-content
type: com.sap.application.content
requires:
– name: demomta-destination-service
parameters:
content-target: true
– name: demomta_html_repo_host
parameters:
service-key:
name: demomta_html_repo_host-key
– name: uaa_demomta
parameters:
service-key:
name: uaa_demomta-key
parameters:
content:
instance:
destinations:
– Name: demomtaapprouter_demomta_html_repo_host
ServiceInstanceName: demomta-html5-app-host-service
ServiceKeyName: demomta_html_repo_host-key
sap.cloud.service: demomtaapprouter
– Authentication: OAuth2UserTokenExchange
Name: demomtaapprouter_uaa_demomta
ServiceInstanceName: demomta-xsuaa-service
ServiceKeyName: uaa_demomta-key
sap.cloud.service: demomtaapprouter
existing_destinations_policy: ignore
build-parameters:
no-source: true
– name: demomta-app-content
type: com.sap.application.content
path: .
requires:
– name: demomta_html_repo_host
parameters:
content-target: true
build-parameters:
build-result: resources
requires:
– artifacts:
– nwui.zip
name: nwui
target-path: resources/
– name: nwui
type: html5
path: nwui
build-parameters:
build-result: dist
builder: custom
commands:
– npm install
– npm run build:cf
supported-platforms: []
resources:
– name: demomta-destination-service
type: org.cloudfoundry.managed-service
parameters:
config:
HTML5Runtime_enabled: true
init_data:
instance:
destinations:
– Authentication: NoAuthentication
Name: ui5
ProxyType: Internet
Type: HTTP
URL: https://ui5.sap.com
existing_destinations_policy: update
version: 1.0.0
service: destination
service-name: demomta-destination-service
service-plan: lite
– name: demomta_html_repo_host
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-name: demomta-html5-app-host-service
service-plan: app-host
– name: uaa_demomta
type: org.cloudfoundry.managed-service
parameters:
path: ./xs-security.json
service: xsuaa
service-name: demomta-xsuaa-service
service-plan: application
parameters:
deploy_mode: html5-repo
enable-parallel-deployments: true

Now, the UI module will be created automatically with below structure.

Step 5: Update the xs-app.json

Update the xs-app.json file in the UI module folder to add routes for northwind service.

i.e. URLs which have nwdest in them will be redirected from mentioned destination in cockpit.

{
“welcomeFile”: “/index.html”,
“authenticationMethod”: “route”,
“routes”: [
{
“source”: “^/nwdest/(.*)$”,
“target”: “/$1”,
“authenticationType”: “none”,
“destination”: “northwind”
},
{
“source”: “^/resources/(.*)$”,
“target”: “/resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^/test-resources/(.*)$”,
“target”: “/test-resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^(.*)$”,
“target”: “$1”,
“service”: “html5-apps-repo-rt”,
“authenticationType”: “xsuaa”
}
]
}

Step 6: Calling the Northwind Service using AJAX call.

Add the below code in View1 controller init to call the NW service using destination configured in xs-app.json

var sURL = “nwdest/V3/Northwind/Northwind.svc/Customers?$format=json”;
var data = jQuery.ajax({
method: “GET”,
async: false,
url: sURL,
success: function (data) {
console.log(“in success”);
}
});

Step 7: Creation of second UI Module.

Repeat the Steps 4 to 6, to create another UI module which will call service using restful destination.

Below project structure will be created.

Note: Mta.yaml should be automatically updated to include both UI modules

_schema-version: “3.2”
ID: demomta
version: 0.0.1
modules:
– name: demomta-destination-content
type: com.sap.application.content
requires:
– name: demomta-destination-service
parameters:
content-target: true
– name: demomta_html_repo_host
parameters:
service-key:
name: demomta_html_repo_host-key
– name: uaa_demomta
parameters:
service-key:
name: uaa_demomta-key
parameters:
content:
instance:
destinations:
– Name: demomtaapprouter_demomta_html_repo_host
ServiceInstanceName: demomta-html5-app-host-service
ServiceKeyName: demomta_html_repo_host-key
sap.cloud.service: demomtaapprouter
– Authentication: OAuth2UserTokenExchange
Name: demomtaapprouter_uaa_demomta
ServiceInstanceName: demomta-xsuaa-service
ServiceKeyName: uaa_demomta-key
sap.cloud.service: demomtaapprouter
existing_destinations_policy: ignore
build-parameters:
no-source: true
– name: demomta-app-content
type: com.sap.application.content
path: .
requires:
– name: demomta_html_repo_host
parameters:
content-target: true
build-parameters:
build-result: resources
requires:
– artifacts:
– nwui.zip
name: nwui
target-path: resources/
– artifacts:
– restfulapiui.zip
name: restfulapiui
target-path: resources/
– name: nwui
type: html5
path: nwui
build-parameters:
build-result: dist
builder: custom
commands:
– npm install
– npm run build:cf
supported-platforms: []
– name: restfulapiui
type: html5
path: restfulapiui
build-parameters:
build-result: dist
builder: custom
commands:
– npm install
– npm run build:cf
supported-platforms: []
resources:
– name: demomta-destination-service
type: org.cloudfoundry.managed-service
parameters:
config:
HTML5Runtime_enabled: true
init_data:
instance:
destinations:
– Authentication: NoAuthentication
Name: ui5
ProxyType: Internet
Type: HTTP
URL: https://ui5.sap.com
existing_destinations_policy: update
version: 1.0.0
service: destination
service-name: demomta-destination-service
service-plan: lite
– name: demomta_html_repo_host
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-name: demomta-html5-app-host-service
service-plan: app-host
– name: uaa_demomta
type: org.cloudfoundry.managed-service
parameters:
path: ./xs-security.json
service: xsuaa
service-name: demomta-xsuaa-service
service-plan: application
parameters:
deploy_mode: html5-repo
enable-parallel-deployments: true

xs-app.json in second UI module will look like below.

{
“welcomeFile”: “/index.html”,
“authenticationMethod”: “route”,
“routes”: [
{
“source”: “^/restfulapi/(.*)$”,
“target”: “/$1”,
“authenticationType”: “none”,
“destination”: “restful”
},
{
“source”: “^/resources/(.*)$”,
“target”: “/resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^/test-resources/(.*)$”,
“target”: “/test-resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^(.*)$”,
“target”: “$1”,
“service”: “html5-apps-repo-rt”,
“authenticationType”: “xsuaa”
}
]
}

and below code should be added to the View 1 controller of second UI Module.

var sURL = “restfulapi/objects/4”;
var data = jQuery.ajax({
method: “GET”,
async: false,
url: sURL,
success: function (data) {
console.log(“in success”);
}
});

Step 8: Build and deploy the project to cloud foundry

Right click on the mta.yaml file and select ‘Build MTA Project’ to start the project build.

Once the build is successfully completed, a new folder ‘mta_archives’ will be added to the MTA project as shown below.

The mta_archives folder will contain a .mtar file which will be used for deployment to cloud foundry.

Right click on the .mtar  file and select deploy option.

Note that system may prompt you to enter your Cloud Foundry credentials. Kindly enter the credentials and select correct API Endpoint and Org Space.

Once, application is successfully deployed, You will be able to find those applications in the cockpit under HTML5 Applications tab.

When you click on the link, you should be able to check the service call in network tab as shown below.

With this, we come to the end of this blog post. I hope this blog post proves to be a useful resource in the future.

​  Hello All,In this blog post, I will be demonstrating on how to call external services using destinations configured in Destinations in BTP cockpit.Before we start with demonstration, I would like to provide a brief information about the type of application development that we will be following in this demo.- We will be creating a MTA application- We will use managed approuter, In order to use this, we have to enable/configure the SAP Build Workzone subscription in trial account.- We will deploy the application on cloud foundry.- We will be consuming below mentioned external services:– https://services.odata.org/V3/Northwind/Northwind.svc/Customers?$format=json– https://api.restful-api.dev/objects/4 Step 1: Creating Destination in BTP subaccount.Destinations has to be created at each subaccount level. Since, we are using Trial account for this demo, our cockpit will have only one subaccount.We have created 2 destinations as mentioned below:1. Northwind destination2. Restful API destinationTo create destination, follow the path Trial home -> Account Explorer (Global account) -> trial subaccount -> Connectivity -> DestinationsBelow are the screenshot of the Destinations created.   Step 2: Create new project from templateWe are going to create a Basic multitarget application. Configure the settings as shown below.A new mta project will be generated (Workspace will be automatically created) with below structure. Note that the mta.yaml file will be initially empty as shown below.   schema-version: “3.2”
ID: demomta
version: 0.0.1​    Step 3: Adding approuter to the mta project. Use managed app router, which is maintained by SAP. For using managed approuter, you need to subscribe to portal/launchpad service. We have subscribed to workzone service in cockpit.Right click on mta.yaml file and select ‘Create MTA Module from Template’.Follow the steps shown in below screenshots for approuter creation. Note: mta.yaml file will be automatically updated as shown below.   _schema-version: “3.2”
ID: demomta
version: 0.0.1
modules:
– name: demomta-destination-content
type: com.sap.application.content
requires:
– name: demomta-destination-service
parameters:
content-target: true
– name: demomta_html_repo_host
parameters:
service-key:
name: demomta_html_repo_host-key
– name: uaa_demomta
parameters:
service-key:
name: uaa_demomta-key
parameters:
content:
instance:
destinations:
– Name: demomtaapprouter_demomta_html_repo_host
ServiceInstanceName: demomta-html5-app-host-service
ServiceKeyName: demomta_html_repo_host-key
sap.cloud.service: demomtaapprouter
– Authentication: OAuth2UserTokenExchange
Name: demomtaapprouter_uaa_demomta
ServiceInstanceName: demomta-xsuaa-service
ServiceKeyName: uaa_demomta-key
sap.cloud.service: demomtaapprouter
existing_destinations_policy: ignore
build-parameters:
no-source: true
resources:
– name: demomta-destination-service
type: org.cloudfoundry.managed-service
parameters:
config:
HTML5Runtime_enabled: true
init_data:
instance:
destinations:
– Authentication: NoAuthentication
Name: ui5
ProxyType: Internet
Type: HTTP
URL: https://ui5.sap.com
existing_destinations_policy: update
version: 1.0.0
service: destination
service-name: demomta-destination-service
service-plan: lite
– name: demomta_html_repo_host
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-name: demomta-html5-app-host-service
service-plan: app-host
– name: uaa_demomta
type: org.cloudfoundry.managed-service
parameters:
path: ./xs-security.json
service: xsuaa
service-name: demomta-xsuaa-service
service-plan: application
parameters:
deploy_mode: html5-repo
enable-parallel-deployments: true   Step 4: Create a UI module in the mta project.Right click on mta.yaml file and select ‘Create MTA Module from Template’.Follow the steps shown in below screenshots for UI module creation.     Note: Project folder path should be the path of the MTA project created earlier and select the option to add deployment configuration to the project. Note: Mta.yaml file will be updated automatically to include newly added UI module in module section as highlighted below.    _schema-version: “3.2”
ID: demomta
version: 0.0.1
modules:
– name: demomta-destination-content
type: com.sap.application.content
requires:
– name: demomta-destination-service
parameters:
content-target: true
– name: demomta_html_repo_host
parameters:
service-key:
name: demomta_html_repo_host-key
– name: uaa_demomta
parameters:
service-key:
name: uaa_demomta-key
parameters:
content:
instance:
destinations:
– Name: demomtaapprouter_demomta_html_repo_host
ServiceInstanceName: demomta-html5-app-host-service
ServiceKeyName: demomta_html_repo_host-key
sap.cloud.service: demomtaapprouter
– Authentication: OAuth2UserTokenExchange
Name: demomtaapprouter_uaa_demomta
ServiceInstanceName: demomta-xsuaa-service
ServiceKeyName: uaa_demomta-key
sap.cloud.service: demomtaapprouter
existing_destinations_policy: ignore
build-parameters:
no-source: true
– name: demomta-app-content
type: com.sap.application.content
path: .
requires:
– name: demomta_html_repo_host
parameters:
content-target: true
build-parameters:
build-result: resources
requires:
– artifacts:
– nwui.zip
name: nwui
target-path: resources/
– name: nwui
type: html5
path: nwui
build-parameters:
build-result: dist
builder: custom
commands:
– npm install
– npm run build:cf
supported-platforms: []
resources:
– name: demomta-destination-service
type: org.cloudfoundry.managed-service
parameters:
config:
HTML5Runtime_enabled: true
init_data:
instance:
destinations:
– Authentication: NoAuthentication
Name: ui5
ProxyType: Internet
Type: HTTP
URL: https://ui5.sap.com
existing_destinations_policy: update
version: 1.0.0
service: destination
service-name: demomta-destination-service
service-plan: lite
– name: demomta_html_repo_host
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-name: demomta-html5-app-host-service
service-plan: app-host
– name: uaa_demomta
type: org.cloudfoundry.managed-service
parameters:
path: ./xs-security.json
service: xsuaa
service-name: demomta-xsuaa-service
service-plan: application
parameters:
deploy_mode: html5-repo
enable-parallel-deployments: true   Now, the UI module will be created automatically with below structure. Step 5: Update the xs-app.jsonUpdate the xs-app.json file in the UI module folder to add routes for northwind service.i.e. URLs which have nwdest in them will be redirected from mentioned destination in cockpit.   {
“welcomeFile”: “/index.html”,
“authenticationMethod”: “route”,
“routes”: [
{
“source”: “^/nwdest/(.*)$”,
“target”: “/$1”,
“authenticationType”: “none”,
“destination”: “northwind”
},
{
“source”: “^/resources/(.*)$”,
“target”: “/resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^/test-resources/(.*)$”,
“target”: “/test-resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^(.*)$”,
“target”: “$1”,
“service”: “html5-apps-repo-rt”,
“authenticationType”: “xsuaa”
}
]
}   Step 6: Calling the Northwind Service using AJAX call.Add the below code in View1 controller init to call the NW service using destination configured in xs-app.json  var sURL = “nwdest/V3/Northwind/Northwind.svc/Customers?$format=json”;
var data = jQuery.ajax({
method: “GET”,
async: false,
url: sURL,
success: function (data) {
console.log(“in success”);
}
}); Step 7: Creation of second UI Module.Repeat the Steps 4 to 6, to create another UI module which will call service using restful destination.Below project structure will be created.Note: Mta.yaml should be automatically updated to include both UI modules _schema-version: “3.2”
ID: demomta
version: 0.0.1
modules:
– name: demomta-destination-content
type: com.sap.application.content
requires:
– name: demomta-destination-service
parameters:
content-target: true
– name: demomta_html_repo_host
parameters:
service-key:
name: demomta_html_repo_host-key
– name: uaa_demomta
parameters:
service-key:
name: uaa_demomta-key
parameters:
content:
instance:
destinations:
– Name: demomtaapprouter_demomta_html_repo_host
ServiceInstanceName: demomta-html5-app-host-service
ServiceKeyName: demomta_html_repo_host-key
sap.cloud.service: demomtaapprouter
– Authentication: OAuth2UserTokenExchange
Name: demomtaapprouter_uaa_demomta
ServiceInstanceName: demomta-xsuaa-service
ServiceKeyName: uaa_demomta-key
sap.cloud.service: demomtaapprouter
existing_destinations_policy: ignore
build-parameters:
no-source: true
– name: demomta-app-content
type: com.sap.application.content
path: .
requires:
– name: demomta_html_repo_host
parameters:
content-target: true
build-parameters:
build-result: resources
requires:
– artifacts:
– nwui.zip
name: nwui
target-path: resources/
– artifacts:
– restfulapiui.zip
name: restfulapiui
target-path: resources/
– name: nwui
type: html5
path: nwui
build-parameters:
build-result: dist
builder: custom
commands:
– npm install
– npm run build:cf
supported-platforms: []
– name: restfulapiui
type: html5
path: restfulapiui
build-parameters:
build-result: dist
builder: custom
commands:
– npm install
– npm run build:cf
supported-platforms: []
resources:
– name: demomta-destination-service
type: org.cloudfoundry.managed-service
parameters:
config:
HTML5Runtime_enabled: true
init_data:
instance:
destinations:
– Authentication: NoAuthentication
Name: ui5
ProxyType: Internet
Type: HTTP
URL: https://ui5.sap.com
existing_destinations_policy: update
version: 1.0.0
service: destination
service-name: demomta-destination-service
service-plan: lite
– name: demomta_html_repo_host
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-name: demomta-html5-app-host-service
service-plan: app-host
– name: uaa_demomta
type: org.cloudfoundry.managed-service
parameters:
path: ./xs-security.json
service: xsuaa
service-name: demomta-xsuaa-service
service-plan: application
parameters:
deploy_mode: html5-repo
enable-parallel-deployments: true xs-app.json in second UI module will look like below. {
“welcomeFile”: “/index.html”,
“authenticationMethod”: “route”,
“routes”: [
{
“source”: “^/restfulapi/(.*)$”,
“target”: “/$1”,
“authenticationType”: “none”,
“destination”: “restful”
},
{
“source”: “^/resources/(.*)$”,
“target”: “/resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^/test-resources/(.*)$”,
“target”: “/test-resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^(.*)$”,
“target”: “$1”,
“service”: “html5-apps-repo-rt”,
“authenticationType”: “xsuaa”
}
]
} and below code should be added to the View 1 controller of second UI Module.  var sURL = “restfulapi/objects/4”;
var data = jQuery.ajax({
method: “GET”,
async: false,
url: sURL,
success: function (data) {
console.log(“in success”);
}
}); Step 8: Build and deploy the project to cloud foundryRight click on the mta.yaml file and select ‘Build MTA Project’ to start the project build.Once the build is successfully completed, a new folder ‘mta_archives’ will be added to the MTA project as shown below.The mta_archives folder will contain a .mtar file which will be used for deployment to cloud foundry.Right click on the .mtar  file and select deploy option.Note that system may prompt you to enter your Cloud Foundry credentials. Kindly enter the credentials and select correct API Endpoint and Org Space.Once, application is successfully deployed, You will be able to find those applications in the cockpit under HTML5 Applications tab.When you click on the link, you should be able to check the service call in network tab as shown below. With this, we come to the end of this blog post. I hope this blog post proves to be a useful resource in the future.    Read More Technology Blogs by Members articles 

#SAP

#SAPTechnologyblog