Consume oData V4 in UI5 Application

In this example, We will create an UI5 application and consume the oData V4 Service.

We will be following below steps-

1. Destination configuration for oData V4 service.

2. Create and configure the Destination on xs-app in UI.

3. Configure data source on manifest file.

4. Configure UI and Controller file to consume the oData Service.

Step 1 - Destination configuration for oData V4 service

Once the CAPM App is deployed, create a Destination using the CAPM App service Environment Variables.

url - use the url of capm service

Authentication - oAuth2UserTokenExchange

Client ID - xsuaa client id from CAPM Environment Variables

Client Secret - xsuaa client secret from CAPM Environment Variables

Token Service URL - xsuaa url from CAPM Environment Variables, append /oauth/token at the end of the url

Additional Properties -

sap.cloud.service - xsuaa xsapp name from CAPM Environment Variables

verificationkey - xsuaa verificationkey name from CAPM Environment Variables

xsappname - xsuaa xsappname name from CAPM Environment Variables

Create a UI5 App and on the xs-app.json file add the Destination configuration refering the below code -

source and target - configure the endpoint which is required to be used after the url of the destination.

destination - destination configured on the Subaccount.

For example in our case if -

complete CAP endpoint url is - https://trial-subaccount-productmanagement-srv.cfapps.us10.hana.ondemand.com/odata/v4/api/products/ProductDetails

on Destination, url is till - https://trial-subaccount-productmanagement-srv.cfapps.us10.hana.ondemand.com

On xs-app.json file we are using - /odata/v4/api/products

and on the Controller we will consume - /ProductDetails

In manifest.json file of your UI5 Application and under the dataSources, add a new Data source as mentioned below -

So your dataSources will look like below -

In the same manifest.json file of your UI5 Application and under the models, add a new model as mentioned below -

So the models will look like below-

In the View.xml file, add the Button clicking on which will fetch the data from oData service.

Now, configure the button pressed method on View.Controller.js file.

And it is done !!!