cancel
Showing results for 
Search instead for 
Did you mean: 

Dynamically fill table with JSON Data binding

0 Kudos
1,829

I have the following functions to upload an excel file and display it in my sapui5 view table. I'm using the third party library SheetJS to achieve the upload.

When uploading a file, I get an error, that the "aggregation "/items" doesn't exist in my table". Does anybody know how I can fill the table? Maybe I have to loop through all the objects in my JSON Model?

Thank you!

onXLSXupload : function(e) {
this._import(e.getParameter("files") && e.getParameter("files")[0]);
},
_import : function(file) {
var oTable = this.getView().byId('testdata3');
if(file && window.FileReader){
var reader = new FileReader();
var result = {}, data;
var that = this;
reader.readAsBinaryString(file);
reader.onload = function(e) {
var rawLog = reader.result;
console.log(rawLog);
data = e.target.result;
var wb = XLSX.read(data, {type: 'binary'});
wb.SheetNames.forEach(function (sheetName) {
var rObjArr = XLSX.utils.sheet_to_json(wb.Sheets[sheetName]);
if (rObjArr.length > 0) {
result[sheetName] = rObjArr;
}
var output = JSON.stringify(result, 2, 2);
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({items: rObjArr});

    oTable.setModel(oModel);
    oTable.bindAggregation('/items');
});

console.log('output');
console.log(output);
};
};
},
that's how my xml structure of the table looks like:
<m:Panel header="Sheet Uploader">
       <up:FileUploader id="sheetUploader" name="myFileUpload" tooltip="Uplo           ad your file to the local server" change="onXLSXupload"></up:File           Uploader>
        <m:Table id="testdata3"/>
</m:Panel>

Accepted Solutions (0)

Answers (2)

Answers (2)

ericci
Active Contributor
0 Kudos

The error is correct. Your Table does not have an items aggregation at the moment. SAPUI5 follows the MVC pattern (Model View Controller) it means that every file handle someting specific. Model handle data and the interaction with the server, Controller handle the logic and View handle the rendering/UI.

This is my advice. Go to the Table documentation and see some examples of Tables and templates. Update your current table items aggregation bindings to bind to your JSONModel like this

<Table items="{/items}">
	<columns>
		<Column>
			<Text text="Column1" />
		</Column>
		<Column>
			<Text text="Column2" />
		</Column>
		<Column>
			<Text text="Column3" />
		</Column>
	</columns>
	<items>
		<ColumnListItem>
			<cells>
				<Text text="{Value1}" />
				<Text text="{Value2}" />
				<Text text="{Value3}" />
			</cells>
		</ColumnListItem>
	</items>
</Table>

Please note that I'm using the default model in this example, so edit it as needed by your use case.

Also note that Value1, Value2, Value3 are some dummy data that I've used. It would works if inside your JSON model you have something like this:

{
	items: [{
		Value1: "this is the first value",
		Value2: "this is the second value"
		Value3: "this is the third value"
	}, {
		Value1: "this is the first value",
		Value2: "this is the second value"
		Value3: "this is the third value"
	}, {
		Value1: "this is the first value",
		Value2: "this is the second value"
		Value3: "this is the third value"
	}]
}

In your controller you can do something like this:

// Fetch all your data 
var jsonData = fetchDataFromExcel();
var oModel = new sap.ui.model.json.JSONModel({ items: jsonData }); // Please add the sap.ui.model.json.JSONModel as a dependency and remove the full path
this.getView().setModel(oModel);


// At this point, SAPUI5 will refresh your table bindings and will shows all the items inside your table
junwu
Active Contributor
0 Kudos
oTable.bindAggregation('items',{YOU HAVE TO PROVIDE TEMPLATE HERE});
0 Kudos

But what kind of template? I don't want to preset the colum names or the table size. It should be generated by the uploaded Excel File..

junwu
Active Contributor
0 Kudos

you also dynamically generate the template.

google what template is

0 Kudos

I already googled it, but it didn't really help me on how to generate the table dynamically?

Please, I would be very thankful if you could help me out here. I've been sitting on this for hours now.

0 Kudos

So I just created a template (not sure though if it's the correct way). When now uploading a file I get the error "Aggregation "/items" does not exist in Element sap.m.Table#__xmlview0--testdata3"

Do you know why or how I can resolve it?

junwu
Active Contributor
0 Kudos

dude, no /