Skip to Content
Technical Articles
Author's profile photo Dhanasupriya Sidagam

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!!

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Carlos Venturo
      Carlos Venturo

      Great Blog, very useful.

      Author's profile photo Dhanasupriya Sidagam
      Dhanasupriya Sidagam
      Blog Post Author

      Thank you Carlos..

      Author's profile photo Sandy Badgley
      Sandy Badgley

      Very helpful.  Thank you.