Skip to Content

Consume a Basic OData Service

test
0 %
Consume a Basic OData Service
Details

Consume a Basic OData Service

April 16, 2020
Created by
September 6, 2016
Consume a Basic OData Service within UI5 binding the service to a Table

You will learn

SAPUI5 uses data binding to bind two data sources or information sources together to keep them in sync: All changes in one source are also reflected in the other one. In this tutorial, you will consume a Basic OData Service within UI5 binding the service to a table.

Prerequisites


Step 1: Import Template Project

We have prepared a skeleton application for you with several sections that need to be completed marked To-Do.

Import this this template into web/resources folder from the following URL: https://github.com/SAP-samples/hana-xsa-opensap-hana7/raw/snippets_2.4.0/ex4/odataBasic.zip

Create a folder named odataBasic within the web/resources folder

new foldernew structure

After the import, please check to see if you have a /web/resources/common folder with a file startup.js within it. This could have been created earlier if you completed tutorial SAP HANA XS Advanced - Asynchronous Non-Blocking I/O within Node.js SAP HANA applications. If you do not have this file, you can create it now without having to perform the entire previous tutorial. Here is the source code of startup.js.

/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0, no-shadow:0*/
function onLoadSession(myJSON) {
	try {
		var result = JSON.parse(myJSON);
		if (result.session.length > 0) {
			if (result.session[0].familyName !== "") {
				return result.session[0].givenName + " " + result.session[0].familyName;
			} else {
				return result.session[0].UserName;
			}
		}
	} catch (e) {
		return "";
	}
	return "";
}

function getSessionInfo() {
	var aUrl = "/node/getSessionInfo";

	return onLoadSession(
		jQuery.ajax({
			url: aUrl,
			method: "GET",
			dataType: "json",
			async: false
		}).responseText);
}

function localShellStartup(name) {

	sap.ui.getCore().attachInit(function () {
		var ComponentContainer = new sap.ui.core.ComponentContainer({
			height: "100%"
		});
		var username = "Test User";
		// create a shell
		new sap.ui.unified.Shell({
			id: "myShell",
			icon: "/images/sap_18.png",
			headEndItems: new sap.ui.unified.ShellHeadItem({
				icon: "sap-icon://log",
				tooltip: "Logoff",
				press: function () {
					window.location.href = "/my/logout";
				}
			}),
			user: new sap.ui.unified.ShellHeadUserItem({
				image: "sap-icon://person-placeholder",
				username: username
			}),
			content: ComponentContainer
		}).placeAt("content");

		var oComponent = sap.ui.component({
			id: "comp",
			name: name,
			manifestFirst: true,
			async: true
		}).then(function (oComponent) {
			ComponentContainer.setComponent(oComponent);
		});

	});
}
Log on to answer question
Step 2: Understanding the code - fill in the `To-Dos` to create a model from a data source

So far, you have created a skeleton of an application. Just copying and pasting is no fun, so you have some pending coding to do. The objective here is to bind the xsodata service you created within the js module to a table displayed in your SAPUI5 interface. You will reuse the service businessPartners.xsodata. In order to achieve this, you need to declare this service as a data source. This is done in the manifest.json file, replacing the first //To-Do comment with the following:

"dataSources": {
			"bpService": {
				"uri": "/xsodata/businessPartners.xsodata/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0"
				}
			}
		}

Scroll down until the next //To-Do comment and add the following model:

"bpModel": {
	"dataSource": "bpService",
	"type": "sap.ui.model.odata.v2.ODataModel",
	"preload": true,
	"settings": {
		"useBatch": false,
		"json": true,
		"defaultBindingMode": "TwoWay",
		"defaultUpdateMethod": "PUT"
	}
},
Log on to answer question
Step 3: Fill in the `To-Do` in the controller

Now that you have a data source and a model exposing it, you need to bind it to the table in your view. You will first bind the table to the entity BusinessPartners and tell the SmartTable control which columns to display. You fill find the to-do in onInit method in the App.controller.js:


oTable.setModel(bpModel); oTable.setEntitySet("BusinessPartners"); oTable.setInitiallyVisibleFields("PARTNERID,COMPANYNAME,PARTNERROLE");
Log on to answer question
Step 4: Save and Run

Save the files you have modified and run the web module

Change the path in the new tab to /odataBasic:

Run the web module
Log on to answer question

Next Steps

Back to top