How to integrate UI5 with SAP CAP application as the destination at SAP CF subaccount level

Recently I had a requirement to integrate a freestyle UI5 application with the back end which is an SAP CAP application. These two applications are developed in separate MTA projects.

Basically I have found two ways to do it:

1. Add a backend as a resource in UI5 application mta.yaml and call it from there.
2. Create a destination in SAP CF subaccount level and point to the SAP CAP application route.

Here in this blog, I’m using the second approach which I find easier to understand. And another reason is we have a team working on the CAP app and a team working on the UI5, so we want to managed them independently. Also, both apps are complex.

Firstly, I need to create a destination at SAP CF subaccount level.

• URL: The url of SAP CAP application service instance
• Client ID and client secret: I get it from the “credentials” section of the xsuaa instance bound to the App Router of the SAP CAP application
• Token Service URL: This is the oAuth endpoint which also read from the Environment Variables and append /oauth/token to the endpoint. So the complete url is https://subaccount.authentication.eu10.hana.ondemand.com/oauth/token

The last step is to add the destination MyAPI to xs-app.json in UI5 application.

{
    "welcomeFile": "/test/flpSandbox.html",
    "authenticationMethod": "route",
    "logout": {
        "logoutEndpoint": "/do/logout"
    },
    "routes": [
        {
            "source": "^/MyAPI/odata/v4/(.*)$",
            "target": "/odata/v4/$1",
            "authenticationType": "xsuaa",
            "destination": "MyAPI",
            "csrfProtection": false
        },
        {
            "source": "^(.*)$",
            "target": "$1",
            "service": "html5-apps-repo-rt",
            "authenticationType": "xsuaa"
        }
    ]
}

More details about the property source, target, etc, please check this blog https://blogs.sap.com/2020/04/03/sap-application-router/

Then in the UI5 app, for example in manifest.json, I add the OData model with the uri

"dataSources": {
    "products": {
	"uri": "/MyAPI/odata/v4/Products",
	"type": "OData"
}

It is now able to access the SAP CAP application.

Link to demo github: https://github.com/equilibrium999/UI5_CAP_Integration_Demo.git

Rerefences:

https://blogs.sap.com/2019/06/26/sap-cloud-platform-backend-service-tutorial-28-scenario-approuternodetokenexchangeapi/

https://answers.sap.com/questions/12917274/cloud-foundry-portal-html5-apps-repo-authorization.html?childToView=13089222#comment-13089222

https://help.sap.com/viewer/cca91383641e40ffbe03bdc78f00f681/Cloud/en-US/39d42654093e4f8db20398a06f7eab2b.html

https://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/Cloud/en-US/3cc788ebc00e40a091505c6b3fa485e7.html