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

[Former Member]

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-approuterno...

https://answers.sap.com/questions/12917274/cloud-foundry-portal-html5-apps-repo-authorization.html?c...

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

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