SAPUI5 Table: Dynamic Creation based on CSV data

[saivellanki]

Hello All,

'CSV' is a simple format used to store tabular data, such as spreadsheet or database. Data in the CSV format can be imported.

Now, in our case we have the data placed in CSV format. Using sap.ui.unified.Uploader, we can upload 'CSV' document and has an ability to restrict the file type using 'setFileType' method.

Once the document is uploaded, we can convert it to JSON format by parsing through CSV data and store the JSON data into a model.

        handleUpload: function(oEvent) {

          var that = this;

          var oFile = oEvent.getParameter("files")[0];

          if (oFile && window.FileReader) {

            var reader = new FileReader();

            reader.onload = function(evt) {

              var strCSV = evt.target.result; //string in CSV

              that.csvJSON(strCSV);

            };

            reader.readAsText(oFile);

          }

        },

        csvJSON: function(csv) {

          var lines = csv.split("\n");

          var result = [];

          var headers = lines[0].split(",");

          for (var i = 1; i < lines.length; i++) {

            var obj = {};

            var currentline = lines[i].split(",");

            for (var j = 0; j < headers.length; j++) {

              obj[headers[j]] = currentline[j];

            }

            result.push(obj);

          }

          var oStringResult = JSON.stringify(result);

          var oFinalResult = JSON.parse(oStringResult.replace(/\\r/g, ""));

          //return result; //JavaScript object

          sap.ui.getCore().getModel().setProperty("/", oFinalResult);

          this.generateTable();

        }

From above code Table data is ready. Now, we will have to fetch the column name labels. To fetch key names from model, we can use following method:

          var oModel = sap.ui.getCore().getModel();

          var oModelData = oModel.getProperty("/");

          var oColumns = Object.keys(oModelData[0]);

Store the key names into different property on same model and create the template that need to be used for 'columns' aggregation.

          var oColumnNames = [];

          $.each(oColumns, function(i, value) {

            oColumnNames.push({

              Text: oColumns[i]

            });

          });

          oModel.setProperty("/columnNames", oColumnNames);

          var oTemplate = new Column({

            header: new Label({

              text: "{Text}"

            })

          });

For 'items' aggregation we can use the default binding path which has data and create the template that need to be used:

          var oItemTemplate = new ColumnListItem();

          var oTableHeaders = oTable.getColumns();

          $.each(oTableHeaders, function(j, value) {

            var oHeaderName = oTableHeaders[j].getHeader().getText();

            oItemTemplate.addCell(new Text({

              text: "{" + oHeaderName + "}"

            }));

          });

Now getting it to all together, bind 'columns' / 'items' aggregation with respective binding paths and templates.

Finally, table gets generated based on CSV data. In result, no need to re-code if you want to use different CSV documents. You can just upload and read it.

Full working demo of Dynamic Table creation based on CSV data: Plunker

Working Snip:

Thanks for reading my blog, have a great day.

Regards,

Sai Vellanki.