ODATA Binding– Aggregation Binding using Northwind Service

ODATA Binding– Aggregation Binding using Northwind Service

I found several articles/blogs for data binding. After going through SAP open portal Courses, here’s one more attempt to create a blog for data binding for beginners, highlighting key concepts.
Hope, it may help to entry level frontend developer.

Assumption : User must have developer account in hana trial.
User must have created a “SAPUI5 Application” template from New-> Project From Template.

Service URL used for binding: http://services.odata.org/V2/Northwind/Northwind.svc/ 

1. Destination in Hana Cloud Platform

   Go to destinations page of the SAP HCP Cockpit by opening the following URL and pressing the menu item “Destinations”:

https://account.hanatrial.ondemand.com/cockpit

Verify that the connection test is successful.

2. In SAP WEBIDE , implement the below code

   neo-app.json 
   
   

   It contains all project settings for SAP Web IDE and is created in the root folder of project. It is a JSON format file consisting of multiple configuration keys. The most important setting is to configure is the path where the OpenUI5 runtime is located when starting the app.

   Below “routes”, add a new configuration entry for the destination northwind. The destination itself is configured inside the SAP HANA Cloud Platform Cockpit, as shown in point1. With this configuration entry in the neo-app.json file we can use it inside your application project. Write the “orange” code in “routes” section in neo-app.json.

    

    

   {

   welcomeFile: “/webapp/index.html”,

   routes: [

   {

   …

   },

   {

   “path”: “/destinations/northwind”,

   “target”: {

   “type”: “destination”,

   “name”: “northwind”

   },

   “description”: “Northwind OData Service”

   }

   ]

   }

Create a Model Configuration in the App Descriptor. In the “sap.app” section we add the data source configuration for the OData service.

manifest.json

Application data resides in model, which is interacted by view also known as two-way binding. In SAP WEBIDE, models are defined in manifest.json.

This configuration allows the component to retrieve the technical information for this model during the start-up of the app.

** In manifest.json, in models, if defining our destination under named model, then follow the green part.If defining under unnamed model(entry with an empty key), write the blue code.

Create a Model Configuration in the App Descriptor. In the sap.app section, add the data source configuration for the OData service.

With the key northwind we specify a configuration object that allows automatic instantiation of this model. In neo-app.json, we mention path as /destinations/northwind. So /destinations/northwind references the destination that we have configured in the SAP HANA Cloud Cockpit and /V2/Northwind/Northwind.svc/ is the path to the service endpoint. In addition, we specify the type of the service (OData) and the model version (2.0)

“sap.app”: {
“_version”: “1.1.0”,
“id”: “com.binding”,
“type”: “application”,
“i18n”: “i18n/i18n.properties”,
“applicationVersion”: {
“version”: “1.0.0”
},
“dataSources”: {
“northwind”: {
“uri”: “/destinations/northwind/V2/Northwind/Northwind.svc/”,
“type”: “OData”,
“settings”: {
“odataVersion”: “2.0”
}
}
}

},

“sap.ui5”: {
“_version”: “1.1.0”,
“rootView”: {
“viewName”: “com.binding.view.App”,
“type”: “XML”
},

“models”: {
“”: {
“dataSource”: “northwind”
},
“i18n”: {
“type”: “sap.ui.model.resource.ResourceModel”,
“settings”: {
“bundleName”: “com.binding.i18n.i18n”
}
},
“invoice”: {
“dataSource”: “northwind”
}
},
“resources”: {
“css”: [{
“uri”: “css/style.css”
}]
}
}

**As mentioned above, in the models section under sap.ui5, we have an entry with an empty key (blue code), and entry with name “invoice” (green code). This is the major error committed by beginners. Based on what we have, named key or empty entry, code in view has to be modified. I used both the code, in one project. For first-time users, I would suggest, implement one-by-one. First go with blue code, and respective “View” code, and then go with green code.

The value specified in dataSources i.e. “northwind” is a reference to the data source section that we specified above.Our component will then automatically create an instance of sap.ui.model.odata.v2.ODataModel according to the settings we specified above, and make it available as the default model on the component.

View

//In view, for unnamed model(empty key) write the below code

<List headerText=”Product Details” items=”{/Products}”>
<items>
<ObjectListItem title=”{ProductName}” number=”{ProductID}” intro=”{QuantityPerUnit}”/>
</items>
</List>

//In view, for named model write the below code

<List headerText=”Company Details” items=”{invoice>/Customers}”>
<items>
<ObjectListItem title=”{invoice>CompanyName}”/>
</items>
</List>

You should now see a list of products / list of customers fetched from the northwind backend system in your app!!!

I hope this will help the beginners with OData binding.

Any suggestions are welcome.