Table dynamic loading SAPUI5 / UI5

Question

I want to display a huge set of data in a SAPUI5-Table component. I used to implement these datatables with dynamically loading, which means that the table initially loaded ~50 records. After the user scrolled down far enough, the next set of 50 records were loaded into the table. This way it was possible for me to display a table of more than 160.000 entries without any performance issues.

Now I need to do the same with SAPUI5-Table. I already implemented the server side, the OData service is ready to use. I already implemented the clientside but without that dynamic loading. The page always tries to load all records out of the database.

How can i achieve this? Is there any premade way to implement this? I know that the OData service can be called with various parameters which specify the dataset it will deliver, but i dont know how to make the table to these calls while scrolling?

If you´re using sap.m.Table you can take a look at the growing properties here. Using sap.ui.table.Table the threshold property should be the right thing described here. Both of them work fine bound to an OData Model. — Tim Gerlach
about the parameters to call the odata service: you might add some filters (msdn.microsoft.com/en-us/library/hh169248(v=nav.71).aspx) to your oData-URL-Call. If I would have to implement this, I would use Paginator of Class sap.ui.table.Table and a hook "when clicking the next paginator page" I rebind the model only showing the current data set -> so your model only contains the current amount of data visible in one paginator page... your frontend stays at good performance (instead of pushing more and more data over time) — dotchuZ

Tim Gerlach Tim Gerlach · Accepted Answer · 2014-10-26T18:36:29

Generally, a table bound to an OData Model does the most of it for you.

If you´re using sap.m.Table you can take a look at the growing properties here.

An example on how to use paging with a sap.m.Table can be found in the Explored app in the List section.

Using sap.ui.table.Table the threshold property controls the fetch size and is described here. Additionally you can choose a navigationMode. It can be a Paginator as well as a Scrollbar.

A very simple example for sap.ui.table.Table looks like this:

var oModel = new sap.ui.model.odata.ODataModel("<yourURL>", true);
var oTable = new sap.ui.table.Table({
          columns : [], //set up columns as usual
          threshold : 50 //your fetch size here
});
oTable.setModel(oModel).bindRows("/<yourEntity>");

Table dynamic loading SAPUI5 / UI5

1 Answers