Table UI performance

[iwan_santoso4]

Hi,

Do you find any performance issue with table UI control? I was displaying 1,486, 14,860, 29,720 and 148,600 records. Please consider the following code:

var pricemodel = new sap.ui.model.odata.ODataModel(url_price, false);

oTable1.setModel(pricemodel);

oTable1.bindRows("/lt_price_mat_r");

var iNumberofRows = oTable1.getBinding("rows").iLength;

oTable1.setTitle("Price Details : Total Records = " + iNumberofRows );

The time it takes from the title change to the records displayed in Table UI controls is 5 secs, 18 secs, 33 seconds, and google chrome time out 2 min 38 secs respectively. As you can see the time increase significantly correspond to the number of records(rows) to be displayed.

This sounds like Table UI control performance issue, unless I am missing something.

Has anyone experience this and what's the rule of thumb to display large amount of records using SAPUI5?

Thanks,

Iwan

[konstantin_anikeev · Accepted solution]

Hi Iwan,

I think, the main issue is th issue for you browser to built a DOM for 1000+ items.

I have the same problems building Lists for sap.m with more than 50+ items...

Mobile processors are not so fast

SAP usually implements a restriction to 500 results for search helps to boost performance - user must specify parameters to restrict a number of selected rows.

Unlike to WebDynpro, where every new part of selected data are transported from the server to Browser, in SAPUI5 You receive all the data and map them to DOM.

First question, of course, what for do You need 1000+ rows to display to the user.

Best Regards

Konstantin

[iwan_santoso4 · Accepted solution]

Thanks Konstantin,

That's what I worried about. Unfortunately yes. The solution is to allow a customer to look their pricing catalog and a customer may have 10k-30k material associated with it.

Maybe I have to apply some filter or manual paging so it display in reasonable run time. If you have any other idea, please let me know.

- Iwan

[AndreasKunz · Accepted solution]

Hi Iwan and Konstantin,

the sap.ui.table.Table control does NOT render all the DOM for all items. Only the visible items are present in DOM.

And with the ODataModel paging is supported, so no more than the 20 or so items to display are even sent to the browser.

Using this combination, the Table should be able to handle a very huge number of items.

And in fact I just used the Table to browse through the 160050 items from the public Netflix database without any rendering delay:

Displaying the Table takes about a second, filling in the data asynchronously after the data has been sent by netflix another second.

You can find the code here:

http://jsbin.com/anodet/3/edit

But note: you need to overcome the cross-domain barrier to actually get data.

You could check in your Chrome development tools how much data is actually transferred in your slow example.

The sap.m.List indeed currently renders ALL items to the DOM. So currently the mobile List should be used with some custom paging solution when handling big amounts of data.

But this is being worked on.

Regards

Andreas

[iwan_santoso4 · Accepted solution]

Hi Andreas,

Thanks for the sample. Unfortunately, the connection from my client's office is blocking anything to netflix. I'll take a look later when I'm back at my hotel.

From the sample code, I thought I perform the same steps as yours. My understanding is exaclty what you explain i.e. ODataModel support paging and Table UI Control handle paging automatically i.e. we do not need to handle programmatically. Which I think what your sample shown and I used the same approach.

However, in my result, the is quite a big lag when displaying the entry. I'll keep tweaking and if you think of something, please do let me know.

Thanks,

Iwan

[iwan_santoso4 · Accepted solution]

Andreas,

Another observation: Is it possible this is caused by the web service itself? I exposed an RFC from ECC using gateway. When I use $top query, it doesn't seem to work. Maybe that's why in my case the paging doesn't seem to make any different.

When I did the netflix, $top query works.

What do you think?

Thanks,

Iwan