Skip to Content
0

how to bind json model to sap ui5 table

Feb 21, 2017 at 06:07 AM

629

avatar image

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.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Akhilesh Upadhyay Feb 21, 2017 at 07:15 AM
0

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

Show 3 Share
10 |10000 characters needed characters left characters exceeded

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.

0

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

0

Thanks Akhilesh

0