Page Comparison

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.

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:

Image Added

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".

Image Added

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.

Image Added

Create and Bind an OData Model

...
	/* 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);
			});
		}
	});
...

4. Odata Model im Code erstellen und an alle Views der App knüpfen
Fügen Sie folgenden Code in die init-Methode der Component.js ein:

// copied from http://www.techippo.com/2016/04/sapui5-application-consuming-odata.html
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.setModel(oModel);

// set the device model
this.setModel(models.createDeviceModel(), "device");

5. Property-Binding an Elementen der View
Die Elemente der View lassen sich nun wie gewohnt an das OData-Modell der View binden. z.B:

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

Wir haben Ihnen einmal ein WebIDE-Projekt erstellt, das die beschriebenen Schritte enthält. Sie müssen nur noch Ihre Destination anlegen und das Projekt in Ihre WebIDE importieren. Das Projekt zum Importieren hänge ich an dieses Ticket an.

Viele Grüße
Tim Schauder