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:
- Add a backend as a resource in UI5 application mta.yaml and call it from there.
- 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:
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 ?
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
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.
401 Unauthorized
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
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
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
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
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?
Thanks.
Tri
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.
Regards,
Tri
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
Hi Sreehari V Pillai,
Yes. It should be the same user accessing the service.
Regards,
Tri
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
Hi Sreehari V Pillai,
I haven't tried it locally yet.
I'll do some research and publish a blog if possible.
Regards,
Tri
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