Skip to Content
0

Load huge data

Feb 02, 2017 at 04:56 PM

171

avatar image

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

10 |10000 characters needed characters left characters exceeded

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.

1
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Jun Wu Feb 02, 2017 at 05:26 PM
0
Show 3 Share
10 |10000 characters needed characters left characters exceeded

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

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.

1

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>
0
Ryan Crosby Feb 03, 2017 at 02:26 PM
0

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.

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

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

0

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

0