How to import multiple excel file to SAP UI5 Table?

[shreyashrangrej]

• I have a requirement where I declared sap.m.Table and want to import multiple excel files in it.
• I'm able to import one table and display it on the screen.
• When I try to import another table just below previous records, the table gets refreshed with new records.
• I'm unable to do two imports in one table.
• I want to keep the first records undisturbed and import new records just below that.
• Below you can find code snippets that I'm working with.

onImport: function() {
    that = this;
    if (this.fixedDialog === undefined) {
        this.fixedDialog = new sap.m.Dialog({
            title: "Choose CSV File For Upload",
            beginButton: new sap.m.Button({
                text: "Upload",
                press: function(oEvent) {
                    that.fixedDialog.close();
                }
            }),
            content: [
                new FileUploader("excelUploader")
            ],
            endButton: new sap.m.Button({
                text: "Cancel",
                press: function() {
                    that.fixedDialog.close();
                }
            })
        });
        this.getView().addDependent(this.fixedDialog);
        this.fixedDialog.attachBeforeClose(this.setDataToJsonFromExcel, this);
    }
    this.fixedDialog.open();
}

setDataToJsonFromExcel: function(oEvent) {
    var oUploader = oEvent.getSource().getContent()[0];
    var domRef = oUploader.getFocusDomRef();
    if (domRef.files.length === 0) {
        return;
    }
    var file = domRef.files[0];
    that = this;
    this.fileName = file.name;
    this.fileType = file.type;
    var reader = new FileReader();
    reader.onload = function(e) {
        var arrCSV = e.currentTarget.result.match(/[\w .]+(?=,?)/g);
        var noOfCol = 3;
        var headerRow = arrCSV.splice(0, noOfCol);
        var data = [];
        while (arrCSV.length > 0) {
            var record = {};
            var excelData = arrCSV.splice(0, noOfCol);
            for (var i = 0; i < excelData.length; i++) {
                record[headerRow[i]] = excelData[i].trim();
            }
            data.push(record);
        }
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData(data);
        var oTable = that.byId("idTable");
        oTable.setModel(oModel);
    };
    reader.readAsBinaryString(file);
    oUploader.clear();
}<br>

<content>
	<Button text="Import" press="onImport" />
	<Table id="idTable" items="{/}">
		<columns>
			<Column>
				<Label text="Name" />
			</Column>
			<Column>
				<Label text="Age" />
			</Column>
			<Column>
				<Label text="Gender" />
			</Column>
		</columns>
		<ColumnListItem>
			<cells>
				<Input value="{Name}" />
				<Input value="{Age}" />
				<Input value="{Gender}" />
			</cells>
		</ColumnListItem>
	</Table>
</content><br>

Adding First Data

Adding Second data.

Requirement: Second data to get added below first data.

As you can see table gets replaced with new data. But I want to keep my old data.

You can find the entire source code here on my Github

Thank You.

[ThorstenHoefer · Accepted solution]

Hi,

set the data array as a attribute of the class:

aData: [],  // new Class Attribute
setDataToJsonFromExcel: function(oEvent) {
    ...
    var reader = new FileReader();
    var data = this.aData;    // set reference to class Attribute
    reader.onload = function(e) {
        ...
        //var data = [];
        while (arrCSV.length > 0) {
            var record = {};
            var excelData = arrCSV.splice(0, noOfCol);
            for (var i = 0; i < excelData.length; i++) {
                record[headerRow[i]] = excelData[i].trim();
            }
            data.push(record);
        }
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData(data);
        var oTable = that.byId("idTable");
        oTable.setModel(oModel);
    };
    reader.readAsBinaryString(file);
    oUploader.clear();
}

kind regards

Thorsten

[shreyashrangrej · Accepted solution]

Hi Thorsten,

What an easy fix! Thank you so much.

Kind Regards

Shreyash