Automatic 'Load More' action

Hi,

Have you read through this tutorial?  http://help.skuidify.com/m/11720/l/205082-table-component-custom-global-actions


There is some really good tidbits on working with the entire dataset e.g. a model with more than 10K records.

There is also sample code for paging in JavaScript.

Regards,
Irvin

I’m not sure about the details, but in theory you should be able to set your model to not load anything on pageload, and then write some javascript on pageload that would sequentially load more rows until all the rows were loaded.

Use canRetrieveMoreRows and .loadNextOffsetPage() (see skuid.model.Model)

In principle, it’s something like this:

var model = skuid&#46;$M('YourModel');<br />$(document&#46;body)&#46;one('pageload, function(){<br />&nbsp; while (model&#46;canRetrieveMoreRows) {<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;model&#46;loadNextOffsetPage();<br />}<br />});

But you're going to run into async issues. You need to tell the script to wait until the query completes before looping again. I'm not confident enough to with jQuery .when() or .deferred() to take a pass at that, but I'm sure someone is!

Yes!  What Irvin says… 

Has Anyone ever figured out the full JS to be able to accomplish this?

If yes, I would appreciate it if you could share it, as I’m having the same issue

Thank you

The trick is actually to use a self made loop and the callback on the loadNextOffsetPage function:

var loopLoad = function(){ model.loadNextOffsetPage(function(){ if(model.canRetrieveMoreRows){ loopLoad(); }else{ //do something fun with your data here if you want } }); }<br>

There is a Model prototype method that handles this looping for you: model.loadAllRemainingRecords() . Calling this single line from JavaScript will kick off logic that is functionally equivalent to what Jacob posted, with some extra capabilities in terms of callback functions.

As the docs for this method describe, calling this method will kick off a loop that will not terminate until all remaining records in the database that meet the Model’s Conditions that have not already been retrieved into the Model have been retrieved. 

NOTE: in Salesforce, there are hard limits on “offsets” which may prevent you from retrieving “all” records in your database. For custom objects and the most commonly-used standard objects, the limit is 10000 + your Model’s “Max # of Records to Retrieve (Limit)” property. For other standard objects and system objects, the limit is 2000 + “Max # of Records to Retrieve (Limit)”. 

this is AWESOME.

Agreed, this is awesome.  I was able to implement a “lightning-like” functionality of loading on scroll using this.  So when the “load more” button comes into view, it then runs the loadNextOffsetPage() to load the next batch.  Significantly improved performance!

Paul, that sounds cool! I’m curious about your solution, would be great if you could share your script here 🙂

Sure, it’s a hacky prototype right now, but here it is in all of it’s raw prototype glory.

IMHO, this should be a feature in skuid without js…

Also, in full transparency for credit, the js pattern for determining if an element is in a viewport is from here:
https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2

So this is a mashup of that thread and this thread…

(function(skuid){
var $ = skuid.$;
      
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top; var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).scroll(function() {  
          
 $('.nx-list-loadmore').each(function() {
var model = skuid.$M('');
    if ($(this).isInViewport()) {
      $.blockUI({
              message: 'Loading More Rows...',
              timeout: 1500
           });

         model.loadNextOffsetPage();
    }
  });
});
})(skuid);

Thank you for sharing, Paul!

Paul,

I’m not having luck implementing this.

It looks like the only piece of this code that would need to be customized is where you have …or am I missing something else that needs to be customized?

Is there any other considerations to implementing this (e.g. table needs a maximum scrolling height and/or should there be max # records query limit set on the model)?

Thanks,

Conlan

Yes, a couple things:
- you need the table to render with the load more button, which means you need a max # of records.  It will load initially, and on each scroll, that # of records set there will load.  Something like 25 or 40 seems like a reasonable number.
- make sure it is implemented as an in-line, not a snippet or other type of resource location.

Let me know if that fixes it.

Got it working, this is great!

I didn’t have it set up as “In-Line” resource…I had it as In-Line Snippet.

Also, a couple additional things I had to set under the Table’s Display settings:

• Pagination --> Visible Rows: Show All
• Scrolling --> Allow Scroll Bars: unchecked