on 2023 Mar 10 8:42 AM
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.
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
Request clarification before answering.
I think you are missing the destination configuration in the mta.yaml file like in this example:
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Added to the text.
Also, the following link is the git link
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
User | Count |
---|---|
31 | |
10 | |
8 | |
7 | |
6 | |
6 | |
6 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.