Tree Table using ES5 OData service

Hello

Here in this blog, i demonstrated Tree table using a service of ES5 demo gateway.

Service: https://sapes5.sapdevcenter.com//sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet

In Sap web ide full stack, created SAP UI5 application from sample templates available.

In this example, i have used column freeze, expand and collapse of rows.

Coded in Files: neo-app.json, component.js, manifest.json, view.xml and controller.js.

neo-app.json: bridge for servcie call. Added the below highlighted code.

component.js: less-coded

manifest.json: ES5 service

view.xml:

<mvc:View controllerName="practise.TreeTable.controller.View1" xmlns="sap.ui.table" xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m"
	xmlns:u="sap.ui.unified" xmlns:core="sap.ui.core" height="100%">
	<TreeTable id="TreeTableBasic" rows="{path:'oModel_tree>/', parameters: {arrayNames:['children']}}" selectionMode="MultiToggle"
		enableSelectAll="false" ariaLabelledBy="title" fixedColumnCount="3" enableColumnFreeze="false" rowSelectionChange="expandCollapseSelection">
		<columns>
			<Column width="12rem">
				<m:Label text="Product ID"/>
				<template>
					<m:Text text="{oModel_tree>category}" wrapping="false"/>
				</template>
			</Column>
			<Column width="8rem">
				<m:Label text="Supplier ID"/>
				<template>
					<m:Text text="{oModel_tree>SupplierID}" wrapping="false"/>
				</template>
			</Column>
			<Column width="6rem">
				<m:Label text="Currency Code"/>
				<template>
					<m:Text text="{oModel_tree>CurrencyCode}" wrapping="false"/>
				</template>
			</Column>
			<Column width="8rem">
				<m:Label text="Supplier Name"/>
				<template>
					<m:Text text="{oModel_tree>SupplierName}" wrapping="false"/>
				</template>
			</Column>
			<Column width="6rem">
				<m:Label text="Price"/>
				<template>
					<m:Text text="{oModel_tree>Price}" wrapping="false"/>
				</template>
			</Column>
			<Column width="6rem">
				<m:Label text="Width"/>
				<template>
					<m:Text text="{oModel_tree>Width}" wrapping="false"/>
				</template>
			</Column>
			<Column width="6rem">
				<m:Label text="Depth"/>
				<template>
					<m:Text text="{oModel_tree>Depth}" wrapping="false"/>
				</template>
			</Column>
			<Column width="6rem">
				<m:Label text="Height"/>
				<template>
					<m:Text text="{oModel_tree>Height}" wrapping="false"/>
				</template>
			</Column>
			<Column width="6rem">
				<m:Label text="Type Code"/>
				<template>
					<m:Text text="{oModel_tree>TypeCode}" wrapping="false"/>
				</template>
			</Column>
			<Column width="10rem">
				<m:Label text="Created At"/>
				<template>
					<m:DatePicker value="{path: 'oModel_tree>CreatedAt', type: 'sap.ui.model.type.Date', formatOptions: {style: 'medium'}}" editable="false"
						visible="{= ${oModel_tree>TypeCode}?true:false}"/>
				</template>
			</Column>
			<Column width="10rem">
				<m:Label text="Description"/>
				<template>
					<m:Text text="{oModel_tree>Description}" wrapping="false"/>
				</template>
			</Column>
			<Column width="10rem">
				<m:Label text="Measure Unit"/>
				<template>
					<m:Text text="{oModel_tree>MeasureUnit}" wrapping="false"/>
				</template>
			</Column>
		</columns>
	</TreeTable>
</mvc:View>

controller.js

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

	return Controller.extend("practise.TreeTable.controller.View1", {
		onInit: function () {
			var that = this;
			this.getOwnerComponent().getModel().read("/ProductSet", {
				success: function (oData, oResponse) {
					var oItems = oData.results;
					var oTreeTable = [];
					var oNodes = [];
					for (var i = 0; i < oItems.length; i++) {
						oNodes = {
							"category": oItems[i].Category,
							"SupplierID": oItems[i].SupplierID,
							"CurrencyCode": oItems[i].CurrencyCode,
							"SupplierName": oItems[i].SupplierName,
							"Price": oItems[i].Price,
							"Width": oItems[i].Width,
							"Depth": oItems[i].Depth,
							"Height": oItems[i].Height,
							"TypeCode": oItems[i].TypeCode,
							"CreatedAt": oItems[i].CreatedAt,
							"Description": oItems[i].Description,
							"MeasureUnit": oItems[i].MeasureUnit,
							"remItems": oItems[i],
							"children": []
						};
						oTreeTable.push({
							"category": oNodes.remItems.ProductID,
							"children": oNodes
						});
					}
					var oModel_tree = new JSONModel();
					oModel_tree.setData(oTreeTable);
					that.getView().setModel(oModel_tree, "oModel_tree");
					that.getView().getModel("oModel_tree").refresh();

				}
			});
		},
		expandCollapseSelection: function (oEvent) {
			var selectedRow = oEvent.getParameters().rowIndex;
			var tableItems = this.getView().byId("TreeTableBasic");
			if (oEvent.getSource().getProperty("selectedIndex") === -1) {
				tableItems.collapse(selectedRow);
			} else {
				tableItems.expand(selectedRow);
			}

		}
	});
});

Now my application looks this way.

Happy to receive comments and changes if any 🙂

Thank you!!