Skip to Content

UI Module not picking up correct JS Service in SCP MTA application


HI,

I am using SAP Cloud Platform Cloud Foundry trial version. I am trying to create a simple MTA app (named Test) which has a db, node.js and a ui module. I don't want to connect HANA db to my db module. I want the data which is already present in CDS Artifacts tables to be consumed in node js module via oData service and exposed to ui.

I have created db module with CDS artifact (named CDS) and table (named Parameter). I have inserted some records in this table via insert command. I don't want to use Hana db and so I have not set up the Hana db connection and any other user provided service.

I created a node.js module and added .xsodata file which has below code to set up oData service:

service namespace "Test.data.services" { "Test.db::cds.Parameter" as "Parameters"; }

When I execute the node js module and navigate to the table by adding the "/ui.xsodata/Parameters?$format=json" to the node js url, I can see the data of Parameter table in JSON format in browser.

Next step is to create a ui module. We call the Pameters table and code to display data in tabular form as below:

getControllerName: function () {
		return "ui.ui.controller.DBF";
	},


	/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
	 * Since the Controller is given to this method, its event handlers can be attached right away.
	 * @memberOf controller.DBF
	 */
	createContent: function (oController) {
		var oModel = new sap.ui.model.odata.v2.ODataModel("/ui.xsodata/", { json: true });
		
        oModel.setRefreshAfterChange(true);
        
        var oParamsTable = new sap.m.Table({
            mode: sap.m.ListMode.SingleSelectLeft,
            columns: [
                new sap.m.Column({ header: new sap.m.Label({ text: "Parameter ID" }) }),
                new sap.m.Column({ header: new sap.m.Label({ text: "Parameter Description" }) }),
                new sap.m.Column({ header: new sap.m.Label({ text: "Parameter Value" }) })
            ],
            items: {
                path: "/Parameters",
                parameters: {
                    select: "Param_Key,Param_Desc,Param_Type"
                },
                template: new sap.m.ColumnListItem({
                    cells: [
                        new sap.m.Text({ text: "{Param_Key}" }),
                        new sap.m.Text({ text: "{Param_Desc}" }),
                        new sap.m.Text({ text: "{Param_Type}" })
                    ]
                })
            }
        });


        oParamsTable.setHeaderText("Parameter Table");
        oParamsTable.setModel(oModel);
       
 

After setting up DB, JS and UI module, our MTA looks like below.

The issues is when we execute the UI module, the ui code is executed but the data is not displayed from the Parameter table. Can anyone help with where exactly is the issue is? I am thinking that UI module is not able to pick the correct js service. When I see the developer tools and check logs, the UI is not pointing to the correct URL.

modules:
  - name: db
    type: hdb
    path: db
    requires:
      - name: hdi_db
  - name: js
    type: nodejs
    path: js
    provides:
      - name: js_api
        properties:
          url: '${default-url}'
    requires:
      - name: hdi_db
        properties:
          TARGET_CONTAINER: '~{hdi-container-name}'
      - name: uaa_DBF_Test
  - name: ui
    type: html5
    path: ui
    parameters:
      disk-quota: 256M
      memory: 256M
    build-parameters:
      builder: grunt
    requires:
      - name: uaa_DBF_Test
      - name: dest_DBF_Test
      - name: js_api
        group: destinations
        properties:
          name: js_be
          url: '~{url}'
          forwardAuthToken: true
    properties:
      TENANT_HOST_PATTERN: "'^(.*)-Jeroen-ui.cfapps.(.*).hana.ondemand.com'"
resources:
  - name: hdi_db
    properties:
      hdi-container-name: '${service-name}'
    type: com.sap.xs.hdi-container
  - name: uaa_DBF_Test
    parameters:
      path: ./xs-security.json
      service-plan: application
      service: xsuaa
    type: org.cloudfoundry.managed-service
  - name: dest_DBF_Test
    parameters:
      service-plan: lite
      service: destination
    type: org.cloudfoundry.managed-service
Add comment
10|10000 characters needed characters exceeded

  • Hi Jeroen,

    I am facing similar issue where a route from UI5 module is not being redirected to the NodeJS module service.

    In addition to how you have setup the destinations inside MTA, I've also defined the route in xs-app.json file for the UI5 module as mentioned below:

    "routes": [{
    		"source": "/node(.*)",
    		"destination": "js-api",
    		"csrfProtection": true,
    		"authenticationType": "xsuaa"
    	}]<br>

    And it still doesn't work. This setup used to work in XSA.

  • Get RSS Feed

2 Answers

  • Dec 11, 2018 at 02:21 AM

    Hello,

    Are you still facing the same issue? Is this working?.. I am also facing the same issue with Cloud foundry trial account. please let me know if this is working for you.

    Regards,

    Prince Joel

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 11, 2018 at 08:05 PM

    Hi Jeroen,

    Please read my blog on how authentication is carried out from your front-end application to the back-end service via a destination by using the AppRouter contained in any HTML5 module (Cloud Foundry).

    If you need to see a working example, please check the CAP - Cloud Application Programming Model. This WebIDE template will create the db and srv for you with the aid of cds artifacts so you don't have to actually create any runtime database artifacts yourself and neither the odata services. Once you add an html5 application to your MTA it also adds support for the AppRouter - thus you would also benefit from having the routes usage automated for your use case.

    I would recommend you to test this CAP method and then check how things work - more specifically how the routes are specified in the xs-app.json and how the JWT token is forwarded to your back-end service.

    Best regards,
    Ivan

    Add comment
    10|10000 characters needed characters exceeded