Skip to Content
Technical Articles
Author's profile photo Minh Tri Le

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

 

Assigned Tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Abdelrahman Elghanam
      Abdelrahman Elghanam

      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 ?

       

      Author's profile photo Minh Tri Le
      Minh Tri Le
      Blog Post Author

      Hi Abdelrahman Elghanam,

      Unfortunately, I didn't get this error when doing that.

      Could you please try running Build the project?

      Or could you please post your mta yaml file here?

      Thanks.

      Minh

      Author's profile photo Abdelrahman Elghanam
      Abdelrahman Elghanam

      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

      Author's profile photo Minh Tri Le
      Minh Tri Le
      Blog Post Author

      Hi Abdelrahman Elghanam,

      Could you please open a question and provide some codes?

      It's better since it's hard to guess what happened.

      Thanks.

      Tri

      Author's profile photo Pierre Dominique
      Pierre Dominique

      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

       

      Author's profile photo Minh Tri Le
      Minh Tri Le
      Blog Post Author

      Hi Pierre Dominique

      I've added my github repo.

      https://github.com/equilibrium999/UI5_CAP_Integration_Demo.git

      Regarding the error "Could not verify the provided CSRF token because your session was not found”, when did you get that?

      Regards,

      Tri

      Author's profile photo Ali Asad
      Ali Asad

      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

      Author's profile photo Minh Tri Le
      Minh Tri Le
      Blog Post Author

      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?

      Thanks.

      Tri

      Author's profile photo Ali Asad
      Ali Asad

      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.

      Author's profile photo Minh Tri Le
      Minh Tri Le
      Blog Post Author

      Hi Ali,

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

      Regards,

      Tri

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      thanks for making it simple .

      quick one ( I know this is something I must be testing ) - Does it propagate the user session to the called service ?  if user ABC is logged in to the UI app , is it same ABC user accessing the service ?

       

      Sree

      Author's profile photo Minh Tri Le
      Minh Tri Le
      Blog Post Author

      Hi Sreehari V Pillai,

      Yes. It should be the same user accessing the service.

      Regards,

      Tri

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      yes it is. I tested it as well .

      One more question - I have one MTA for the UI development. Another one is a CAPM Application which provides an odata. I created a destination , as you described and it works fine.

      how can the UI developer ( works on the MTA ) test his UI app locally? what would be his configurations in UI5.yaml ?

      I couldn't make this piece work. I was deploying and testing it each time ( and that kills me )

      Sreehari

      Author's profile photo Minh Tri Le
      Minh Tri Le
      Blog Post Author

      Hi Sreehari V Pillai,

      I haven't tried it locally yet.

      I'll do some research and publish a blog if possible.

      Regards,

      Tri

       

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      thanks mate. I will also try it from my side, if I succeed , I ll let you know here. Also following you for your updates.

       

      Sree