How to export data from Tree Table in UI5?

Hello Readers,

In this blog i am going to explain you, How to download a tree table data in csv file.

There are lot of methods available to export data if you are using sap.m.Table or sap.ui.table.Table, but In case of tree table you will have your model data in nested structure.

Here is am using JSON data and it is in the same structure which we can see in tree table example available in Explored.

FYI –

After implementation View/Table is looking like –

Now the Download function where we need to create data according to tree structure.

onDownload: function(oEvent) {
var jsonData = this.getView().getModel().getData().catalog.order.categories;
this.JSONToCSVConvertor(jsonData);
},

JSONToCSVConvertor: function(JSONData) {

var arrData = JSONData;
var CSV = ''; 
var row = ""; // To add Table column header in excel
var row1 = "";
var table = this.getView().byId("TreeTableBasic"); 

table.getColumns().forEach(function(column) { 
row1 += '"' + column.getLabel().getText() + '",'; 
});
CSV += row1 + '\r\n';//Row that will create Header Columns

var column = { 
"orderId": "orderId",
"orderType": "orderType",
"status": "status",
"amount": "amount",
"orderBy": "orderBy",
"orderDate": "orderDate"
};
var i, j, k;

var createRow = function(level) {

  if (level === "Parent") {
      row += '"' + arrData[i][column.orderId] + '",'; 
      CSV += row + "\r\n"; 
} else if (level === "Child") { 
      row = ","; 
      row += '"' + arrData[i].categories[j][column.orderType] + '",';
      CSV += row + "\r\n"; 
} else { 
       row = ","; 
       row += ",";
       row += '"' + arrData[i].categories[j].categories[k][column.orderDate] +
              '","' + arrData[i].categories[j].categories[k][column.amount] +
              '","' + arrData[i].categories[j].categories[k][column.orderBy] +
              '","' + arrData[i].categories[j].categories[k][column.status] +
              '",';
       CSV += row + "\r\n";
 }
};

//loop is to extract each row 
for (i = 0; i < arrData.length; i++) { 
 createRow("Parent"); 
 if (arrData[i].categories.length > 0) { 
  for (j = 0; j < arrData[i].categories.length; j++) { 
   createRow("Child"); 
   if (arrData[i].categories[j].categories.length > 0) { 
    for (k = 0; k < arrData[i].categories[j].categories.length; k++) { 
     createRow("Children"); 
    } 
   } 
  } 
 } 
}


if (CSV === '') {
 sap.m.MessageToast.show("Invalid data"); 
 return; 
}
// Generate a file name 
var fileName = "MyReport_"; 
var blob = new Blob([CSV], { 
               type: "text/csv;charset=utf-8;" 
});

if (sap.ui.Device.browser.name === "ie") { // IE 10+ 
 navigator.msSaveBlob(blob, "csvname.csv"); 
} else { 
 var uri = 'data:application/csv;charset=utf-8,' + escape(CSV); 
 var link = document.createElement("a"); 
 link.href = uri; 
 link.style = "visibility:hidden"; 
 link.download = fileName + ".csv"; 
 document.body.appendChild(link); 
 link.click(); 
 document.body.removeChild(link); 
 } 
}

Result-

Thanks,
Tapesh Syawariya