Implemention of OData queries in SAP UI5 app

Heylo All

Here is a featherweight blog on how we can consume odata queries in sap ui5 app. I just used Northwind Service for my trial..

Below are the query operations i have worked on.

Changes brought out in SAP UI5 app are:

neo-app.json:

manifest.json:

controller.js:

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator",
	"sap/ui/model/json/JSONModel"
], function (Controller, Filter, FilterOperator, JSONModel) {
	"use strict";

	return Controller.extend("com.ZODATA_QUERING.controller.View1", {
		onInit: function () {
			var that = this;

			//Filter
			this.getOwnerComponent().getModel().read("/Products", {
				filters: [
					new Filter("ProductID", FilterOperator.EQ, 1)
				],
				success: function (oData) {
					var productModel = new JSONModel(oData);
					that.getView().setModel(productModel, "productModel");
					that.getView().getModel("productModel").refresh();
				}
			});
			//OrderBy
			this.getOwnerComponent().getModel().read("/Customers", {
				urlParameters: {
					$orderby: "Country"
				},
				success: function (oData) {
					var customerModel = new JSONModel(oData);
					that.getView().setModel(customerModel, "customerModel");
					that.getView().getModel("customerModel").refresh();
				}
			});
			//Select 
			this.getOwnerComponent().getModel().read("/Orders", {
				urlParameters: {
					$select: "OrderID,CustomerID,Freight"
				},
				success: function (oData) {
					var orderModel = new JSONModel(oData);
					that.getView().setModel(orderModel, "orderModel");
					that.getView().getModel("orderModel").refresh();
				}
			});
			//Top & Skip
			this.getOwnerComponent().getModel().read("/Regions", {
				urlParameters: {
					$skip: "2",
					$top: "1"
				},
				success: function (oData) {
					var regionModel = new JSONModel(oData);
					that.getView().setModel(regionModel, "regionModel");
					that.getView().getModel("regionModel").refresh();
				}
			});
			//Expand
			this.getOwnerComponent().getModel().read("/Customers", {
				urlParameters: {
					$expand: "Orders"
				},
				success: function (oData) {
					var expandModel = new JSONModel(oData);
					that.getView().setModel(expandModel, "expandModel");
					that.getView().getModel("expandModel").refresh();
				}
			});
			//Count
			this.getOwnerComponent().getModel().read("/Orders", {
				urlParameters: {
					$count: true
				},
				success: function (oData) {
					var countModel = new JSONModel(oData);
					that.getView().setModel(countModel, "countModel");
					that.getView().byId("titleCount").setTitle(that.getView().getModel("countModel").getData().results.length);
					that.getView().getModel("countModel").refresh();
				}
			});
			//All
			this.getOwnerComponent().getModel().read("/Suppliers", {
				filters: [
					new Filter("SupplierID", FilterOperator.EQ, 1)
				],
				urlParameters: {
					$expand: "Products",
					$top: "1",
					$orderby: "CompanyName",
					$select: "ContactName"

				},
				success: function (oData) {
					var allModel = new JSONModel(oData);
					that.getView().setModel(allModel, "allModel");
					that.getView().getModel("allModel").refresh();
				}
			});
		}
	});
});

view.xml:

<mvc:View controllerName="com.ZODATA_QUERING.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="OData Querying">
					<content>
						<List headerText="Filter" items="{productModel>/results}">
							<StandardListItem title="{productModel>ProductName}" info="{productModel>QuantityPerUnit}" description="{productModel>UnitPrice}"/>
						</List>
						<List headerText="Order By" items="{customerModel>/results}">
							<StandardListItem title="{customerModel>CompanyName}" info="{customerModel>ContactName}" description="{customerModel>PostalCode}"/>
						</List>
						<List headerText="Select" items="{orderModel>/results}">
							<StandardListItem title="{orderModel>OrderID}" info="{orderModel>CustomerID}" description="{orderModel>Freight}"/>
						</List>
						<List headerText="Top and Skip" items="{regionModel>/results}">
							<StandardListItem title="{regionModel>RegionDescription}" info="{regionModel>RegionID}"/>
						</List>
						<List headerText="Expand" items="{expandModel>/results}">
							<StandardListItem title="{expandModel>CustomerID}" info="{expandModel>CompanyName}" description="{expandModel>Phone}"/>
						</List>
						<List headerText="Count">
							<StandardListItem title="" id="titleCount"/>
						</List>
						<List headerText="All Query combinations" items="{allModel>/results}">
							<StandardListItem title="{allModel>ContactName}"/>
						</List>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

Output:

filter: https://services.odata.org/V2/Northwind/Northwind.svc/Products?$filter=ProductID eq 1

orderby: https://services.odata.org/V2/Northwind/Northwind.svc/Customers?$orderby=Country

select: https://services.odata.org/V2/Northwind/Northwind.svc/Orders$select=OrderID,CustomerID,Freight

top & skip: https://services.odata.org/V2/Northwind/Northwind.svc/Regions?$skip=2&Stop=1

expand: https://services.odata.org/V2/Northwind/Northwind.svc/Customers?$expand=Orders

count: https://services.odata.org/V2/Northwind/Northwind.svc/Orders/$count

Query Combinations: https://services.odata.org/V2/Northwind/Northwind.svc/Suppliers?$expand=Products&$filter=SupplierID eq 1&$top=1&$orderby=CompanyName&$select=ContactName

Fillany manifested queries available for OData/UI5.

Hit the comments for any corrections.

Thank you 🙂

BR//Dhanasupriya Sidagam