I am going to come right out and say I heart jQuery Mobile; it just makes creating a mobile device friendly page a snap. Yesterday, I was in Boston at one of our Developer Workshops where we spend a day with a bunch of developers talking about the Force.com platform. Typical me decided mid-morning that I wanted to change up some of the content for one of the afternoon sessions. The session I was going to present was covering Force.com Sites. My fear was that the session didn’t highlight how well the cloud and mobile development can go together. In particular, how the folks in the room could leverage their new found Visualforce and Apex awesomeness that we covered in the morning sessions.

Long story short, I threw together some very quick Visualforce pages which used jQuery Mobile to render the pages nicely on any mobile device. Here is all you need to do:

1. Add the jQuery Mobile libraries and CSS as static resources (or you can also refer directly to the libraries on the jQuery Mobile home page) under Setup –> Develop –> Static Resources. I like to bundle all my dependencies in a zip and refer to that bundle going forward. (see below)

2. Create my listings page. I was demoing the Big Cloud Realty Sites app (you can see it live here) which uses a real estate example. My goal was to show the current listings in a nice mobile friendly way.  Here is my listings Visualforce page with jQuery Mobile markup. Note the references to my jQuery Mobile bundles from step one. The rest of the jQuery Mobile magic is handled by the data-role divs and additional data-xxx attributes.

<apex:page standardController="Listing__c" recordSetvar="listings" showHeader="false" sidebar="false" standardStylesheets="false">
<head>
<apex:stylesheet value="{!URLFOR ($Resource.jquerymobile, '/jquery.mobile-1.0b1/jquery.mobile-1.0b1.css')}" />

<script src="{!URLFOR($Resource.HTML5Util, 'jquery.min.js')}" ></script>
<script src="{!URLFOR($Resource.HTML5Util, 'jquery.mobile.min.js')}" ></script>
<apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.11.custom.min.js')}" />
<link rel="stylesheet" href="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.11.custom.min.css')}" />

    <script>
        jQuery.noConflict();
    </script>

</head>

<body>
<div data-role="page" data-theme="b">
    <div data-role="header" data-add-back-btn="false">
         Big Cloud Mobile
    </div>

    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
          <li data-role="list-divider">For Sale</li>
          <apex:repeat var="a" value="{!listings}" id="list">
            <li><a href="/apex/MobileListingDetails?id={!a.id}" data-transition="flip">
                    <apex:outputField value="{!a.Tag_Line__c}"/>&nbsp;<apex:outputField value="{!a.Asking_Price__c}"/></a></li>
          </apex:repeat>
        </ul> 

     </div>

     <div data-role="footer" >
        Where Clouds find a home.
    </div>

</div>
</body>
</apex:page>

3. A listings page without a detail page isn’t very exciting, so I added quick details page:

<apex:page standardController="Listing__c" showHeader="false" sidebar="false" standardStylesheets="false">
<head>
<apex:stylesheet value="{!URLFOR ($Resource.jquerymobile, '/jquery.mobile-1.0b1/jquery.mobile-1.0b1.css')}" />

<script src="{!URLFOR($Resource.HTML5Util, 'jquery.min.js')}" ></script>
<script src="{!URLFOR($Resource.HTML5Util, 'jquery.mobile.min.js')}" ></script>
<apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.11.custom.min.js')}" />
<link rel="stylesheet" href="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.11.custom.min.css')}" />

    <script>
        jQuery.noConflict();
    </script>

</head>

<body>
<div data-role="page" data-theme="b">
    <div data-role="header" data-add-back-btn="false">
        <a href="/apex/MobileListings" data-icon="home" data-iconpos="notext" data-role="button" data-theme="b" data-transition="flip"/><br/>
         &nbsp;
    </div>

    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
          <li data-role="list-divider">Listing Details</li>
            <li>Agent: <apex:outputField value="{!Listing__c.Agent__c}"/></li>
            <li>Tag Line: <apex:outputField value="{!Listing__c.Tag_Line__c}"/></li>
            <li>Asking Price: <apex:outputField value="{!Listing__c.Asking_Price__c}"/></li>
            <li>Description: <apex:outputField value="{!Listing__c.Description__c}"/></li>
        </ul> 

     </div>

     <div data-role="footer" >
         <a href="/apex/MobileListings" data-icon="arrow-l" data-iconpos="notext" data-role="button" data-theme="b" class="ui-btn-left"/>
         <a href="/apex/MobileListings" data-icon="arrow-r" data-iconpos="notext" data-role="button" data-theme="b" class="ui-btn-right"/>

    </div>

</div>
</body>
</apex:page>

And, that’s it. As you can see from the code examples, 90% of everything is standard Visualforce, the rest is HTML markup.

With my funky new mobile page, I added an additional link to the Big Cloud Sites template, and we were good to go in less than an hour. But the proof is in the pudding, as they say. Go ahead and try it for yourself. Go to the Big Cloud Sites page, and click on the mobile link on your mobile device.

tagged , , Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • http://twitter.com/lahaxe_arnaud LAHAXE Arnaud

    Thank you for this source

    • Anonymous

      Does this work inside a customer portal? I want to have a version of a customer portal content for mobile.

  • Abhinav Gupta

    Lovely

  • Matt Reynolds

    I tried adding some jquery mobile to a visualforce page that I then exposed via a mobile tab to the Salesforce iPhone app. One thing I found is you need to add a meta tag to the header to get the page to scale properly. Something like:

    • Marketing – Danamark WaterCare

      You saved my life buddy!!!!… Thanks loads for this tip!!!

  • lauraine 2012

    Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 player| html5 video player

  • brad bi

    Great one. It will help to A/B experiment. Thanks for the wonderful post.
    legal helping hand,

  • lucky

    How to get those static resource files?