how to bind json model to sap ui5 table

[Former Member]

Hi Tech Guru's,

I have below code.

xml view

<tb:Table

id="attachmentsTable"

noDataText="No Attachments"

rows ="{/attModel}"

visibleRowCount = "10"

selectionMode = "None"

enableSelectAll="false"

>

<tb:columns>

<tb:Column width="12em">

<Label text="File Name" maxLines="0"/>

<tb:template>

<Text text="{FileName}" />

</tb:template>

</tb:Column>

<tb:Column hAlign="Right">

<Label text="Size" maxLines="0"/>

<tb:template>

<Text text="{FileSize}" />

</tb:template>

</tb:Column>

<tb:Column hAlign="Center" demandPopin="true">

<Label text="" maxLines="0"/>

<tb:template>

<Buttonicon="sap-icon://delete"iclass="rounded"press="onIssueUpdateClick"/>

</tb:template>

</tb:Column>

</tb:columns>

</tb:Table>

In controller file

var data = {

"FileName": fileName,

"FileSize": fileSize

};

attModel.setData(data);

this.getView().setModel(attModel);

viewObject.byId("attachmentsTable").bindRows("/attModel");

with this code, rows are not getting displayed in table, is there any problem in my coding?

As we have multiple model, tried put alias for the model as below, but that also not helpful.

this.getView().setModel(attModel,"MyModel");

viewObject.byId("attachmentsTable").bindRows("/MyModel");

Please help me in populating rows to UI5 table.

Thanks,

Sudhakar.

[former_member227918 · Accepted solution]

Hi,

first remove rows property from table definition:

rows ="{/attModel}"

and your data should be as below:

var data = [{ //data should enclosed with [ ]
    "FileName": "fileName", //keep values in side " "
    "FileSize": "fileSize"
}];

binding code is as below:

var attModel = new sap.ui.model.json.JSONModel()
attModel.setData(data);
this.getView().setModel(attModel);
this.getView().byId("attachmentsTable").bindRows("/");

this will work!

Thanks,

Akhilesh

[Former Member · Accepted solution]

Thank you Akhilesh, it solved my issue, but each time when I am uploading a file, it should add new row by keeping the existing row as it is,

at present it is always inserting in first row in the table by deleting old row.

binding json model to table is presented in handleUploadPress function which will called when the user clicks on Upload button of FileUploader component.

Thanks in advance,

Sudhakar.

[former_member227918 · Accepted solution]

In order to keep existing row, you need to keep old data in your "data" variable, meaning that, take a global variable for data and on upload click just add(push) new record to data and automatically table will be updated with the new row if twoway binding is there or after added new record to data rebind the table with updated data. something like below:

mainData=[{FileName": "fileName", "FileSize": "fileSize"}];

on upload click :

var newRowRecord={"FileName": "fileName1", "FileSize": "fileSize1"};
mainData.push(newRowRecord);

Hope this helps.

-Akhilesh

[Former Member · Accepted solution]

Thanks Akhilesh