UI5 App consume incorrect XSOData service deployed on SAP Cloud Foundry

[former_member664593]

Hi experts.

I have a MTA project with a HTML5 and a node.js module. I created my xsodata service and I get URL, which I put it as destination on SCP Foundry.

MyController.js

oHanaModel = new sap.ui.model.odata.ODataModel("xsodata/MyService.xsodata", true);

var oODataJSONModel =  new sap.ui.model.json.JSONModel();
		
oHanaModel .read("/MyEntity?$format=json",null,null,false,
	function(oData, oResponse){
          		// set the odata JSON as data of JSON model
           		oODataJSONModel.setData(oData);
			});

this.oSelMyEntity = this.byId("dropDownList");
this.oSelMyEntity .setModel(dropDownList,"localModel");

Well, when I run my application in local mode (SAP Web IDE Rest Full) I get data from HANA and the service is working.

When I make a deploy my MTA project I get this call service, this is different to my destination

UPDATE

xs-app.json

    {
      "source": "^/xsodata/(.*)$",
      "target": "$1",
      "authenticationType": "none",
      "destination": "my_service_xsodata",
      "csrfProtection": false
    },

mta.yaml

modules:
  - name: mtaproject-approuter
    type: approuter.nodejs
    path: mtaproject-approuter
    parameters:
      disk-quota: 256M
      memory: 256M
    requires:
      - name: MTAProject_html5_repo_runtime
      - name: uaa_MTAProject
      - name: portal_resources_MTAProject
      - name: dest_MTAProject
      - name: conn_MTAProject
      - name: workflow_MTAProject
  - name: dbhana
    type: hdb
    path: dbhana
    requires:
      - name: hdi_dbhana
  - name: services_js
    type: nodejs
    path: services_js
    requires:
      - name: dbhana
      - name: hdi_db
    provides:
      - name: services_js_api
        properties:
          url: '${default-url}'
  - name: MyAPPUI5
    type: html5
    path: MyAPPUI5
    build-parameters:
      builder: custom
      commands:
        - npm install
        - npm run build
      supported-platforms: []
      build-result: dist
    requires:
      - name: services_js_api
        group: destinations
        properties:
          name: services-js-backend
          url: '~{url}'

Please, can you help me?

[jhodel18]

Hi Jimmy, it's hard to tell what's wrong given the information you provided. Maybe you can share the MTA config?

[former_member664593]

Hi jhodel18.

I updated this post with my mta.yaml and xs-app.json.

[jhodel18 · Accepted solution]

Hi Jimmy,

You've misplaced this portion:

    requires:
      - name: services_js_api
        group: destinations
        properties:
          name: services-js-backend
          url: '~{url}'

This should be in the app-router module. Know that app router handles all the request traffic and therefore, should have access to the xsodata service. This should fix your issue, and in case it doesn't, then perhaps you have issues also with your app router routing config.

[former_member664593 · Accepted solution]

Hi Jhodel.

I tried your suggestion adding this:

  - name: mtaproject-approuter
    type: approuter.nodejs
    path: mtaproject-approuter
    parameters:
      disk-quota: 256M
      memory: 256M
    requires:
      - name: MTAProject_html5_repo_runtime
      - name: uaa_MTAProject
      - name: portal_resources_MTAProject
      - name: dest_MTAProject
      - name: conn_MTAProject
      - name: workflow_MTAProject
      - name: services_js_api ====> added

But not working, why will should pass by router? I'm calling direct to an external service. I think will should call my URL specified in my destination.

Thanks in advance.

[jhodel18 · Accepted solution]

Whether you are calling internal or external service, you will still need to go through app router. Don't get confused with the method you have in WebIDE. WebIDE is a development environment and you use destinations to proxy the deployed service so it is different than the actual deployed UI5 App.

Also, you only added one line:

- name: services_js_api

Read again my earlier response.

You can use below project as a reference:

https://github.com/SAP-samples/hana-xsa-opensap-hana7/blob/master/mta.yaml

[former_member664593 · Accepted solution]

Hi jhodel18 and florian.pfeffer .

I still be not able to fix this issue. This is my last version code:

mta.yaml

