Tree Table in SAPUI5

Click here and follow my SAP UI5/FIORI snippets and information Page

I have done Tree Table example and binded it with json data. I have shown icon for parent items(If parent items have child then only icon would show). If you click on parent Items then child would display under the parent.I have also shown below view part,controller part,json part and index part of the application.Go through it and please let me know in case of any issue/doubt.

Note:    

If you want to write formatter in controller part then see below snippet,which is written in blue color.

Application Structure

View Part

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

controllerName="treetable.S1" xmlns:html="http://www.w3.org/1999/xhtml" 

xmlns:vikas="sap.ui.layout.form" xmlns:singh="sap.ui.layout">

<Page title="Tree Table">

<content>

<singh:Grid defaultSpan="L12 M12 S12">

<Table id="Tab_Id">

<columns>

<Column>

<Text text ="Product"></Text>

</Column>

<Column>

<Text text ="Price"></Text>

</Column>

<Column>

<Text text ="Brand"></Text>

</Column>

<Column>

<Text text ="Offer"></Text>

</Column>

</columns>

</Table>

</singh:Grid>

</content>

</Page>

</core:View>

Controller Part

sap.ui.controller("treetable.S1", {

onInit : function() {

var that=this;

that.json = new sap.ui.model.json.JSONModel();

that.json.loadData("model/productList.json", null, false);

var tableId = this.byId("Tab_Id");

tableId.setModel(that.json);

// Calling method.................

this.tableBindingMethod(tableId);

},

// Called method...............

tableBindingMethod : function(tableId) {

var template = new sap.m.ColumnListItem({

cells : [ new sap.m.HBox({

"items" : [ new sap.m.VBox({

visible : {

parts : [ {

path : 'visibility'

} ],

formatter : function(val) {

if (val === 'CP') {

return true;

} else {

return false;

}

}

},

"items" : [ new sap.ui.core.Icon({

src : {parts:[{path:'Ind'}],formatter:function(val3){

if(val3==="X")

{

return "sap-icon://media-play";

}

else if(val3==="Y")

{

return "sap-icon://down";

}

}

},

press : [ this.pressOnParent, this ]

}) ]

}), new sap.m.VBox({

width : {

parts : [ {

path : 'Ind'

} ],

formatter : function(val1) {

if (val1 === 'X') {

return "15px";

} 

else if(val1==="c")

{

return "70px";

}

else {

return "28px";

}

}

},

"items" : [ new sap.m.Label({}) ]

}), new sap.m.VBox({

"items" : [ new sap.m.Text({

text : "{product}"

}) ]

}) ]

}), new sap.m.Text({

text : "{price}"

}), new sap.m.Text({

text : "{brand}"

}), new sap.m.Text({

text : "{offer}"

})

]

});

tableId.bindAggregation("items", "/pro", template);

},

// onPress of Icon, this will fire...............

pressOnParent:function(OEvent)

{

var that=this;

var tableId = this.byId("Tab_Id");

var index=tableId.indexOfItem(OEvent.getSource().getParent().getParent().getParent());

var index1=index;

var childOBJ=that.json.getData().pro[index].child;

var TableModel=tableId.getModel();

var indicator=that.json.getData().pro[index1].Ind;

if(indicator==="X")

{

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

{

// Add Child Items to Existing Table Items.......

TableModel.getData().pro.splice(++index,0,childOBJ[i])

}

that.json.getData().pro[index1].Ind="Y";

}

else if(indicator==="Y")

{

// Delete Child Items from Existing Table Items......

TableModel.getData().pro.splice(index+1,childOBJ.length);

that.json.getData().pro[index1].Ind="X";

}

//TableModel.refresh()......;

         //OR

TableModel.updateBindings();

}

});

productList.json

{"pro":[

{

"product":"virtual on7",

"price":"10,000",

"brand":"samsung",

"offer":"get 20% off,if you buy by credict card",

"visibility":"CP",

"Ind":"X",

"child":[

{

"product":"Charger",

"price":"",

"brand":"",

"offer":"",

"Ind":"c"

},

{

"product":"earphone",

"price":"",

"brand":"",

"offer":"",

"Ind":"c"

}

]

},

{

"product":"virtual node 7",

"price":"11,000",

"brand":"Nokia",

"offer":"get 10% off,if you buy by credict card",

"visibility":"",

"Ind":""

},

{

"product":"virtual on8",

"price":"10,400",

"brand":"samsung",

"offer":"get 27% off,if you buy by credict card",

"visibility":"CP",

"Ind":"X",

"child":[

{

"product":"Charger+Box",

"price":"",

"brand":"",

"offer":"",

"Ind":"c"

},

{

"product":"earphone",

"price":"",

"brand":"",

"offer":"",

"Ind":"c"

},

{

"product":"SIM",

"price":"",

"brand":"",

"offer":"",

"Ind":"c"

}

]

},

{

"product":"virtual on9",

"price":"12,000",

"brand":"samsung",

"offer":"get 10% off,if you buy by credict card",

"visibility":"",

"Ind":""

}]}

index.html

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

<script src="resources/sap-ui-core.js"

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m"

data-sap-ui-theme="sap_bluecrystal">

</script>

<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>

sap.ui.localResources("treetable");

var app = new sap.m.App({initialPage:"idS11"});

var page = sap.ui.view({id:"idS11", viewName:"treetable.S1", type:sap.ui.core.mvc.ViewType.XML});

app.addPage(page);

app.placeAt("content");

</script>

</script>

</head>

<body class="sapUiBody" role="application">

<div id="content"></div>

</body>

</html>

Result

table with child Items.