Skip to Content
Technical Articles

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

 

/
6 Comments
You must be Logged on to comment or reply to a post.
  • Hello Minh,

     

    Great article, but when i follow these steps as soon as i get to the “adding my destination to the routes in xs-app.json” i get the error below.

     

    “xs-app.json/routes/0: Format validation failed (Route references unknown destination “MyApi”)”

     

    Any ideas ?

     

      • Hello Minh Tri Le ,

         

        Thanks a lot for your response. Actually as soon as you shared your project above, i did some tweaks and updates to it, and now i am at a new point.

         

        You are using two ways to do this.

        1. Sharing the nodejs service across MTAs -> This got me to the point where I actually get the METADATA from NODEJS in the SAPUI5, but it fails in the retrieval of data with the below error

        401 Unauthorized

        1. Using the SAP destinations concept, and using this destination in the SAPUI5 app -> This got me to the point where I receive the below error

        status 500 – Retrieving of OAuthToken failed due to the following reason: unexpected error

         

        I tried adding the roles to a new role collection and added it to my user, but still same issue.

        Have you ever ran into this, Any ideas ?

         

        Thanks Mate

  • Thanks for sharing this but would you be able to share more details or maybe a working example? We are trying to do exactly what you describe but we are not sure everything is setup properly and we get the following error message: “Could not verify the provided CSRF token because your session was not found”.

    Pierre