Visualforce Remote Objects with jTable

Visualforce Remote Objects provide a mechanism for performing simple CRUD operations directly from JavaScript.  In the upcoming Summer ’14 release there are new features being introduced to Remote Objects.  This article explores the usage of Remote Objects in a Visualforce page that uses the jTable jQuery plugin to manage Accounts, Opportunities, and Contacts.  There is an emphasis on how the new features are used; however, all code is available on GitHub.

The Page

The page allows a user to paginate through all of the Accounts that they own and view and/or edit information about the Account or related Opportunities and Contacts.  Each Account is displayed as a main row in the table.  Clicking the Opportunity or Contact icon expands the corresponding child table after the records are retrieved on demand using Remote Objects.

Visualforce Page with jTable expanded

The jTable jQuery plugin

The jTable jQuery plugin is a plugin that creates CRUD tables based on configurations supplied to it.  The jTable Actions listAction, createAction, updateAction, and deleteAction are used to specify the implementation of their respective CRUD operations.  The actions can be defined as a simple URL that corresponds to an URL that will be called via ajax to return the needed data.  Alternatively, the actions can be defined as a JavaScript function that handles getting the needed data.  The JavaScript function variation can be used in conjunction with Remote Objects to to supply the needed data to the jTable.  The jTable API requires that when the JavaScript function performs an asynchronous operation that the function return a promise using jQuery.Deferred.

The jTable Config

The jTable is configured to support pagination and the Opportunity and Contact child tables.  Action handlers are specified for the Account and the Opportunity and Contact child tables are configured similarly in the setupChildren function.

Retrieve and Pagination Configuration

The jTable can be configured for pagination via the pagination parameters. jTable populates the jtParams object with the page size and the current page and passes it to the action handler functions. The Remote Objects’ retrieve criteria is set up with an offset and a limit derived from the jtParams object.

The orderby criteria clause is new in Summer ’14. Its structure is an array so that it can support ordering by multiple fields (i.e., primary ordering, secondary ordering, etc.). On the initial load of the jTable or on navigation to the first page, the offset value will be calculated as 0. The Remote Objects framework dictates that the offset value must be at least 1, so a check is done in the JavaScript to only add the offset object to the criteria when the offset value is at least one.

A retrieve function was created that can be used by the Account, Contact, and Opportunity.  It uses the passed in Remote Object model to do the actual retrieval.  The jTable format is slightly different so a converter function is passed in as well.  In the above code, the Account’s model, a converter function, getAccountObject, and the criteria are passed as arguments.  When the Contacts and Opportunities need to be retrieved the same function is called, but with different arguments.  The implementation is as follows.

Override Retrieve Method

The jTable pagination API needs the total number of records specified in a TotalRecordCount field for the pagination to be able to work correctly. This is something that is not returned as part of the standard Remote Objects retrieve response, which makes sense. In Summer ’14, the ability to override the standard Remote Object operations was introduced. For the jTable, the Account’s retrieve operation is overridden to add the additional value of TotalRecordCount to the result. The override is specified in the <apex:remoteObjectModel/> component:

The method override must be a @RemoteAction method. The overridden implementation adds the total number of Accounts owned by the current user to the result.

Note that a new Map is created and then added to, instead of just adding to the Map returned by the standard RemoteObjectController.retrieve method. This is done because the map returned from that is not modifiable. If you try to add to it you get an error indicating that the collection is read-only (e.g., “line -1, column -1: Collection is read-only”). The custom TotalRecordCount value can then be accessed in the event.result object in the retrieve callback function.

Upsert

In Summer ’14 an upsert Remote Object operation was introduced. It is a convenience method that simply delegates to the insert or update operation in the Remote Object JavaScript, depending on whether or not the Id field is set.  For the jTable implementation, an upsert function used by the Account, Opportunity, and Contact, was created which then calls the Remote Object upsert, which specifies a callback function to handle the result of the operation.

For the sake of simplicity, I did not do much with the UI for editing the records. More can be done in jTable to create validators, richer inputs, etc. Some of the demo apps go in to more detail on that.

More

The new features added to Remote Objects in Summer ’14 give developers the ability to create richer applications. Specifically, the ability to override the Remote Object methods in Apex provides a powerful way to extend Remote Objects. Remote Objects are in a Developer Preview, so the API may be changed in ways that breaks existing code. Sign up for a pre-release org now or wait until the Summer ’14 release updates are made to test out the new features.

All code is available on GitHub.

One thought on “Visualforce Remote Objects with jTable

Leave a Reply

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