remoteControlCar

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 jQuery.one) 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.

Conclusions

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.