Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
SailiRBendale
Explorer
0 Kudos
464

 

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.

SailiRBendale_0-1736750124865.png

 

 
SailiRBendale_1-1736750154657.png

 


Step 2: Create new project from template

We are going to create a Basic multitarget application. Configure the settings as shown below.

SailiRBendale_0-1736248723280.pngSailiRBendale_1-1736248731698.png

A new mta project will be generated (Workspace will be automatically created) with below structure.

SailiRBendale_0-1736248848696.png

 

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.

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

SailiRBendale_2-1736249034456.png

 

SailiRBendale_4-1736249068324.pngSailiRBendale_5-1736249082234.png

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.

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

SailiRBendale_0-1736337229395.pngSailiRBendale_1-1736337240328.png

 

SailiRBendale_2-1736337252378.png

 

SailiRBendale_3-1736337267792.png

 

SailiRBendale_4-1736337274412.png

 

 

SailiRBendale_5-1736337284344.png

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.

SailiRBendale_6-1736337349432.png

 

SailiRBendale_7-1736337356222.png

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

SailiRBendale_0-1736749828890.png

 

 

 

 

_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.

SailiRBendale_0-1736749614123.png

 

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.

SailiRBendale_2-1736337651827.png

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.

SailiRBendale_1-1736749961079.png

 

{
  "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.

SailiRBendale_6-1736337865657.png

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.

SailiRBendale_7-1736338107854.pngSailiRBendale_8-1736338114409.png

 

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.

 
2 Comments
Labels in this area