Business Application Studio - Cloud foundry Portal - HTML5 app - Not working

[former_member721626]

Experts,

In this case, I have a really simple html5 application, builded in SAP SCP Cloud Foundry and I am currently trying to use it in the Portal service.

1) I have used these posts to make the app and deploy it (they are almost the same):

https://blogs.sap.com/2020/09/11/building-a-central-launchpad-using-sap-cloud-platform-launchpad-ser...

https://www.saplearners.com/how-to-develop-fiori-app-in-sap-business-application-studio/

2) Now I am facing this issue in SCP CF Portal when I open the app:

2.1) Portal configs:

2.2) App services in Cloud foundry:

3) XS-JSON

{
    "welcomeFile": "/index.html",
    "authenticationMethod": "none",
    "logout": {
        "logoutEndpoint": "/do/logout"
    },
    "routes": [
        {
            "authenticationType": "basic",
            "csrfProtection": false,
            "source": "^/pm_service/(.*)$",
            "destination": "pm_service",
            "target": "$1"
        },
        {
            "source": "^(.*)$",
            "target": "$1",
            "service": "html5-apps-repo-rt",
            "authenticationType": "xsuaa"
        }
    ]
}

4) Manifest

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "nspace.uimodule",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.0"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "resources": "resources.json",
        "ach": "ach",
        "sourceTemplate": {
            "id": "html5moduletemplates.basicSAPUI5ApplicationProjectModule",
            "version": "1.40.12"
        },
        "dataSources": {
            "mainService": {
                "uri": "pm_service/sap/opu/odata/sap/ZBBPMODATA_SRV/",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0",
                    "localUri": "localService/metadata.xml"
                }
            }
        },
        "crossNavigation": {
            "inbounds": {
                "intent1": {
                    "signature": {
                        "parameters": {},
                        "additionalParameters": "allowed"
                    },
                    "semanticObject": "demo21",
                    "action": "display",
                    "title": "Demo 21",
                    "icon": "sap-icon://add"
                }
            }
        }
    },
    "sap.cloud": {
        "public": true,
        "service": "demo21un"
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": false,
        "rootView": {
            "viewName": "nspace.uimodule.view.general",
            "type": "XML",
            "async": true,
            "id": "general"
        },
        "dependencies": {
            "minUI5Version": "1.60.1",
            "libs": {
                "sap.ui.core": {},
                "sap.m": {},
                "sap.ui.layout": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "nspace.uimodule.i18n.i18n"
                }
            },
            "": {
                "dataSource": "mainService",
                "preload": true,
                "settings": {
                    "defaultBindingMode": "TwoWay",
                    "defaultCountMode": "Inline",
                    "refreshAfterChange": false
                }
            }
        },
        "resources": {
            "css": [
                {
                    "uri": "css/style.css"
                }
            ]
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "async": true,
                "viewPath": "nspace.uimodule.view",
                "controlAggregation": "pages",
                "controlId": "app",
                "clearControlAggregation": false
            },
            "routes": [
                {
                    "name": "Routegeneral",
                    "pattern": "Routegeneral",
                    "target": [
                        "Targetgeneral"
                    ]
                }
            ],
            "targets": {
                "Targetgeneral": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewId": "general",
                    "viewName": "general"
                }
            }
        }
    }
}

5) MTA.YAML

_schema-version: "3.2"
ID: demo21
version: 0.0.1
modules:
- name: demo21-destination-content
  type: com.sap.application.content
  requires:
  - name: demo21-destination-service
    parameters:
      content-target: true
  - name: demo21_html_repo_host
    parameters:
      service-key:
        name: demo21_html_repo_host-key
  - name: uaa_demo21
    parameters:
      service-key:
        name: uaa_demo21-key
  parameters:
    content:
      instance:
        destinations:
        - Name: demo21un_demo21_html_repo_host
          ServiceInstanceName: demo21-html5-app-host-service
          ServiceKeyName: demo21_html_repo_host-key
          sap.cloud.service: demo21un
        - Authentication: OAuth2UserTokenExchange
          Name: demo21un_uaa_demo21
          ServiceInstanceName: demo21-xsuaa-service
          ServiceKeyName: uaa_demo21-key
          sap.cloud.service: demo21un
        existing_destinations_policy: ignore
  build-parameters:
    no-source: true
- name: demo21_ui_deployer
  type: com.sap.application.content
  path: .
  requires:
  - name: demo21_html_repo_host
    parameters:
      content-target: true
  build-parameters:
    build-result: resources
    requires:
    - artifacts:
      - uimodule-content.zip
      name: uimodule
      target-path: resources/
- name: uimodule
  type: html5
  path: uimodule
  build-parameters:
    builder: custom
    commands:
    - npm run build
    supported-platforms: []
resources:
- name: demo21-destination-service
  type: org.cloudfoundry.managed-service
  parameters:
    config:
      HTML5Runtime_enabled: true
      version: 1.0.2
    service: destination
    service-name: demo21-destination-service
    service-plan: lite
- name: demo21_html_repo_host
  type: org.cloudfoundry.managed-service
  parameters:
    service: html5-apps-repo
    service-name: demo21-html5-app-host-service
    service-plan: app-host
- name: uaa_demo21
  type: org.cloudfoundry.managed-service
  parameters:
    path: ./xs-security.json
    service: xsuaa
    service-name: demo21-xsuaa-service
    service-plan: application
build-parameters:
  before-all:
  - builder: custom
    commands:
    - npm install

I really dont know what more else I could try. And the most strange thing is: If I execute the html5 app from the "HTML5 Apps runtime" in SCP CF, this works very well:

I have noted that te url is different, but thats all that I have, please help!

Thanks in advance.

[hschaefer123 · Accepted solution]

Hi Pablo,
maybe this post helps!

https://blogs.sap.com/2020/09/11/building-a-central-launchpad-using-sap-cloud-platform-launchpad-ser...

It seems, that BAS generates wrong mta and you have to replace instance: by subaccount:

Best Regards

Holger

[former_member721626 · Accepted solution]

It seems, that BAS generates wrong mta and you have to replace instance: by subaccount

This was the issue, thansk!

[AviadRivlin]

Also see here please: https://answers.sap.com/questions/13232647/scp-central-launchpad-application-error-502.html

[mariusobert]

Hi Pablo,

it's hard to say where the problem is. Everything you showed looks good to me but the problem could be as small as one line of code 😞

I'd suggest that you try to deploy this sample app (which works for sure) to check if there's a problem with the service or with your project.