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

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

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:



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



  • Hello there,


    After following the mentioned steps, I get this error in BAS "The selected destination references an instance that is not available. Please check your destination configuration and try again." while selecting a destination if I create a new project. If I change manifest.json and xs-app.json of existing project and later deploy the project, I get error origin ODataMetadata initial loading of metadata failed

    • Hi Ali Asad

      About the first error, have you created a destination instance or bound a destination instance to the app?

      And could you please post the github repo?



      • Hi Tri,

        the first error is appearing when I select CAP based service as destination while creating the app ( Freestyle or Fiori elements). I dont know if that destination needs to be bound to BAS somehow (it’s available at subaccount level) other on premise destination with cloud connector are already working.

        for the GiThub repo, let me prepare somethings; and will then send you the link.

        • Hi Ali,

          Please try creating a destination service and bind it to the app. Then you could try again.