Consume oData V2 in UI5 Application

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

We will be following below steps-

1. oData V2 adapter is configured on CAPM App.

2. Destination configuration for oData V2 service.

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

4. Configure data source on manifest file.

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

Step 1 - oData V2 adapter is configured on CAPM App

If you are trying to consume the oData Service of CAPM on UI5 App, make sure oData adapter has been configured on CAPM app.

You can execute the below npm command in CAPM Project Terminal to enable oData V2 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/v2/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/v2/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 !!!