I’ve been trying to play around with AngularJS on Visualforce lately, and this quick application was a great excuse to keep up that effort. Additionally, I decided to dabble with Visualforce remote objects, a Spring 14 addition to the platform, explained well in this blog post by Andrew Fawcett. This project also gave me a chance to try out Ratchet, which is a framework that helps build mobile applications (and also meant I wrote zero lines of CSS).
Defining Wellness Goals in this particular instance is something that an Administrator would do via the normal Salesforce object tab. Logging Wellness Activities, however, is something that people very likely would be doing on the go. For that reason, I decided to leverage a global publisher action to bring up a custom Visualforce page.
I don’t want to dive too much into the nuts and bolts of how remote objects work, as the blog I mentioned above does a very good job of detailing that. However, I’ll touch on some sample code below.
To use remote objects, you use the
The search functionality is courtesy of an AngularJS filter on the repeating list of query results, and clicking on a result pops open a modal window that lets you confirm you activity (which was a built in component with Ratchet called modals). Once you are ready to create a new record in the system (and have already set up your remote object definition), it is as easy as the following snippet:
The leaderboard was built by taking the Wellness Activity objects logged and running an aggregate query on them, grouping by the User and limiting the results to a certain time period. Because I’m not quite sure whether aggregate queries will won’t with remote objects, I just created a RemoteAction for it.
As I mentioned in a tweet I sent out with these screenshots on Friday, whipping together this application only took a couple hours of toying around. It’s pretty amazing that no infrastructure changes were really necessary (besides setting up the object model), and that you can dive right into coding if you want. Alternatively, you could use the native UI to accomplish the same goals in the mobile application, but I like to think this is an easier way of visualizing this particular experience.
To take a closer look at the code, I uploaded the repository to GitHub at https://github.com/mwelburn/Salesforce1-Wellness-Tracker.