Load huge data

[Former Member]

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

[boghyon]

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.

[junwu]

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

[Former Member]

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");
}

[Former Member]

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.

[Former Member]

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>