Tree Table using ES5 OData service

[Dhanasupriya]

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