Mobilizing a Visualforce page using jQuery Mobile

Mobilizing a Visualforce page using jQuery Mobile

In today’s mobile world, users today expect nearly the same, if not better, level of access to the same applications and data on their mobile devices, that they have on their stationary devices. Failure to provide this type of access can lead to a lack of adoption of an application, delays in business workflows, and even breakdowns of critical business processes.

A easy solution is to create mobile friendly visualforce pages and visualforce apps that allows users an access to data and business processes. In this post we are going to take look at how we can create simple mobile friendly visualforce pages using jQuery Mobile.

Mobilizing a Visualforce page using jQuery Mobile requires the use of jQuery Mobile stylesheets instead of the standard Salesforce stylesheets. This means that standard Visualforce components controlling layout, such as <apex:pageBlock /> and <apex:pageBlock />, cannot be used. Instead, the jQuery Mobile specific styles must be used to layout and organize data.

In this Example we will create a mobile Visualforce page that displays the top 10 opportunities by value. This page will use a jQuery Mobile grid to lay out the information in two columns.

/******************************************************************* * Custom controller for the “Mobilizing a Visualforce Page” Example. * Manages a list of of the 10 top value opportunities. *******************************************************************/

public with sharing class MobileOppsCntr
{ // the list of opportunities public List opps {get; set;}
// constructor public MobileOppsCntr(){
opps=[select Name, Amount from Opportunity where Amount != null order by Amount desc limit 10]; }}

Top 10 Opportunities


<!– /header –>

Top 10 by Value



How it works…

Device browsers often assume that the user is viewing a desktop size page and size their display accordingly. Mobile Safari browser, for example, will assume a width of 980 px and zoom out to fit in all the content. To avoid this, we have to set a viewport through an HTML meta tag to match the dimensions of the device.


The initial-scale and maximum-scale tags ensure that the browser does not zoom out when initially rendering the page, and that the user cannot zoom the page in or out. It also allows the jQuery Mobile framework to scroll the page down by 60 pixels to hide the mobile Safari navigation bar.

A jQuery Mobile page is defined as a div with a data-role attribute of page.


Inside the page container, additional <div> elements are defined to specify the header bar (with a data-role attribute of header) and the main body of the page (with a data-role attribute of content).



<!– /header –>

Top 10 by Value

Further, the <div> elements generate the grid layout, while a standard Visualforce <apex:repeat /> component iterates the opportunities from the controller and outputs them in individual grid cells.





Leave a Reply


We're not around right now. But you can send us an email and we'll get back to you, asap.


About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2019 Forcetalks. All Right Reserved.

Log in with your credentials


Forgot your details?