cancel
Showing results for 
Search instead for 
Did you mean: 
Read only

UI 5 applications set to BTP Build Work Zone (launchpad) can not call CAP (Java) API

daisukehiekata
Explorer
0 Kudos
2,433

Hello, experts.

I have deployed my UI5 application application to Cloud Foundry and am having trouble calling the CAP (JAVA) API from my UI5 application set to the BTP Build Work Zone (launchpad).

The application created is shown in the link.

Git Link

If you don't mind, I would like to know how to deal with it.

■What I want to do

I want to set the UI5 application to BTP Build Work Zone (launchpad) after deployment and call the API of CAP (JAVA) to display "Hello World" on the console.

■Current status

I want to request by redirecting to the URL of ① when I clicked the Rest Check button, but it turned into the URL of ②, which resulted in a 404 error.

① The URL you expected when you clicked the Rest Check button

https://hogetrial-<backendapiurl>.cfapps.us10-001.hana.ondemand.com/api/hello

->In this case, the console will correctly display

② (URL to actually transition)

https://hogetrial.launchpad.cfapps.us10.hana.ondemand.com/api/hello

->In this case, trying to make a direct request with the URL of Launcpad results in a 404 error

■The project is created according to the following procedure.

1.Select cap project in "New Project From Template" > select "MTA based ..." > select "Basic Sample Files" > click "Finish" to create the project

2. Select the mta.yaml file in the project you created and press Create MTA Module From Template

3. Choose Approuter Configuration and make it the Managed Approuter (default) with Select your HTML5 application runtime

4. Enter a unique name for the business solution of the project.

5. Do you plan to add a UI? - > Press "Next" in "Yes (default)". After pressing, the xs-security.json file is generated.

6.Add restcontroller

7.Add the fiori launchpad module with reference to the image below.

Select Module Template, then select SAP Fiori application

8.Select "SAPUI5 freestyle" as the Application Type, then select "SAPUI5 Application"

9.Select the content below

・Data Source and Service Selection: Use a Local CAP Project

・Choose the CAPProject created in Choose your CAP project

・OData service: CatalogService (Java)

10.In Entity Selection, set with the following contents

・"View name": "View name"

11.Set values in Project Attributes with:

・"Module name": "testapproouter 20230319"

・"Application title" "Titletestapplouter 20230319"

・"" Description ":" A Fiori application. "

・"Add FLP configuration": "Yes"

12.Leave the Deployment Configuration as default and click the Next button

13.Here's what Fiori Launchpad will do to set values and hit the "Finish" button:

・"Semantic Object": "FLPTitletestapproouter 20230319"

・"Action": "displey"

・"Title": "testapproouter 20230319"

14.Add buttons to view and processing to javascript

■View1.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller"
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller) {
        "use strict";

        return Controller.extend("testapprouter20230310.controller.View1", {
            onInit: function () {

            },
            RestControllerTest: function(){
                $.ajax({
                    url:  '/api/hello',
                    type: 'GET'
                }).done(function(data){
                    console.log(data);
                }).fail(function(){
                    console.log("error");
                })
            },
        });
    });

■View1.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="testapprouter20230310.controller.View1" displayBlock="true">
    <Page id="page" title="{i18n>title}">
        <content>
            <Label text="Label" width="100%" id="label0"/>
            <Button xmlns="sap.m" text="RestCheck" id="button0"  press="RestControllerTest" type="Attention" />
        </content>
    </Page>
</mvc:View>

15.Select the mta.yaml file and run the build. After a successful build, deploy.

After deployment, pressing the rest button causes a 404 error. Best Regards,

The following is the content of xs-app.json , manifest.json

■ xs-app.json

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/resources/(.*)$",
      "target": "/resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^/test-resources/(.*)$",
      "target": "/test-resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^/api/(.*)$",
      "target": "/api/$1",
      "destination": "test0313",
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
■ manifest.json
 {
    "_version": "1.49.0",
    "sap.app": {
        "id": "testapprouter20230310",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "0.0.1"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "resources": "resources.json",
        "sourceTemplate": {
            "id": "@sap/generator-fiori:basic",
            "version": "1.9.1",
            "toolsId": "6ab0f62a-9169-463e-9f08-44ba750dd216"
        },
        "dataSources": {
            "mainService": {
                "uri": "/odata/v4/CatalogService/",
                "type": "OData",
                "settings": {
                    "annotations": [],
                    "localUri": "localService/metadata.xml",
                    "odataVersion": "4.0"
                }
            }
        },
        "crossNavigation": {
            "inbounds": {
                "testapprouter20230310-inbound": {
                    "signature": {
                        "parameters": {},
                        "additionalParameters": "allowed"
                    },
                    "semanticObject": "FLPTest20230310",
                    "action": "displey",
                    "title": "{{flpTitle}}",
                    "subTitle": "{{flpSubtitle}}",
                    "icon": ""
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": true,
        "dependencies": {
            "minUI5Version": "1.111.1",
            "libs": {
                "sap.m": {},
                "sap.ui.core": {},
                "sap.f": {},
                "sap.suite.ui.generic.template": {},
                "sap.ui.comp": {},
                "sap.ui.generic.app": {},
                "sap.ui.table": {},
                "sap.ushell": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "testapprouter20230310.i18n.i18n"
                }
            },
            "": {
                "dataSource": "mainService",
                "preload": true,
                "settings": {
                    "synchronizationMode": "None",
                    "operationMode": "Server",
                    "autoExpandSelect": true,
                    "earlyRequests": true
                }
            }
        },
        "resources": {
            "css": [
                {
                    "uri": "css/style.css"
                }
            ]
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "async": true,
                "viewPath": "testapprouter20230310.view",
                "controlAggregation": "pages",
                "controlId": "app",
                "clearControlAggregation": false
            },
            "routes": [
                {
                    "name": "RouteView1",
                    "pattern": ":?query:",
                    "target": [
                        "TargetView1"
                    ]
                }
            ],
            "targets": {
                "TargetView1": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewId": "View1",
                    "viewName": "View1"
                }
            }
        },
        "rootView": {
            "viewName": "testapprouter20230310.view.App",
            "type": "XML",
            "async": true,
            "id": "App"
        }
    },
    "sap.cloud": {
        "public": true,
        "service": "testmanageapprouter20230310"
    }
}


<br>

■ "mta.yaml" after the change

