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

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 configuration.Open manifest.json in code editor by double clicking.You can see ''dataSources'' node added inside sap.app section. Add below code inside models node of sap.ui5 section.The meaning is that we are setting model for the whole application.Double quotes means default model.If you have more than one OData endpoint you can add it by giving a name.When you access the model you should give the provided model name.Since this application is only having one OData endpoint we are setting it as default model.(If you have used SAPUI5 1.28 version see note for setting the model)

  "models": {
   "i18n": {
    "type": "sap.ui.model.resource.ResourceModel",
    "settings": {
     "bundleName": "ODataConsumingApp.i18n.i18n"
    }
   },
   "":{
    "dataSource":"Northwind.svc"
   }
  }

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.

<List items="{/Categories}">
   <items>
      <ObjectListItem id="masterListItem" title="{CategoryName}" intro="{Description}">
      </ObjectListItem>
   </items>
</List>

6.See our application in action.Right Click on Application->Run->Run As->Web Application.See application screenshot.

Note:If you are using SAPUI5 1.28 version open Component.js file and put below code inside init function.

var mConfig = this.getMetadata().getConfig();
 var sServiceUrl = mConfig.serviceConfig.serviceUrl;
 var sServiceUrl = mConfig.serviceConfig.serviceUrl;
 // Create and set domain model to the component
 var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, {
     json: true,
     loadMetadataAsync: true
 });
 oModel.attachMetadataFailed(function() {
     this.getEventBus().publish("Component", "MetadataFailed");
 }, this);
 this.setModel(oModel);

If you enjoyed this post, Please Share!!