Technical Articles
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!!
Great Blog, very useful.
Thank you Carlos..
Very helpful. Thank you.