SAPUI5 Application Consuming OData service with SAP WEB IDE PART-3

We will add northwind OData service which was configured inSAPUI5 Application Consuming OData service with SAP WEB IDE PART-1of this tutorial to our application. We already created our app in SAPUI5 Application Consuming OData service with SAP WEB IDE PART-2 of this tutorial.
  1. Our application is ready.But it doesnt look good.You can right click the application and select Run->Run as->Web application if you want to see the app .We will add OData service to the App.For this Right Click Application->New->OData Service. 

  2. We can see Data Connection selection dialog.Select Service URL from sources.Then Select Odata service from dropdown menu.If you dont see your service in drop down check step 1.Type in service URL and click play button.If no error occur we can see service details in right side of the service selection.Click Next. 
  3. Click Finish.Now the selected OData service is connected to our App. 
  4. Its time to do some coding.Open component.js in code editor by double clicking.Paste below code in init method after the call to the base component.This is for accessing the service url from the config and creating an OData model and setting it to application. (If you have used latest SAPUI5 Innovation version skip this step and follow steps in the Note and come back to step 5)

  5. Now we will add some code for view.Open View1.view.xml.Paste below code  inside Page's content aggregation.We are using a list and binding it to Categeries  enitityset of northwind OData service. 

  6. See our application in action.Right Click on Application->Run->Run As->Web     Application.
Note:If you are using latest SAPUI5 innovation version after adding the odata service your manifest.json file will look like this.See there is datasources node inside sap.app node.
The next step is to set OData model.For this Just add following code inside models under i18n model

If you enjoyed this post, I’d be grateful if you’d help it spread by sharing.Thank you! See you soon


Post a Comment

Powered by Blogger.