modules:
  - name: mtaproject-approuter
    type: approuter.nodejs
    path: mtaproject-approuter
    parameters:
      disk-quota: 256M
      memory: 256M
    requires:
      - name: MTAProject_html5_repo_runtime
      - name: uaa_MTAProject
      - name: portal_resources_MTAProject
      - name: dest_MTAProject
      - name: conn_MTAProject
      - name: workflow_MTAProject
      - name: services_js_api
        group: destinations
        properties:
          name: services-js-backend
          url: 'https://my_url_service_xsodata-js.cfapps.us10.hana.ondemand.com' //Also I tried with ${default-url}
  - name: dbhana
    type: hdb
    path: dbhana
    requires:
      - name: hdi_dbhana
  - name: services_js
    type: nodejs
    path: services_js
    parameters:
        register-service-url: true
        service-url: '${default-url}'
    requires:
      - name: dbhana
      - name: hdi_dbhana
      - name: uaa_MTAProject
    provides:
      - name: services_js_api
        properties:
          url: '${default-url}'
- name: MyAPPUI5
    type: html5
    path: MyAPPUI5
    build-parameters:
      builder: custom
      commands:
        - npm install
        - npm run build
      supported-platforms: []
      build-result: dist
    parameters:
      register-service-url: true
      service-url: '${default-url}'
    requires:
      - name: services_js_api
        group: destinations
        properties:
          name: services-js-backend
          url: '${default-url}'
          forwardAuthToken: true
      - name: uaa_MTAProject<br>

And my sx-app.json

{
	"source": "(.*)(.xsodata)",
	"destination": "services-js-backend",
	"authenticationType": "xsuaa"
},

Please, can you help me? I have many days with this issue.

Thanks in advance.

[jhodel18 · Accepted solution]

I will put the same answer here - you should have this configured in your app router:

    requires:
      - name: services_js_api
        group: destinations
        properties:
          name: services-js-backend
          url: '~{url}'
          forwardAuthToken: true # <-- added this because you changed your config to use authenticationType = xsuaa

If this doesn't work then that means there are other issues in your project. It could be in your app router routing config (xs-app.json), right now, I'm only seeing a portion of your config.

[former_member664593 · Accepted solution]

This is my xs-app.json

{
	"welcomeFile": "/index.html",
	"authenticationMethod": "route",
	"logout": {
		"logoutEndpoint": "/do/logout"
	},
	"routes": [{
		"source": "^/bpmworkflowruntime/(.*)$",
		"target": "/$1",
		"service": "com.sap.bpm.workflow",
		"endpoint": "workflow_rest_url",
		"authenticationType": "xsuaa"
	}, {
		"source": "(.*)(.xsodata)",
		"destination": "services-js-backend",
		"authenticationType": "xsuaa"
	}, {
		"source": "^/on_premise_conn/(.*)$",
		"target": "$1",
		"authenticationType": "none",
		"destination": "on_premise_dest",
		"csrfProtection": false
	}, {
		"source": "^(.*)$",
		"target": "$1",
		"service": "html5-apps-repo-rt",
		"authenticationType": "xsuaa"
	}]
}

Thanks in advance.

[jhodel18 · Accepted solution]

Are you sure this is the routing config of your app router?

The line below suggests that this is UI5 App routing config:

"welcomeFile": "/index.html",

I'm expecting this:

"welcomeFile": "/cp.portal",

[former_member664593 · Accepted solution]

Yes Jhodel, this is my xs-app.json inside my ui5 app who consume the service xsodata.

[jhodel18 · Accepted solution]

It sounds like you have bigger issues to deal with in your project.

First, you need to know the difference between app router routing config versus the routing config in your UI5 app.

Also, go through some SAP Developer tutorials, like the one below by Marius Obert:

https://developers.sap.com/tutorials/sapui5-fiori-portal-deploy.html

[former_member664593 · Accepted solution]

Sorry, I found this file with "/cp.portal". I have this:

{
	"authenticationMethod": "none",
	"routes": [],
	"welcomeFile": "/cp.portal"
}

What should add in this file?

[former_member664593 · Accepted solution]

Hi jhodel18 and mariusobert .

I modified my xs-app.json in my app router.

{
	"authenticationMethod": "none",
	"routes": [{
		"source": "^(.*)$",
		"target": "$1",
		"service": "html5-apps-repo-rt",
		"authenticationType": "xsuaa"
	}, {
		"source": "(.*)(.xsodata)",
		"destination": "services-js-backend",
		"authenticationType": "none"
	}],
	"welcomeFile": "/cp.portal"
}

Same error 404.

Thanks in advance.

[mariusobert · Accepted solution]

I'd also suggest starting a tutorial on the side and then compare the result of it to your web app. It is possible that you broke the setup somewhere else when making these changes and it's very hard to find this issue now.