Intermediate
Consume a Basic OData Service
2019-01-15
15 min.
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
- Tutorials: SAPUI5 User Interface
Step 1: Create new folder
Create a folder named odataBasic within the web/resources folder
Within this folder, create two files – one named Component.js and one named index.html. Also create a sub-folder named view and another one named controller.
Step 2: Create required files
Step 3: Create controller and view
Within the view folder, create a file called App.view.xml with the following code:
<core:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:u="sap.ui.unified" xmlns:core="sap.ui.core"
xmlns:smartTable="sap.ui.comp.smarttable" controllerName="dev.odataBasic.controller.App">
<u:Shell id="myShell" icon="/images/sap_18.png">
<u:user>
<u:ShellHeadUserItem image="sap-icon://person-placeholder" username="{config>/UserName}"/>
</u:user>
<u:content>
<smartTable:SmartTable id="bpTable" header="Business Partners List" editable="false" showRowCount="true" enableAutoBinding="true"
showFullScreenButton="true" tableType="Table">
<smartTable:layoutData>
<FlexItemData growFactor="1" baseSize="0%"/>
</smartTable:layoutData>
</smartTable:SmartTable>
</u:content>
</u:Shell>
</core:View>
Within the controller folder, create a file called App.controller.js and add the following code:
/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0, no-undef: 0*/
//To use a javascript controller its name must end with .controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/routing/History",
"sap/ui/model/json/JSONModel"
], function(Controller, History, JSONModel) {
"use strict";
return Controller.extend("dev.odataBasic.controller.App", {
onInit: function() {
this.getView().addStyleClass("sapUiSizeCompact"); // make everything inside this View appear in Compact mode
var oConfig = this.getOwnerComponent().getModel("config");
var userName = oConfig.getProperty("/UserName");
var bpModel = this.getOwnerComponent().getModel("bpModel");
var oTable = this.getView().byId("bpTable");
//To-Do Bind Model to table
},
onErrorCall: function(oError) {
if (oError.statusCode === 500 || oError.statusCode === 400 || oError.statusCode === "500" || oError.statusCode === "400") {
var errorRes = JSON.parse(oError.responseText);
if (!errorRes.error.innererror) {
sap.m.MessageBox.alert(errorRes.error.message.value);
} else {
if (!errorRes.error.innererror.message) {
sap.m.MessageBox.alert(errorRes.error.innererror.toString());
} else {
sap.m.MessageBox.alert(errorRes.error.innererror.message);
}
}
return;
} else {
sap.m.MessageBox.alert(oError.response.statusText);
return;
}
},
/**The following methods could be added to a reusable base controller
* Convenience method for accessing the router in every controller of the application.
* @public
* @returns {sap.ui.core.routing.Router} the router for this component
*/
getRouter : function () {
return this.getOwnerComponent().getRouter();
},
/**
* Convenience method for getting the view model by name in every controller of the application.
* @public
* @param {string} sName the model name
* @returns {sap.ui.model.Model} the model instance
*/
getModel : function (sName) {
return this.getView().getModel(sName);
},
/**
* Convenience method for setting the view model in every controller of the application.
* @public
* @param {sap.ui.model.Model} oModel the model instance
* @param {string} sName the model name
* @returns {sap.ui.mvc.View} the view instance
*/
setModel : function (oModel, sName) {
return this.getView().setModel(oModel, sName);
},
/**
* Event handler for navigating back.
* It there is a history entry we go one step back in the browser history
* If not, it will replace the current entry of the browser history with the master route.
* @public
*/
onNavBack : function() {
var sPreviousHash = History.getInstance().getPreviousHash();
if (sPreviousHash !== undefined) {
history.go(-1);
} else {
this.getRouter().navTo("master", {}, true);
}
}
});
});
Step 4: Understanding the code - fill in the `To-Dos` to create a model from a data source
Step 5: Fill in the `To-Do` in the controller
Step 6: Save and Run
Save the files you have modified and run the web module
Change the path in the new tab:
You will get this error:
Which you can solve in the next tutorial. You will then see the model based on the hardcoded columns.
