Thursday 7 November 2013

Visualforce in Chatter Mobile

Chatter mobile 4.2 for iOS launched this week and one feature has generated a lot of interest - the ability to include Visualforce in the application. Daniel Hoechst produced a blog post explaining how to achieve this in record time.

At first glance it might seem that this doesn’t add much over and above a regular HTML5 application that is executed from the mobile device browser - in fact an application wouldn't even require the consumption of a tab to expose the Visualforce page.  

The difference is that the chatter application refreshes an oauth token to gain access to the pages and data, so users don’t need to rekey their user id and password each time they access the application.  This is a big deal.

To achieve this without the chatter application, you’d be looking at building a remote start hybrid application using Xcode on a mac and if my experience is anything to go by, spending a fair amount of time playing the provisioning/distribution profile guessing game. You’d also need to either purchase an enterprise distribution license or make your application available through the apple app store. Throw in the being a Salesforce partner building applications on behalf of customers, and things get even more complicated. Did I mention that this is a big deal?

I’ve had a quick play around with the iPhone and iPad variants - the fact that the iPad has more real-estate and supports landscape mode means I focused on that in the first instance.

Burning a tab for each Visualforce page that you wish to surface in the application is a bit of an overhead, especially in Enterprise Edition where you quickly become tab-poor if you build a number of custom applications. The good news is that the tab that you surface doesn’t have to be tied to a particular purpose, so you can build a jumping off page that allows you to access any amount of other pages.  Even better, only the page present in the tab needs to be marked as available for mobile.

To demonstrate this I’ve created a simple jQuery Mobile page that presents a listview with a couple of options. Each of these options opens a new jQuery Mobile page, one that I wrote ages ago to demonstrate navigation, and the other a sample application for swipe navigation that I blogged about a few months ago.  The page source is shown below:

<apex:page showheader="false" sidebar="false" standardstylesheets="false">
<html>
    <head>
    <title>Chatter Mobile Page</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <apex:stylesheet value="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"/>
    <apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.js"/>
</head>

<body>
  <ul data-role="listview">
    <li><a href="/apex/JQM">JQM Page</a></li>
    <li><a href="/apex/JQMSwipe">JQM Swipe</a></li>
  </ul>
</body>
</html>
</apex:page>

I then made this page available to mobile by ticking the “Available for Salesforce mobile apps” checkbox on the edit page, creating a Visualforce tab and adding this to the available Chatter mobile tabs via the Setup -> Administration Setup -> Mobile Administration -> Mobile Navigation setup menu option.  When I open the chatter mobile application the new page is available under the apps menu:

Screen Shot 2013 11 07 at 17 55 52

 

clicking the VF Page app opens my basic jQuery Mobile page:

 

Screen Shot 2013 11 07 at 17 57 08

 

clicking one of the links, the JQM Swipe for example, opens that page:

 

Screen Shot 2013 11 07 at 17 58 55

 

Once I’m done with this page I can click the left arrow icon at the top right of the page to go back to my jumping off page.

 

3 comments:

  1. I'm not getting this to work on my developer ed org. I've marked a few pages as available in SF Mobile, and also tried to create a landing page, like in your example. No pages become available in the Mobile Administration section. Am I missing something in particular?

    ReplyDelete
    Replies
    1. You have to create a Visualforce tab for the page - it is the tabs that appear in the Mobile Administration section.

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete