Question Re: Error binding in sap.ui.table Tree Table in Technology Q&A

Error binding in sap.ui.table Tree Table

renata06 — Sat, 29 Jun 2019 15:06:23 GMT

Hello all,

I am facing some issues with the binding in an sap.ui.table Tree Table. The tree structure is not displayed correctly in the table; all the nodes(both parent and children) are on the first level.

I´m specifying that I´m using an SAPUI5 Version: latest 1.66.1.

I've declared the table in the xml view like this:

<mvc:View controllerName="t.tree.controller.Worklist" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:t="sap.ui.table" xmlns:core="sap.ui.core"> <Shell id="shell">

<pages>

<Page id="page" title="{i18n>title}"> <content>

<t:TreeTable id="treeTable" selectionMode="None" enableColumnReordering="false"

rows="{ path : '/', parameters : {

countMode: 'Inline' ,

treeAnnotationProperties : {

hierarchyLevelFor : 'HierarchyLevel',

hierarchyNodeFor : 'NodeID',

hierarchyParentNodeFor : 'ParentNodeID',

hierarchyDrillStateFor : 'DrillState'} } }">

<t:columns>

<t:Column label="Societé / SIRET">

<t:template>

</t:template>

</t:Column>

JSON file declared in the controller.js:

sap.ui.define([ "./BaseController", "sap/ui/model/json/JSONModel", "../model/formatter", "sap/ui/model/Filter", "sap/ui/model/FilterOperator" ], function (BaseController, JSONModel, formatter, Filter, FilterOperator) { "use strict"; return BaseController.extend("t.tree.controller.Worklist", { formatter: formatter, /*

onInit : function () {

var oViewModel, iOriginalBusyDelay,

oTable = this.byId("table");

var data = [

{ "NodeID": 1,

"HierarchyLevel": 0,

"Description": "1",

"ParentNodeID": null,

"DrillState": "expanded" },

{ "NodeID": 2,

"HierarchyLevel": 0,

"Description": "2",

"ParentNodeID": null,

"DrillState": "expanded" },

{ "NodeID": 3,

"HierarchyLevel": 0,

"Description": "3",

"ParentNodeID": null,

"DrillState": "expanded" },

{ "NodeID": 4,

"HierarchyLevel": 1,

"Description": "1.1",

"ParentNodeID": 1,

"DrillState": "leaf" },

{ "NodeID": 5,

"HierarchyLevel": 1,

"Description": "1.2",

"ParentNodeID": 1,

"DrillState": "expanded" },

{ "NodeID": 6,

"HierarchyLevel": 2,

"Description": "1.2.1",

"ParentNodeID": 5,

"DrillState": "leaf" },

{ "NodeID": 7,

"HierarchyLevel": 2,

"Description": "1.2.2",

"ParentNodeID": 5,

"DrillState": "leaf" },

{ "NodeID": 8,

"HierarchyLevel": 1,

"Description": "2.1",

"ParentNodeID": 2,

"DrillState": "leaf" },

{ "NodeID": 9,

"HierarchyLevel": 1,

"Description": "2.2",

"ParentNodeID": 2,

"DrillState": "leaf" },

{ "NodeID": 10,

"HierarchyLevel": 1,

"Description": "2.3",

"ParentNodeID": 2,

"DrillState": "leaf" },

{ "NodeID": 11,

"HierarchyLevel": 1,

"Description": "3.1",

"ParentNodeID": 3,

"DrillState": "expanded" },

{ "NodeID": 12,

"HierarchyLevel": 2,

"Description": "3.1.1",

"ParentNodeID": 11,

"DrillState": "expanded" },

{ "NodeID": 13,

"HierarchyLevel": 3,

"Description": "3.1.1.1",

"ParentNodeID": 12,

"DrillState": "leaf" },

{ "NodeID": 14,

"HierarchyLevel": 3,

"Description": "3.1.1.2",

"ParentNodeID": 12,

"DrillState": "leaf" },

{ "NodeID": 15,

"HierarchyLevel": 3,

"Description": "3.1.1.3",

"ParentNodeID": 12,

"DrillState": "leaf" },

{ "NodeID": 16,

"HierarchyLevel": 3,

"Description": "3.1.1.4",

"ParentNodeID": 12,

"DrillState": "leaf" }];

var nodesModel = new sap.ui.model.json.JSONModel(); nodesModel.setData(data); this.getView().setModel(nodesModel); },

Thank you very much in advance,

Renata

Re: Error binding in sap.ui.table Tree Table

renata06 — Sat, 29 Jun 2019 15:13:36 GMT

controller.js
		onInit : function () {
			var oViewModel,
				iOriginalBusyDelay,
				oTable = this.byId("table");
			var data = [{
					"NodeID": 1,
					"HierarchyLevel": 0,
					"Description": "1",
					"ParentNodeID": null,
					"DrillState": "expanded"
				}, {
					"NodeID": 2,
					"HierarchyLevel": 0,
					"Description": "2",
					"ParentNodeID": null,
					"DrillState": "expanded"
				}, {
					"NodeID": 3,
					"HierarchyLevel": 0,
					"Description": "3",
					"ParentNodeID": null,
					"DrillState": "expanded"
				}, {
					"NodeID": 4,
					"HierarchyLevel": 1,
					"Description": "1.1",
					"ParentNodeID": 1,
					"DrillState": "leaf"
				}, {
					"NodeID": 5,
					"HierarchyLevel": 1,
					"Description": "1.2",
					"ParentNodeID": 1,
					"DrillState": "expanded"
				}, {
					"NodeID": 6,
					"HierarchyLevel": 2,
					"Description": "1.2.1",
					"ParentNodeID": 5,
					"DrillState": "leaf"
				}, {
					"NodeID": 7,
					"HierarchyLevel": 2,
					"Description": "1.2.2",
					"ParentNodeID": 5,
					"DrillState": "leaf"
				}, {
					"NodeID": 8,
					"HierarchyLevel": 1,
					"Description": "2.1",
					"ParentNodeID": 2,
					"DrillState": "leaf"
				}, {
					"NodeID": 9,
					"HierarchyLevel": 1,
					"Description": "2.2",
					"ParentNodeID": 2,
					"DrillState": "leaf"
				}, {
					"NodeID": 10,
					"HierarchyLevel": 1,
					"Description": "2.3",
					"ParentNodeID": 2,
					"DrillState": "leaf"
				}, {
					"NodeID": 11,
					"HierarchyLevel": 1,
					"Description": "3.1",
					"ParentNodeID": 3,
					"DrillState": "expanded"
				}, {
					"NodeID": 12,
					"HierarchyLevel": 2,
					"Description": "3.1.1",
					"ParentNodeID": 11,
					"DrillState": "expanded"
				}, {
					"NodeID": 13,
					"HierarchyLevel": 3,
					"Description": "3.1.1.1",
					"ParentNodeID": 12,
					"DrillState": "leaf"
				}, {
					"NodeID": 14,
					"HierarchyLevel": 3,
					"Description": "3.1.1.2",
					"ParentNodeID": 12,
					"DrillState": "leaf"
				}, {
					"NodeID": 15,
					"HierarchyLevel": 3,
					"Description": "3.1.1.3",
					"ParentNodeID": 12,
					"DrillState": "leaf"
				}, {
					"NodeID": 16,
					"HierarchyLevel": 3,
					"Description": "3.1.1.4",
					"ParentNodeID": 12,
					"DrillState": "leaf"
				}];
				
				var nodesModel = new sap.ui.model.json.JSONModel();
					nodesModel.setData(data);
					
					this.getView().setModel(nodesModel);
		},

xml.view:

<mvc:View controllerName="t.tree.controller.Worklist" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form" xmlns:t="sap.ui.table" xmlns:core="sap.ui.core">
<Shell id="shell">
	<App id="app">
	<pages>
	<Page id="page" title="{i18n>title}">
	<content>
	<t:TreeTable id="treeTable" selectionMode="None" enableColumnReordering="false"
		rows="{ path : '/', parameters : {countMode: 'Inline' , 
			treeAnnotationProperties : { 
				hierarchyLevelFor : 'HierarchyLevel', 
				hierarchyNodeFor : 'NodeID', 
				hierarchyParentNodeFor : 'ParentNodeID', 
				hierarchyDrillStateFor : 'DrillState'} } }">

	<t:columns>
		<t:Column label="Societé / SIRET">
			<t:template>
				<Text text="{Description}" wrapping="false"/>
			</t:template>
		</t:Column>

Re: Error binding in sap.ui.table Tree Table

renata06 — Sat, 29 Jun 2019 15:15:13 GMT

And this is how it look binded in the table

display.png

Re: Error binding in sap.ui.table Tree Table

renata06 — Sat, 29 Jun 2019 18:07:51 GMT

Hello again guys,

I will present another perspective of the issue:

The binding data it's made from an oData service:

<feed xmlns="
<id></id>
<title type="text">...</title>
<updated>2019-06-29T17:53:58Z</updated>
-<author>
<name/>
</author>
<link href=".../" rel="self" title="DSNStatutSet"/>
-<entry>
<id>...</id>
<title type="text">...(BukrsSiret='004',NodeID='1')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term="..."/>
<link href="...(BukrsSiret='004',NodeID='1')" rel="self" title="..."/>
-<content type="application/xml">
-<m:properties xmlns:m="...
<d:BukrsSiret>004</d:BukrsSiret>
<d:NodeID>1</d:NodeID>
<d:Normal>accept,green</d:Normal>
<d:ParentNodeID/>
<d:DrillState>leaf</d:DrillState>
<d:NormalLed>accept,green</d:NormalLed>
<d:HierarchyLevel>0</d:HierarchyLevel>
<d:NormalTooltip>Job lancé le 14/06/2019 à 10:00 et terminñe avec succés le 14/06/2019 à 12:00</d:NormalTooltip>
<d:Neant>accept,green</d:Neant>
<d:NeantLed>accept,green</d:NeantLed>
<d:NeantTooltip>Job lancé le 14/06/2019 à 12:02 et terminñe avec succés le 14/06/2019 à 12:32</d:NeantTooltip>
<d:Final>warning2,orange</d:Final>
<d:FinalLed/>
<d:FinalTooltip>Job lancé le 14/06/2019 à 12:35 en cours d´exectuion</d:FinalTooltip>
<d:Envoi/>
<d:EnvoiLed/>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT12H06M40S</d:Time>
<d:User>@ANTONIOM</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<id>...</id>
<title type="text">...(BukrsSiret='009',NodeID='2')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term=".../>
<link href="...(BukrsSiret='009',NodeID='2')" rel="self" title="..."/>
-<content type="application/xml">
-<m:properties .>
<d:BukrsSiret>009</d:BukrsSiret>
<d:NodeID>2</d:NodeID>
<d:Normal>notification,red</d:Normal>
<d:ParentNodeID/>
<d:DrillState>expanded</d:DrillState>
<d:NormalLed>notification,red</d:NormalLed>
<d:HierarchyLevel>0</d:HierarchyLevel>
<d:NormalTooltip>Job lancé le 13/06/2019 à 10:00 et interrompu le 13/06/2019 à 10:05</d:NormalTooltip>
<d:Neant/>
<d:NeantLed/>
<d:NeantTooltip/>
<d:Final/>
<d:FinalLed/>
<d:FinalTooltip/>
<d:Envoi/>
<d:EnvoiLed/>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT03H55M00S</d:Time>
<d:User>@ANTONIOM</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<id>...(BukrsSiret='012',NodeID='3')</id>
<title type="text">...(BukrsSiret='012',NodeID='3')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term="...
<link href="...(BukrsSiret='012',NodeID='3')" rel="self" title="DSNStatut"/>
-<content type="application/xml">
-<m:properties xmlns:m="...">
<d:BukrsSiret>012</d:BukrsSiret>
<d:NodeID>3</d:NodeID>
<d:Normal>accept,green</d:Normal>
<d:ParentNodeID/>
<d:DrillState>expanded</d:DrillState>
<d:NormalLed>accept,green</d:NormalLed>
<d:HierarchyLevel>0</d:HierarchyLevel>
<d:NormalTooltip>Job lancé le 14/06/2019 à 10:00 et terminñe avec succés le 14/06/2019 à 12:00</d:NormalTooltip>
<d:Neant>accept,green</d:Neant>
<d:NeantLed>accept,green</d:NeantLed>
<d:NeantTooltip>Job lancé le 14/06/2019 à 12:02 et terminñe avec succés le 14/06/2019 à 12:32</d:NeantTooltip>
<d:Final>accept,green</d:Final>
<d:FinalLed>notification,red</d:FinalLed>
<d:FinalTooltip>Job lancé le 14/06/2019 à 12:32 et terminñe avec succés le 14/06/2019 à 12:35</d:FinalTooltip>
<d:Envoi>accept,green</d:Envoi>
<d:EnvoiLed>notification,red</d:EnvoiLed>
<d:EnvoiTooltip>Job lancé le 14/06/2019 à 12:40 et terminñe avec succés le 14/06/2019 à 12:42</d:EnvoiTooltip>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT12H06M40S</d:Time>
<d:User>@PABLOC</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<id>...(BukrsSiret='009123456789',NodeID='4')</id>
<title type="text">...(BukrsSiret='009123456789',NodeID='4')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term="...
<link href="...(BukrsSiret='009123456789',NodeID='4')" rel="self" title="DSNStatut"/>
-<content type="application/xml">
-<m:properties xmlns:m="...">
<d:BukrsSiret>009123456789</d:BukrsSiret>
<d:NodeID>4</d:NodeID>
<d:Normal/>
<d:ParentNodeID>2</d:ParentNodeID>
<d:DrillState>leaf</d:DrillState>
<d:NormalLed>notification,red</d:NormalLed>
<d:HierarchyLevel>1</d:HierarchyLevel>
<d:NormalTooltip/>
<d:Neant/>
<d:NeantLed/>
<d:NeantTooltip/>
<d:Final/>
<d:FinalLed/>
<d:FinalTooltip/>
<d:Envoi/>
<d:EnvoiLed/>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT03H55M00S</d:Time>
<d:User>@ANTONIOM</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<id>...(BukrsSiret='009123466789',NodeID='5')</id>
<title type="text">...(BukrsSiret='009123466789',NodeID='5')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term="...
<link href="...(BukrsSiret='009123466789',NodeID='5')" rel="self" title="DSNStatut"/>
-<content type="application/xml">
-<m:properties xmlns:m="...">
<d:BukrsSiret>009123466789</d:BukrsSiret>
<d:NodeID>5</d:NodeID>
<d:Normal/>
<d:ParentNodeID>2</d:ParentNodeID>
<d:DrillState>leaf</d:DrillState>
<d:NormalLed>notification,red</d:NormalLed>
<d:HierarchyLevel>1</d:HierarchyLevel>
<d:NormalTooltip/>
<d:Neant/>
<d:NeantLed/>
<d:NeantTooltip/>
<d:Final/>
<d:FinalLed/>
<d:FinalTooltip/>
<d:Envoi/>
<d:EnvoiLed/>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT03H55M00S</d:Time>
<d:User>@ANTONIOM</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<id>...(BukrsSiret='01212346897',NodeID='6')</id>
<title type="text">...(BukrsSiret='01212346897',NodeID='6')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term="...
<link href="...(BukrsSiret='01212346897',NodeID='6')" rel="self" title="..."/>
-<content type="application/xml">
-<m:properties xmlns:m="...
<d:BukrsSiret>01212346897</d:BukrsSiret>
<d:NodeID>6</d:NodeID>
<d:Normal/>
<d:ParentNodeID>3</d:ParentNodeID>
<d:DrillState>leaf</d:DrillState>
<d:NormalLed/>
<d:HierarchyLevel>1</d:HierarchyLevel>
<d:NormalTooltip/>
<d:Neant/>
<d:NeantLed/>
<d:NeantTooltip/>
<d:Final/>
<d:FinalLed>notification,red</d:FinalLed>
<d:FinalTooltip/>
<d:Envoi/>
<d:EnvoiLed/>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT12H06M40S</d:Time>
<d:User>@PABLOC</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<title type="text">...(BukrsSiret='01212346899',NodeID='7')</title>
<updated>2019-06-29T17:53:58Z</updated>


<link href="...(BukrsSiret='01212346899',NodeID='7')" rel="self" title="..."/>
-<content type="application/xml">
-<m:properties xmlns:m="
<d:BukrsSiret>01212346899</d:BukrsSiret>
<d:NodeID>7</d:NodeID>
<d:Normal/>
<d:ParentNodeID>3</d:ParentNodeID>
<d:DrillState>leaf</d:DrillState>
<d:NormalLed/>
<d:HierarchyLevel>1</d:HierarchyLevel>
<d:NormalTooltip/>
<d:Neant/>
<d:NeantLed/>
<d:NeantTooltip/>
<d:Final/>
<d:FinalLed/>
<d:FinalTooltip/>
<d:Envoi/>
<d:EnvoiLed>notification,red</d:EnvoiLed>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT12H06M40S</d:Time>
<d:User>@PABLOC</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
</feed>

I found an information, I don't know if this could be the cause...

If the oData service is not supporting the query option $inlinecount=allpages, then this could affect the parent-child structure from the sap.ui.table Tree Table?

As I have defined in the XML view, the tree table's countMode property is "Inline", so if the oData service does not have the property inlinecount, this could be the casue?

<t:TreeTable id="treeTable" selectionMode="None" enableColumnReordering="false"
		rows="{ path : '/', parameters : {countMode: 'Inline' ,

odata.png

Thank you in advance,

Renata

Re: Error binding in sap.ui.table Tree Table

renata06 — Sun, 30 Jun 2019 15:32:10 GMT

Hello again,

Any news here?

Thanks,

Renata

Re: Error binding in sap.ui.table Tree Table

renata06 — Mon, 01 Jul 2019 08:05:18 GMT

Hello,

Good news!!!

Found the solution for this problem by inserting those 3 properties:

useServersideApplicationFilters: false, 
operationMode:'Client', 
autoExpandMode:'Bundled',

t:TreeTable id="treeTable" selectionMode="None" enableColumnReordering="false" 
	rows="{ path : '/DSNStatutSet', 
		parameters : {
			useServersideApplicationFilters: false, 
			operationMode:'Client', 
			autoExpandMode:'Bundled',
			countMode: 'Inline',
		treeAnnotationProperties : { 
			hierarchyLevelFor : 'HierarchyLevel', 
			hierarchyNodeFor : 'NodeID', 
			hierarchyParentNodeFor : 'ParentNodeID', 
			hierarchyDrillStateFor : 'DrillState'} } }">

Good bye!

Renata

Re: Error binding in sap.ui.table Tree Table

Former Member — Thu, 16 Jan 2020 09:40:39 GMT

Hello,

You can try like below code.

Because I was having same flat structure to form a treetable.

CONTROLLER:-

in your Success method write like

success: function (oData) {

var data = oData.QuestionTree.results;

var flat = {};

for (var i = 0; i < data.length; i++) {

var key = 'id' + data[i].Id;

flat[key] = data[i];

flat[key].__metadata = "";

}

// child container array to each node

for (var i in flat) {

flat[i].children = []; // add children container

}

// populate the child container arrays

for (var i in flat) {

var parentkey = 'id' + flat[i].ParentId;

if (flat[parentkey]) {

flat[parentkey].children.push(flat[i]);

}

// find the root nodes (no parent found) and create the hierarchy tree from them

var root = [];

for (var i in flat) {

var parentkey = 'id' + flat[i].ParentId;

if (!flat[parentkey]) {

root.push(flat[i]);

}

var oJsonModel = new sap.ui.model.json.JSONModel();

oJsonModel.setData(root);

treeTable.setModel(oJsonModel);

treeTable.bindRows({

path: "/",

parameters: {

arrayNames: ['children'],

numberOfExpandedLevels: length

}

});

}

VIEW:-

<t:TreeTable id="treeTable" selectionMode="MultiToggle" enableSelectAll="false" ariaLabelledBy="title" visibleRowCountMode="Auto" collapseRecursive="false">

<t:columns>

<t:Column width="20%">

<m:Label text="Description"/>

<t:template>

<m:Text text="{Title}"/>

</t:template>

</t:Column>

<t:Column width="10%">

<m:Label text="DC"/>

<t:template>

<m:Text text="{DiagnoseCode}"/>

</t:template>

</t:Column>

</t:columns>

</t:TreeTable>

Thanks

Re: Error binding in sap.ui.table Tree Table

former_member435529 — Mon, 23 Aug 2021 20:47:26 GMT

Hi Renata,

How did you find these 3 properties above?.

Thanks,

Javier