Skip to Content
Author's profile photo Tapesh Syawariya

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

 

Assigned tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Harshal Narkhede
      Harshal Narkhede

      Hello Tapesh,

      Nice Blog.

      It would be great if you share any demo project.

      Thanks,

      Harshal Narkhede

      Author's profile photo Imtiaz Nazeerudin Farheen - NAFF
      Imtiaz Nazeerudin Farheen - NAFF

      Hi,

      I’m also having the same query to be addressed but when trying this solution i found like my data gets exported to excel but in a single line, any help would be highly appreciated.

      Regards

      Imtiaz N

      Author's profile photo Tapesh Syawariya
      Tapesh Syawariya
      Blog Post Author

      Hello Imtiaz,

       

      Please check in function "JSONToCSVConvertor" whether rows are getting created individually or not?

      Author's profile photo Imtiaz Nazeerudin Farheen - NAFF
      Imtiaz Nazeerudin Farheen - NAFF

      Thank you so much Tapesh!!

      I found the solution for this issue, it was because while creating rows I had missed an apostrophe in the createRow function code. 🙂

      Great blog!! happy learning.. !! 😀

      Author's profile photo shanmukhasai talluri
      shanmukhasai talluri

      Helo

      Tapesh Syawariya,
      
      

      Nice Blog.

      It would be greatfull  if you share any demo project,then it will vaery helpfull to me.

      waiting for your reply hope you react

      thanks

      regards

      shanmukhasai

      Author's profile photo Ramon Lee
      Ramon Lee

      Hi Tapesh,

      Where did you get the Blob library from.