Adding Reports to Salesforce1 with jQuery Mobile and the Analytics API

Salesforce1 comes with nice dashboards built in, but no reports!

This is somewhat understandable.  Dashboards are already fairly mobile friendly while reports can be quite unwieldy, even on a desktop experience.  The number of rows and columns and the controls needed to manipulate them are not trivial to implement on a small touch screen.

It is, however, possible to attempt to build this functionality yourself with the Salesforce Analytics API and whatever User Interface you wish.

Arun Varadharajan, Product Manager for Salesforce Analytics has put out a nice, simple example of how to do this:

Check the link in the tweet to see his GitHub repo.

This example is cool because it uses no apex controller.  It is all done in VisualForce and JavaScript.  It renders with the Google Charts API, to make something that looks like this:

11

However the Google Charts API isn’t all that mobile friendly.  And this example provided no method for choosing which report to display.

I decided to look deeper to push this solution further ahead for the salesforce community.

My Contribution… sf1Reports!

sf1Reports uses the latest jQuery mobile framework to create a mobile-friendly report search and render experience.

The search uses JavaScript Remoting and SOSL to return the results as you type. It searches all your reports you have created in your salesforce org:

3

You can choose 2 modes to render the report.  Reflow or Column Toggle.

See these links for more info:
jQuery Mobile 1.3.2 Docs – Table Reflow
jQuery Mobile 1.3.2 Docs – Table Column Toggle

Reflow mode will look like a standard table when the columns fit on the screen, or will collapse the rows down into a block of label/value pairs when they don’t fit on the screen.  Reflow mode is good for looking at the report data one record at a time, but not as good for comparing the records to each other:
4

Column Toggle mode lets you select which columns you want to display, so you can fit the relevant columns onto your mobile screen:
5

Installation Instructions

Grab the files from my GitHub repo: https://github.com/danieljpeter/sf1reports .
Deploy the 2 classes and 1 VisualForce page to your salesforce org. I didn’t package them, but they are easy to deploy with something like the Force.com IDE.

Enable Salesforce1 in your org:
6

Make sure the mobile checkbox is checked on the VisualForce page:
7

Make a VisualForce tab for the page:
8

Add it to the mobile navigation:
9

Navigate to https://<your instance>.salesforce.com/apex/sf1reports by manually entering it in the URL bar.  It will change to your visualforce domain which will look something like this:
https://c.na15.visual.force.com/apex/sf1reports . Copy the visualforce domain portion of the URL as seen below.  You will need to paste it into the next step.

Take your visualforce domain, and add it to remote sites.  this is because we will be calling the rest API:
10

Final Notes

This is just v1.0.  It obviously is just a crude start, but it has potential.  Feel free to contribute to make it better.

It only supports tabular reports currently.  Summary and Matrix could be added with some more work.  I use the JSON Parser to blast through the Analytics API response.  That data is fairly complex, so I chose to iterate over the JSON rather than try to deserialize it.  There would need to be some thought as how to convert the JSON for Summary and Matrix reports to corresponding apex and ultimately HTML elements.

I chose a flat listing of all reports that is searchable by SOSL.  This seemed like a good mobile-first thing to do.  If desired, navigation through the report folders could be added.

It might make sense to make some mobile versions of reports in salesforce with a naming convention which have fewer columns and rows.

I noticed that the iOS Salesforce1 app would crash sometimes.  The Dreamforce 13 app also crashed in a similar manner, so I don’t know if it is a problem with my app or not.  Sf1reports didn’t crash which running it in a browser on my desktop with the /apex/sf1reports URL or the /one/one.app URL.  Hopefully Salesforce1 proves to be a reliable container for our custom VisualForce apps and this isn’t an indicator of a larger problem.

If you need report data on to go, it might just solve your needs!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s