SAPUI5 create JSON for TreeTable / empty rows
I want to create a SAPUI TreeTable from a JSON request, currently my output looks like this (as you can see, every node contains an empty row -> I do not know where this is coming from and I do not want to have these empty rows):
My Table definition:
//Create an instance of the table control
var oTreeTable = new sap.ui.table.TreeTable({
columns: [
new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "",
}),
template :
new sap.ui.commons.TextView({
text : "{Title}",
textAlign : sap.ui.core.TextAlign.Begin,
}),
}),
//new sap.ui.table.Column({label: "Mon01", template: "Mon01"}),
//new sap.ui.table.Column({label: "Mon02", template: "Mon02"}),
//new sap.ui.table.Column({label: "Mon03", template: "Mon03"}),
//new sap.ui.table.Column({label: "Mon04", template: "Mon04"}),
],
selectionMode: sap.ui.table.SelectionMode.None,
enableColumnReordering: false,
expandFirstLevel: false,
toggleOpenState: function(oEvent) {
}
});
My getJSON and convert flat structure to parent/child structure (thanks to yaku)
$.getJSON(sServiceUrl, function (data) {
// flatten to object with string keys that can be easily referenced later
var flat = {};
for (var i = 0; i < data.d.results.length; i++) {
var key = 'id' + data.d.results[i].ID;
flat[key] = data.d.results[i];
}
// add 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]);
}
}
// here it is!
// console.log(root);
// to access the JSON via "/root" in bindRows(), could this be a problem??
var data = {
root : root,
};
console.log(data);
var oTreeModel = new sap.ui.model.json.JSONModel();
oTreeModel.setData(data);
oTreeTable.setModel(oTreeModel);
oTreeTable.bindRows({
path : '/root',
});
My Result JSON (a part of it): where I can not find why there are empty rows shown ?? Anybody knows something?
Thanks!
Edit: this is my complete JSON result (var root) (BEFORE I move it to var data = { root : root, }; which is bound to the tree table via bindRows(/root).. )
{
"d" : {
"results" : [
{
"__metadata" : {
"id" : "http://url/EntitySet('00000001')",
"uri" : "http://url/EntitySet('00000001')",
"type" : " NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "09/2014",
"Mon01" : "08/2014",
"Title" : "Parent 1",
"ID" : "00000001",
"ParentId" : "",
"ChildId" : "",
},
{
"__metadata" : {
"id" : "http://url/EntitySet('00000002')",
"uri" : "http://url/EntitySet('00000002')",
"type" : "NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "1560",
"Mon01" : "1550",
"Title" : "Parent 2",
"ID" : "00000002",
"ParentId" : "",
"ChildId" : "",
},
{
"__metadata" : {
"id" : "http://url/EntitySet('00000003')",
"uri" : "http://url/EntitySet('00000003')",
"type" : "NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "1860",
"Mon01" : "1750",
"Title" : "Child 1",
"ID" : "00000003",
"ParentId" : "00000002",
"ChildId" : "00000001",
},
{
"__metadata" : {
"id" : "http://url/EntitySet('00000004')",
"uri" : "http://url/EntitySet('00000004')",
"type" : "NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "1860",
"Mon01" : "1750",
"Title" : "Child 1_1",
"ID" : "00000004",
"ParentId" : "00000003",
"ChildId" : "00000001",
},
{
"__metadata" : {
"id" : "http://url/EntitySet('00000005')",
"uri" : "http://url/EntitySet('00000005')",
"type" : "NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "2060",
"Mon01" : "1950",
"Title" : "Child 2",
"ID" : "00000005",
"ParentId" : "00000002",
"ChildId" : "00000001",
},
{
"__metadata" : {
"id" : "http://url/EntitySet('00000006')",
"uri" : "http://url/EntitySet('00000006')",
"type" : "NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "2060",
"Mon01" : "1950",
"Title" : "Child 3",
"ID" : "00000006",
"ParentId" : "00000002",
"ChildId" : "00000001",
}
]
}
}
During trying to remove the bullet points I found that they are included in HTML, but I dont know why. If I remove this via dev-tools, the bullet point is gone...
which comes from CSS icon class...
.sapUiTableTreeIconLeaf { background-image: url(ico12_leaf.gif); }
solved it via
.sapUiTableTreeIconLeaf { background-image: none !important; }
Answer
just get rid of the __metadata, set flat[key].__metadata = "" , i guess TreeTable renderer must take it for another child.
// flatten to object with string keys that can be easily referenced later
var flat = {};
for (var i = 0; i < data.d.results.length; i++) {
var key = 'id' + data.d.results[i].ID;
flat[key] = data.d.results[i];
flat[key].__metadata = "";
}
Updated Code Snippet:
sap.ui.jsview("test.view", {
getControllerName: function() {
return "test.controller";
},
createContent: function(oController) {
var oTreeTable = new sap.ui.table.TreeTable({
columns: [
new sap.ui.table.Column({
label: "Title",
template: "Title"
}),
new sap.ui.table.Column({
label: "Mon01",
template: "Mon01"
}),
new sap.ui.table.Column({
label: "Mon02",
template: "Mon02"
}),
new sap.ui.table.Column({
label: "Mon03",
template: "Mon03"
}),
new sap.ui.table.Column({
label: "Mon04",
template: "Mon04"
}),
],
selectionMode: sap.ui.table.SelectionMode.None,
enableColumnReordering: false,
expandFirstLevel: false,
toggleOpenState: function(oEvent) {
}
});
var data = {
"d": {
"results": [{
"__metadata": {
"id": "http://url/EntitySet('00000001')",
"uri": "http://url/EntitySet('00000001')",
"type": " NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "09/2014",
"Mon01": "08/2014",
"Title": "Parent 1",
"ID": "00000001",
"ParentId": "",
"ChildId": "",
}, {
"__metadata": {
"id": "http://url/EntitySet('00000002')",
"uri": "http://url/EntitySet('00000002')",
"type": "NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "1560",
"Mon01": "1550",
"Title": "Parent 2",
"ID": "00000002",
"ParentId": "",
"ChildId": "",
}, {
"__metadata": {
"id": "http://url/EntitySet('00000003')",
"uri": "http://url/EntitySet('00000003')",
"type": "NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "1860",
"Mon01": "1750",
"Title": "Child 1",
"ID": "00000003",
"ParentId": "00000002",
"ChildId": "00000001",
}, {
"__metadata": {
"id": "http://url/EntitySet('00000004')",
"uri": "http://url/EntitySet('00000004')",
"type": "NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "1860",
"Mon01": "1750",
"Title": "Child 1_1",
"ID": "00000004",
"ParentId": "00000003",
"ChildId": "00000001",
}, {
"__metadata": {
"id": "http://url/EntitySet('00000005')",
"uri": "http://url/EntitySet('00000005')",
"type": "NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "2060",
"Mon01": "1950",
"Title": "Child 2",
"ID": "00000005",
"ParentId": "00000002",
"ChildId": "00000001",
}, {
"__metadata": {
"id": "http://url/EntitySet('00000006')",
"uri": "http://url/EntitySet('00000006')",
"type": "NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "2060",
"Mon01": "1950",
"Title": "Child 3",
"ID": "00000006",
"ParentId": "00000002",
"ChildId": "00000001",
}]
}
};
var flat = {};
for (var i = 0; i < data.d.results.length; i++) {
var key = 'id' + data.d.results[i].ID;
flat[key] = data.d.results[i];
flat[key].__metadata = "";
}
// add 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]);
}
}
// here it is!
// console.log(root);
// to access the JSON via "/root" in bindRows(), could this be a problem??
var data = {
root: root,
};
console.log(data);
var oTreeModel = new sap.ui.model.json.JSONModel();
oTreeModel.setData(data);
oTreeTable.setModel(oTreeModel);
oTreeTable.bindRows({
path: '/root',
});
return oTreeTable;
},
});
sap.ui.controller("test.controller", {
onInit: function() {
}
});
sap.ui.view({
type: sap.ui.core.mvc.ViewType.JS,
viewName: "test.view"
})
.placeAt("uiArea");<script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.viz" data-sap-ui-theme="sap_bluecrystal"></script>
<body class="sapUiBody">
<div id="uiArea"></div>
</body>