_schema-version: "3.1"
ID: testApprouterPJ20230310
description: testApprouterPJ20230310 application
version: 1.0.0-SNAPSHOT
modules:
# --------------------- SERVER MODULE ------------------------
- name: testApprouterPJ20230310-srv
# ------------------------------------------------------------
  type: java
  path: srv
  properties:
    SPRING_PROFILES_ACTIVE: cloud
  provides:
  - name: srv-api
    properties:
      srv-url: ${default-url}
  parameters:
    buildpack: java_buildpack
  build-parameters:
    build-result: target/*-exec.jar
    builder: custom
    commands:
    - mvn clean package -DskipTests=true
- name: testApprouterPJ20230310-destination-content
  type: com.sap.application.content
  requires:
  - name: testApprouterPJ20230310-destination-service
    parameters:
      content-target: true
  - name: testApprouterPJ20230310_html_repo_host
    parameters:
      service-key:
        name: testApprouterPJ20230310_html_repo_host-key
  - name: uaa_testApprouterPJ20230310
    parameters:
      service-key:
        name: uaa_testApprouterPJ20230310-key
  parameters:
    content:
      instance:
        destinations:
        - Name: testmanageapprouter20230310_testApprouterPJ20230310_html_repo_host
          ServiceInstanceName: testApprouterPJ20230310-html5-app-host-service
          ServiceKeyName: testApprouterPJ20230310_html_repo_host-key
          sap.cloud.service: testmanageapprouter20230310
        - Authentication: OAuth2UserTokenExchange
          Name: testmanageapprouter20230310_uaa_testApprouterPJ20230310
          ServiceInstanceName: testApprouterPJ20230310-xsuaa-service
          ServiceKeyName: uaa_testApprouterPJ20230310-key
          sap.cloud.service: testmanageapprouter20230310
        existing_destinations_policy: ignore
  build-parameters:
    no-source: true
# ------------------ APPLICATION CONTENT ---------------------
- name: testApprouterPJ20230310-app-content
# ------------------------------------------------------------
  type: com.sap.application.content
  path: .
  requires:
  - name: testApprouterPJ20230310-destination-service
  - name: testApprouterPJ20230310_html_repo_host
    parameters:
      content-target: true
  build-parameters:
    build-result: resources
    requires:
    - artifacts:
      - testapprouter20230310.zip
      name: testapprouter20230310
      target-path: resources/
- name: testapprouter20230310
  type: html5
  path: app/testapprouter20230310
  build-parameters:
    build-result: dist
    builder: custom
    commands:
    - npm install
    - npm run build:cf
    supported-platforms: []
resources:
# ------------------------------------------------------------
- name: testApprouterPJ20230310-destination-service
# ------------------------------------------------------------
  type: org.cloudfoundry.managed-service
  requires:
      - name: srv-api
  parameters:
      service: destination
      service-plan: lite
      config:
        version: 1.0.0
        HTML5Runtime_enabled: true
        init_data:
          instance:
            existing_destinations_policy: update        
            destinations:
                - Name: testApprouterPJ20230310-srv
                  URL: ~{srv-api/srv-url}
                  Authentication: NoAuthentication
                  Type: HTTP
                  ProxyType: Internet
                  HTML5.ForwardAuthToken: true
                  HTML5.DynamicDestination: true
# ------------------------------------------------------------
- name: testApprouterPJ20230310_html_repo_host
# ------------------------------------------------------------
  type: org.cloudfoundry.managed-service
  parameters:
    service: html5-apps-repo
    service-name: testApprouterPJ20230310-html5-app-host-service
    service-plan: app-host
- name: uaa_testApprouterPJ20230310
  type: org.cloudfoundry.managed-service
  parameters:
    path: ./xs-security.json
    service: xsuaa
    service-name: testApprouterPJ20230310-xsuaa-service
    service-plan: application
parameters:
  deploy_mode: html5-repo
  enable-parallel-deployments: true

Accepted Solutions (0)

Answers (2)

Answers (2)

WouterLemaire
SAP Mentor
SAP Mentor

I think you are missing the destination configuration in the mta.yaml file like in this example:

https://github.com/SAP-samples/cap-sflight/blob/ede6291dbfd2ef593ec97bc33ed9fc71d2617b6a/mta.yaml#L1...

daisukehiekata
Explorer
0 Kudos

Wouter

Thank you for your comment.

I changed "mta.yaml" referring to the linked project, but unfortunately the result did not change.

We have added the modified mta.yaml in the text.

Also, the following git file has been updated.

https://github.com/yabanchan/approutertest0310

WouterLemaire
SAP Mentor
SAP Mentor
0 Kudos

I see the problem is the way you trigger the call to the backend. You have to remove the leading slash in the datasource in the manifest:


dataSources": {
            "mainService": {
                "uri": "odata/v4/CatalogService/",

Secondly, you have to use the odata model to trigger the request. I have here an example project how to trigger an odata v4 request manually in the controller: https://github.com/lemaiwo/ODatav4DemoApp/blob/main/app/ODataV4DemoUI/src/service/BookService.ts


removing the leading slash and using the odatamodel of ui5 will make sure that you are using the correct url. The html5 app repo will generate an id for the url based on the cloud service id. You’ll see this path when the app is loaded. Api calls need to use the same path.


hope this helps

junwu
SAP Champion
SAP Champion
var url=this.getOwnerComponent().getManifestObject().resolveUri("/api/hello");
$.ajax({ url: url, type: 'GET' }).done(function(date){ console.log(date); }).fail(function(){ console.log("error"); })


check if this works
daisukehiekata
Explorer
0 Kudos

Jun Wu

Thank you for answering

I tried the above method, but could not call the RestApi URL

The content of "url" is now "/api/hello"

I am currently investigating the cause. Is there a mistake in my "manifest.json" or other file description?

junwu
SAP Champion
SAP Champion
0 Kudos

can you show me your manifest and xs-app json file?

daisukehiekata
Explorer
0 Kudos

Added to the text.

Also, the following link is the git link

https://github.com/yabanchan/approutertest0310

junwu
SAP Champion
SAP Champion
0 Kudos

make these two change to see if it makes any difference.

{
      "source": "/api/(.*)$",
      "target": "/api/$1",
      "destination": "test0313",
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },

"mainService": { "uri": "odata/v4/CatalogService/",
daisukehiekata
Explorer
0 Kudos

My modification may not be correct, but I tried the following modification.

But the situation did not change...

■xs-app.json

    {
      "source": "^/api/(.*)$",
      "target": "/api/$1",
      "destination": "testApprouterPJ20230310-srv",
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },

■mta.yaml

# --------------------- SERVER MODULE ------------------------
- name: testApprouterPJ20230310-srv
# ------------------------------------------------------------
  type: java
  path: srv
  properties:
    SPRING_PROFILES_ACTIVE: cloud
  provides:
  - name: srv-api
    properties:
      srv-url: ${default-url}
  parameters:
    buildpack: java_buildpack
  build-parameters:
    build-result: target/*-exec.jar
    builder: custom
    commands:
    - mvn clean package -DskipTests=true

...

resources:
# ------------------------------------------------------------
- name: testApprouterPJ20230310-destination-service
# ------------------------------------------------------------
  type: org.cloudfoundry.managed-service
  requires:
      - name: srv-api
  parameters:
      service: destination
      service-plan: lite
      config:
        version: 1.0.0
        HTML5Runtime_enabled: true
        init_data:
          instance:
            existing_destinations_policy: update        
            destinations:
                - Name: testApprouterPJ20230310-srv
                  URL: ~{srv-api/srv-url}
                  Authentication: NoAuthentication
                  Type: HTTP
                  ProxyType: Internet
                  HTML5.ForwardAuthToken: true
                  HTML5.DynamicDestination: true
junwu
SAP Champion
SAP Champion
0 Kudos

you didn't do anything I asked......