Question Re: Load huge data in Technology Q&A

Load huge data

Former Member — Sun, 21 Jan 2024 21:35:41 GMT

Hello everybody,

I have a server query with 70,000 records. This takes about 6 seconds. This data I insert into a m.Table.

My question is now, if I only want to display the first 100 records and only by scrolling another 100, I still have to load the complete data set (70,000) before? Or is it possible to query the files from the server only when scrolling?

Best regards

Yannick

Re: Load huge data

junwu — Thu, 02 Feb 2017 17:26:51 GMT

https://help.sap.com/saphelp_nw75/helpdata/en/91/64ba7047b74a25a19baf9c5bb986ae/content.htm

Re: Load huge data

Former Member — Fri, 03 Feb 2017 11:34:48 GMT

Thank you! I have never worked with oData, so I still have some problems.

So I load all the data from the server. What do I have to do? I guess I need to change something in the XML view.

<List
     id="test"
     items ="{
         path: 'employees>/'}"
     headerText="Employees"
     growing="true"
     growingThreshold="4"
     growingScrollToLoad="true">

     <StandardListItem
         title="{employees>USERID}"
     />
</List>

      
onInit : function() {
      var oModel = new sap.ui.model.odata.ODataModel("EmployeeODataService.xsodata/", true);
      var jsonModel = new sap.ui.model.json.JSONModel();
      oModel.read("/Employee",null,null,true,function(oData,response){
             jsonModel.setData(oData.results)
      })
      this.getView().setModel(jsonModel, "employees");
}

Re: Load huge data

Former Member — Fri, 03 Feb 2017 13:43:04 GMT

We could use $top & $skip approach.

In onInit, we could fetch only the top 5 records and populate the table

onInit: function () {
   var oModel = new sap.ui.model.odata.v2.ODataModel("EmployeeODataService.xsodata/", true);
    oModel.read("/Employee?$top=5", null,null,true, function(oData){
        var jsonModel = new sap.ui.model.json.JSONModel();
        jsonModel.setData(oData);
        this.getView().setModel(jsonModel, "employees");
    }.bind(this));
}

Store the value of total rows so far in a variable (eg: fetchedRecords)
Rather than growing=true, Place a button at the footer to fetch more records & onPress call the function to fetch the next set and append that to the model

var oModel = sap.ui.getCore().getModel();
oModel.read("/Employee?$top=5&skip="+fetchedRecords, null,null,true, function(oData){
    var oTableModel = this.getView().getModel("employees"); //Get your table model
    var aTableData = oTableModel.getProperty("/modelData/data"); // Get entries
    aTableData.push.apply(aTableData, aData); // Add more entries
    oTableModel.setProperty("/modelData/data", aTableData); // // Update model
}.bind(this));

Note: I haven't tested this approach. I have seen people using $top & $skip approach in paginations. However, I feel that we can use this for growing table as well.

Re: Load huge data

Ryan-Crosby — Fri, 03 Feb 2017 14:26:09 GMT

A user is going to spend time scrolling through 70,000 records? I think they should get a medal for patience. My best suggestion would be to review the business process instead of trying to handle it in code.

Re: Load huge data

Former Member — Sat, 04 Feb 2017 12:03:13 GMT

Thank you very much! I've changed it to this:

onInit : function() {
    var oModel = new sap.ui.model.odata.ODataModel("EmployeeODataService.xsodata/", true);
    var jsonModel = new sap.ui.model.json.JSONModel();
    oModel.read("/Employee?$top=50",null,null,true,function(oData,response){
         jsonModel.setData(oData.results)
         this.getView().setModel(jsonModel, "employees");
         fetchedRecords = fetchedRecords + 50;
    }.bind(this));
},

grow : function() {
    var oModel = new sap.ui.model.odata.ODataModel("EmployeeODataService.xsodata/", true);
    oModel.read("/Employee?$skip="+fetchedRecords+"&$top=50", null,null,true, function(oData){
         var oTableModel = this.getView().getModel("employees"); //Get your table model
         var aTableData = oTableModel.getData(); // Get entries
         aTableData.push.apply(aTableData, oData.results); // Add more entries
         oTableModel.setData(aTableData); // // Update model
         fetchedRecords = fetchedRecords + 50;
    }.bind(this));
}
<br>

Re: Load huge data

Former Member — Sat, 04 Feb 2017 12:06:58 GMT

No of course not! It's just for testing.

Re: Load huge data

Ryan-Crosby — Sun, 05 Feb 2017 12:01:56 GMT

Ah ok, test on then... I think the others have given you some options to work with thus far.

Re: Load huge data

boghyon — Sun, 05 Feb 2017 16:30:52 GMT

I'd strongly discourage using sap.m.Table over sap.ui.table.Table if you need to display more than about 100 items. Even Chrome will face performance issues. IE was unusable in my experience because of that. sap.ui.table.Table solves the problem because its DOM element doesn't "grow" as List does. When scrolling occurs and your OData is bound to the table directly (without a JSONModel in between), UI5 will handle updating data automatically by sending requests with "top" & "skip", which enables dealing with a huge amount of data seamlessly.

The only disadvantage of sap.ui.table.Table is that its design is not responsive.