Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
ranjit_rao
Participant
18,383

Guys some good news, hopefully for many others as well. In this process of learning and playing with SAPUI5 mobile, I have silently got a way out to export the data to excel. To be frank, we can’t directly export the data to excel. It needs to be formed into a csv format and then to excel.

So, lets begin.

Go to eclipse---New SAPUI5 project<Mobile>--Give the view name as “View1” (js view).

Firstly, the Design

Paste the following code in the createContent() of  View1.view.js (Design):

createContent() of  View1.view.js

var oPage = new sap.m.Page({

                    title: "Company Details"

             });

var oButton = new sap.m.Button({

                    text: "Export",

                    press:[ oController.Export, oController ]

             });

             var oTable = new sap.m.Table({

                    id: "Countries",

                    mode: sap.m.ListMode.None,

                    columns: [ new sap.m.Column({

                       width: "1em",

                         header: new sap.m.Label({

                           text: "Name"

                           })

                    }),new sap.m.Column({

                           width: "1em",

                            header: new sap.m.Label({

                            text: "short"

                            })

                      })

                    ]

              });

             var template = new sap.m.ColumnListItem({

                   id: "first_template",

                      type: "Navigation",

                      visible: true,

                      selected: true,

                      cells: [ new sap.m.Label({

                           text: "{name}"

                    }),new sap.m.Label({

                           text: "{short}"

                      })

                   ]

              });

               oTable.bindItems("/countries", template, null, null);

               oPage.addContent(oButton);

               oPage.addContent(oTable);

              return oPage;

Now, Lets create the model which will hold the data.

For that paste the following code in the onInit() method of the controller.js file:

onInit() method of the controller.js

var data1 = {

                    "countries" : [ {

                           "name" : "India",

                           "short" : "In"

                    },
{

                           "name" : "England",

                           "short" : "En"

                    },
{

                           "name" : "Australia",

                           "short" : "Oz"

                    },
{

                           "name" : "New Zealand",

                           "short" : "Nz"

                    },
{

                           "name" : "France",

                           "short" : "Fr"

                    },
{

                           "name" : "SouthAfrica",

                           "short" : "SA"

                    },
{

                           "name" : "Germany",

                           "short" : "Gr"

                    }
]

      };

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

sap.ui.getCore().setModel(oModel);

Now the functionality which would export the data to excel.

For that paste the following method in the controller.js file

JSONToCSVConvertor

JSONToCSVConvertor : function(JSONData, ReportTitle, ShowLabel) {

         

// If JSONData is not an object then JSON.parse will parse the JSON

// string in an Object

   var arrData = typeof JSONData.countries!= 'object' ?JSON.parse(JSONData.countries) : JSONData.countries;

   var CSV = '';

   // Set Report title in first row or line

CSV+= ReportTitle + '\r\n\n';

             if (ShowLabel) {

                    var row = "";             

                    row= row.slice(0, -1);

                  CSV+= row + '\r\n';

             }

             //loop is to extract each row

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

                    var row = "";

                  row+= '"' + arrData[i].name + '","' + arrData[i].short +'",';

                  row.slice(0,row.length - 1);

                    CSV+= row + '\r\n';

             }

             if (CSV == '') {

          alert("Invalid data");

                    return;

             }

             // Generate a file name

             var fileName = "MyReport_";

           fileName+= ReportTitle.replace(/ /g, "_");

             // Initialize file format you want csv or xls

             var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

             // Now the little tricky part.

             // you can use either>> window.open(uri);

             // but this will not work in some browsers

             // or you will not get the correct file extension

             // this trick will generate a temp <a /> tag

             var link =document.createElement("a");

       link.href= uri;

             // set the visibility hidden so it will not effect on your web layout

       link.style= "visibility:hidden";

       link.download= fileName + ".csv";

// this part will append the anchor tag and remove it after automatic

  // click

             document.body.appendChild(link);

             link.click();

             document.body.removeChild(link);

       }

And the last part. In the design we added a button, now we need to invoke the above function on the click of the button.

For that past the following code in controller.js as well.

Export function in controller.js

Export : function() {

  var data= sap.ui.getCore().getModel().getData();

  this.JSONToCSVConvertor(data,"Report", true);

       }

Now our application ready for testing.  Here, we go:

Hmmmm, Not Bad!!!!!!!!!

31 Comments
Labels in this area