/
Sample OData & Aggregation Binding

Sample OData & Aggregation Binding

Owned by Tim Schauder
Last updated: Jan 21, 2019

This example shows how to bind a simple OData service to your project and how to visualize it using graphomate components. For additional information on data binding please have a look at the SAPUI5 API Reference.

For this example we are using the Northwind demo OData service.

Create Destination

Your Cloud Platform provides a proxy server that forwards requests to the desired OData Service. You need to set up a proxy server (called 'Destination') for each OData service to avoid a conflict with your Browser's Same Origin Policy. 

To create a destination go to your cockpit, select the tab "Connectivity" and open your "Destinations". Use the following parameters for the newly created destination:


Add the Service to your Project

To connect the destination to your application project simply right click on your project folder and select "New" → "OData Service".


Then select the tab "Service URL" and choose your OData destination. Insert the path to the service description and press "Test" to test your connectivity. Press "Next" to finish the wizard.


Create and Bind an OData Model

After adding the OData Service you'll find a localService folder with a metadata.xml in your project folder. Additionally - if not already done - add the graphomate tables library to your project. Now we're able to set a model for data binding purpose in our controller: 

view1.controller.js
...
	/* global _ */

	return Controller.extend("NorthwindOData.controller.xmlView1", {
		onInit: function() {
			var oModel = new sap.ui.model.odata.ODataModel("/northwind/V2/Northwind/Northwind.svc/", {
			    json: true,
			    loadMetadataAsync: true
			});
			oModel.attachMetadataFailed(function() {
			    this.getEventBus().publish("Component", "MetadataFailed");
			}, this);
			this.getView().setModel(oModel);
		},
		/**
		* Wraps the data binding input into an array for usage in graphomate table 
		* @return float[] - Array of Float Values 
		*/
		parseToArray: function() {
			return _.map(arguments, function(val){
				return parseFloat(val);
			});
		}
	});
...

We're setting the data to an ODataModel and binding the model to our view. The "parseToArray" formatter function will map any quantity of arguments to an array.


view1.view.xml
...
	<HBox justifyContent="Center" class="sapUiLargeMarginTop">
		<items>
			<tables:Table rows="{/Products}">
				<tables:rows>
					<tables:Row
						title="{ProductName}"
						dataPerColumn="{ parts:[
							{ path:'UnitsInStock' }, 
							{ path:'UnitsOnOrder' } 
						], 
						formatter: '.parseToArray' }"
						/>
				</tables:rows>
				<tables:columns>
					<tables:DataColumn
						title="Units in Stock" />
					<tables:DataColumn
						title="Units on Order" />
				</tables:columns>
			</tables:Table>
		</items>
	</HBox>
...

In the view we will make use of our previously defined formatter. The dataPerColumn will be set by our formatter function. Both properties will be merged into one array to fit the expected input of dataPerColumn for our graphomate table. With this way we also achieved the aggregation binding, so we dont have to create every row individually. 




Related content