How to build a mobile app for using jQuery Mobile and push notifications

Salesforce was the first major SaaS company and has a thriving ecosystem of apps built on top of their APIs.

David Hecht of CloudAmp and I built a mobile app for Salesforce Chatter, called Sales Square. In this post, we’ll cover how we built it using and the APIs with mobile features such as push notifications, geolocation and camera.

The app lets your team check in with where they are and what opportunities they are working on and notifies the rest of the team. Here is a demo screencast showing the app in action:

Here’s how we built it:

Getting Started with jQuery Mobile

You can see the full code for Sales Square in Github.

I started by creating the basic structure of the app to use  jQuery Mobile which makes styling and page transitions simple – you can see that in index.html.

First, embed the style and script tags in the head:

You can see in this snippet, that we set the default page transition to ‘none’ rather than using the normal slide animation that comes out-of-the box with jQuery Mobile. That’s a personal preference, but I prefer to avoid animation so the performance appears snappy.

Second, I create the basic structure of the app with the different pages in the body. There are four pages in the app:

  • Homepage with check-in button
  • Map showing check-ins
  • Map to confirm your location while checking in
  • List of opportunities to select which you’re working on

So here’s the HTML to create those:

With that created, moving from page one to two is as simple as:

Now, SalesSquare uses a native topbar and tabbar to help with the navigation, the camera so you can take a photo of where you are during the check-in process and location look-up to center the map.

You can see snippets covering those features in main.js and map.js, and we’ve blogged in detail before about how to use those features:

So let’s jump straight in with what’s new: Salesforce integration and setting up push notifications.

Salesforce oauth and API calls

First you need to sign-up for a Salesforce developer account so that you can create your consumer key for oath authentication.

We have general documentation on oauth authentication with but here’s how to do it for Salesforce. You can follow along with the code in salesforce.js.

First open a modal dialog with the right authentication url, you can see this in the ‘login’ function:

You can see here that we specify a redirect url and then make sure it matches the ‘pattern’ parameter that is passed to ‘forge.tabs.openWithOptions’. This is so the modal dialog automatically closes when the success redirect url is reached. And we can then access the token and other parameters that are passed back by Salesforce.

Next, using the access token we’ve just received, we retrieve the user’s identity, you can see this in the ‘getIdentity’ function:

You need the identity object in order to be able to construct the right urls for querying the opportunities and posting to chatter, which, at this point, is simple. Check out the ‘getOpportunities’ and ‘post’ functions in salesforce.js and you’re there:

Finally, we add some bootstrap code to check if we already have the identity and token or if we need to kick off the oauth flow:

Setting up push notifications with Parse

Ok, the final tricky part of the app is setting up push notifications so that when one user checks in, others in the organization are notified.

There is some setup to be done here – integrates with to provide push notifications, so you’ll need to create an account there to get the necessary tokens, and then add lines like the following in your config.json for

Next we’ll set up code to listen and respond to push notifications, you can see this in the ‘subscribe’ function in main.js:

You can see there that we subscribe to a channel named with the organization id, so we only see notifications for our own team members.

Finally we can use Parse’s REST API to trigger the push notification at the end of the check-in process:

By passing an ‘alert’ and ‘badge’ parameter in the data we trigger a message to be shown to the user receiving the push and set a number against the icon of the Sales Square app.

That’s it

That’s the code, and you can now build it to try out in the iOS emulator using the instructions in GitHub.

Testing the push notifications on an iOS device and packaging the app up for distribution requires that you have the necessary certificates and keys setup. But once you’ve done that, you have a rich, powerful mobile app built for Salesforce!

We hope this has inspired you to build mobile apps using Sign-up now to get started.

Any problems at any point? Ask the community on StackOverflow or contact