Infinite Scroll with Remote Objects

Remote Objects provide a way to perform simple CRUD operations on objects from a Visualforce page via JavaScript.  With the Winter ’15 release, Remote Objects are generally available (GA).  Infinite scrolling refers to a pattern where the next set of data is loaded dynamically as the user scrolls down the page.  This article shows how Remote Objects can be used to provide infinite scroll capabilities to a table of Contacts.  All code is available on GitHub.

The Page

The page is a simple table of Contacts owned by the current user. As the user scrolls down the page, Contacts are dynamically added to the table after they are retrieved using Remote Objects.
Contacts table with infinite scroll in Visualforce

Remote Object Definition

The Contact Remote Object model is defined in the <apex:remoteObjectModel> standard component tag.

This defines the shorthand to be used in JavaScript, the fields that are available for use in Remote Object operations, and an override of the standard retrieve method.  It is important to define all fields that can be used in a query and not just the ones that are being retrieved.  For example, if you are sorting by or have a field in a where clause, but aren’t using it in the result, you still must list it in the fields attribute.  If you do not, you will get an error when the retrieve operation executes.

Scroll Detection

There are many different infinite scroll plugins and different ways to achieve an infinite scroll without a plugin.  This code uses some jQuery, but not a plugin to detect when the next set of data needs to be loaded.

The JavaScript sets up an event listener that will be executed at most once (see and after it executes it will set itself up to listen again, with a 200 ms delay.  The delay and the usage of the one function are used for efficiency reasons, because the scroll event could be fired many times in rapid succession.  The loadRecords function is only called if the offset is still less than the total number of records. Note that the maximum offset allowed is 2,000.

Remote Object Retrieve

The loadRecords function dynamically builds the criteria to retrieve the current chunk of records. Note that the offset must be greater than 0 to be included in the criteria. If it is not greater than 0, an error will be generated.  The records are sorted by Name ascending, and the chunk size, controlled by the limit portion of the clause, is 5.

The callback function iterates over the returned records, appending them to the table.  For simplicity’s sake the callback just pops an alert if there is an error.

The retrieve method was overridden because the total number of possible Contacts was needed to know when to stop retrieving.  The override in the controller simply queries for the total number of contacts owned by the current user and stores that number in the result.

The JavaScript callback then assigns that number to the totalContacts variable by retrieving it from the event.result object.


Remote Objects are useful in JavaScript based applications inside of Salesforce, but can also be leveraged in simple Visualforce pages to provide a simple way to access data.  To learn more, consult the Visualforce Developer’s Guide which contains excellent documentation on Remote Objects.

All code is available on GitHub.

10 thoughts on “Infinite Scroll with Remote Objects

  1. This is very cool. Thanks for sharing. Quick question: I stuck the page into an inline (embedded page) on the account layout. In this case the data is not rendered . Have to tied that?

    1. I have not tried that. You might have to tweak what triggers the scrolling, though. The code in this post uses the window and document. You may need to detect when the scrolling needs to happen relative to a div instead. See the second part of this answer on Stack Overflow: (code snippet copied from answer below)

  2. I liked your idea peter but in the VF Page I am using in salesforce.I don’t Require any scrolling functionality all I ned is just to fetch all the rcords as they way they are and show it with help of jstree without any limitation in the number of records retrieved.

  3. Pingback: Steel Buildings
  4. I think everything published made a bunch of sense. But, what about this?

    what if you added a little information? I am not saying your information isn’t solid., however suppose you added a post title
    to possibly get folk’s attention? I mean Infinite Scroll
    with Remote Objects – Peter Knolle is kinda
    vanilla. You should peek at Yahoo’s front page and watch how they create news headlines to grab viewers interested.

    You might add a related video or a pic or two to grab people excited about everything’ve got to
    say. Just my opinion, it might make your posts a little livelier.

Leave a Reply

Your email address will not be published. Required fields are marked *