As a follow up to Sandeep’s introduction to our new Mobile Design Templates, I thought I would specifically visit a different template: the Calendar View.  I also wanted a chance to review some of the code assembled for the Hybrid Mobile Webinar and retest it with the latest material.  The end result?  A super simple Calendar app that hooks into Salesforce events via the REST API.  No fear, though, I’ll be updating and evolving this app over a series of blog posts.

Introducing SObjectData.js

One thing we wanted with our recent additions and updates to the Mobile Packs was to be able to support the new SmartSync framework.  While the original examples for SmartSync included Backbone.js as a framework, we also wanted to be able to use SmartSync with lower level libraries like jQuery Mobile.  The Mobile Design Templates also require some jQuery to work their magic.  For the jQuery Mobile Pack, and libraries like the Mobile Design Templates, I wrote a new library to abstract SmartSync without requiring an MVC style library like Backbone or Angular: SObjectData.  This library runs on top of ForceTK (or RemoteTK) and SmartSync to provide easy data access and handling.

This application will use a very small portion of SObjectData – just fetching data and accessing it.  I’ll cover it in more detail in upcoming posts, but for now you can preview the Readme.md for a full description of the library’s functionality.

Pre-requisites

This application will be designed for a local hybrid application, designed to work with our Mobile SDK handle authentication.  So with that, and the Mobile Design Template, and SObjectData … we will use:

• Mobile SDK: For the Salesforce OAuth plugin as well as the SmartSync framework.
• Mobile Design Templates: For our user interface.  This will also bring in jQuery and Underscore.
• SObjectData: Data access and manipulation against SmartSync.

Authentication

Since this is a local hybrid app – we’ll leverage the Mobile SDK for authentication.  This will require setting up a Connected App, and setting the keys correctly using either forcedroid or forceios to generate a sample application.  From there, you can pretty much keep bootconfig.json from the www directory and replace the rest with our sample from github.  If this is new to you, check out the Mobile SDK documentation to get up and running.

Querying Data

Accessing your data with SObjectData is done via the fetch method of an SObjectData instance.  Just give it three parameters: type (SOSL or SOQL), query and callback.  For our calendar app, we’ll query based on a time span (either TODAY or THIS_WEEK) and then divide all the events into different arrays we can association with our template.  First we instantiate our SObjectData.  This object will be associated with a specific set of data (in this case our events), knows the SObjectType and fields associated with that data set and makes it easy to access and manipulate the data:

Now in this instance, we don’t need to define either the SObjectType or fields – SObjectData will infer all of that based on the result of our query:

Using the Calendar View Template

The Calendar View has two main sections – the first sets up the dates on the left side and a visual indicator as to the number of events (and/or tasks) associated with the date, and the right side which will show the full details for a specific day.  The application has taken the records from our query and divided them into arrays for each day of the week, and then associated all of those into one array (along with a couple of other convenient arrays like days of the week).  We can now bind these to an underscore template:

With a little jQuery:

Note the calendarObj.init call.  This is an alternative to the onTemplateReady event that Sandeep used in his tutorial if we want to refresh only a specific view out of the the Mobile Design Templates

Adding the Tabbed View Template

For a little variety, the application can switch between events for Today and events for This Week.  For simplicity, we’ll call back to the API’s for each button press – but in a future iteration we’ll make better use of a local cache and refresh mechanism.  To make our application a tabbed one, we just add the HTML from the template:

And then bind some events with jQuery:

ActivityDateTime to Date

Those of us who have dabbled with Apex Date formats and JavaScript in the past have learned that the two don’t always get along.  As part of this app, I’ve got a simple function to take an event record, pull the ActivityDateTime and then convert it to a proper JavaScript date in UTC (to keep time zone shifts correct):

Quo vadis?

As advertised – simple calendar application.  You can see how libraries like SObjectData, the Mobile Design Templates and our Mobile SDK make it easy to get the basics up and running.  I’ll continue to use this application to demo what SObjectData can do – in particular full CRUD functionality as well as hooking into the SmartSync framework to provide proper cache functionality.  I’ll keep it updated as part of the SObjectDataJS repo – so feel free to fork the project off of github if you’d like to branch off and tinker with it.  As always, send me feedback in the boxes below or catch me on Twitter @joshbirk.