In this chapter, we will cover the following recipes:
Mobilizing a Visualforce page
Navigation and transitions
Adding a navigation bar
Working with dialogs
Listing records
Mobile Visualforce forms
Redirecting to the mobile page based on the browser
Storing the user's location
Scanning the QR code to access the page
Users today expect mobile access to the same applications and data that they have on their desktop or laptop computer, and failure to provide this type of access can lead to a lack of adoption of an application.
There are three types of mobile applications:
Native: These applications provide access to all the features on a device and have the potential for the slickest user experience and best performance. The downsides are that a separate application needs to be built for each platform that is supported using platform-specific tools and languages, and distributing and upgrading an application is often constrained by the platform (to distribute an iOS application, for example, requires membership of the Apple Developer Program).
HTML5: These are web applications that are accessed via the device browser. They do not have access to many device features and have limitations around offline storage and session management. The key benefit to HTML5 mobile applications is that one application...
Mobilizing a Visualforce page using jQuery Mobile requires that the jQuery Mobile stylesheets are used rather than 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 recipe 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.
This recipe requires a custom controller, so this must be created before the Visualforce page.
Navigate to the Apex Classes setup page by clicking on Your Name | Setup | Develop | Apex Classes.
Click on the New button.
Paste the contents of the MobileOppsController.cls Apex class from the code download into the Apex Class area.
Click on the Save button.
Next, create the Visualforce...
While mobile applications can utilize the standard JavaScript alert function to create a dialog, this can be a jarring user experience, as the dialog will not be styled according to the application and the pop-up aspect may be at odds with the page transitions used elsewhere. jQuery Mobile provides the following two mechanisms for generating a dialog:
A page that has a <div> element with a data-role attribute of dialog will only ever be rendered as a dialog and thus, is not as re-usable as the second method explained next.
A link to a page with a data-rel attribute of dialog renders the target page as a dialog. This allows the target page to be rendered as a regular page or a dialog depending on the use case.
In this recipe we will create a Visualforce mobile page that displays a list of account names and a View button. Clicking on the View button will open an external page as a dialog and display details of the selected account.
In the previous recipes, records have been laid out in a grid format which do not have much space for record details. Using jQuery Mobile listview widget allows record details to be displayed in each element of a list, and also allows a number of different items of functionality to be made available declaratively through HTML5 data- attributes.
In this recipe we will create a mobile Visualforce page to render contact information in a jQuery Mobile listview widget. The listview will group the contacts into sections based on the first letter of the LastName field on the contact record. The listview will also be filterable by entering text into a search box at the top of the list.
This recipe does not require any controllers, so we only need to create the Visualforce pages.
Navigate to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
Click on the New button.
Enter MobileFilteredList in the Label field.
Accept the default MobileFilteredList...
Capturing data from a mobile site can be achieved in a number of ways. The most straightforward, from a markup and code perspective, is to use a standard controller to manage the page and capture the information via a standard <apex:form /> component. This mechanism requires the Visualforce viewstate to be used to maintain the state between the controller and the page, which is somewhat heavyweight for a mobile device and precludes use of Visualforce Ajax functionality, as this would interfere with the jQuery Mobile Ajax page navigation.
The other option is to use JavaScript to send the information back to Salesforce, either via the REST API or JavaScript Remoting. Using the REST API makes an application more portable, allowing it to be easily hosted outside the Salesforce platform, but does consume API calls and can lead to limits being exhausted. JavaScript Remoting allows methods in an Apex controller to be called from a Visualforce page via and does not...
While developers can provide mobile versions of a web page or site, users only access these if they are aware of the URL. When a user receives a link to a full site page in an e-mail or social media post, they are likely to follow this link rather than attempting to alter it to point to the mobile version. An application can improve the user experience by detecting that a mobile device is in use and sending the user to a mobile version of the page.
There are two ways in which this functionality can be provided in Visualforce. They are as follows:
Server side by interrogating the USER-AGENT header of the request and matching this against a set of mobile devices. While this provides a faster experience for the user, as a server-side redirect can be used to send them to the destination page, it does introduce a maintenance overhead, as the list of mobile devices is ever increasing.
Client side using JavaScript to determine the dimensions of...
Mobile devices, by their very nature, are used on the move and applications often need to capture the location of the user in order to provide the best user experience; for example, showing proximity to a business or services, or allowing them to check-in at a destination.
In this recipe we will create a mobile Visualforce page to capture a lead and the location of the user. The location will be stored on the lead record in the Salesforce database.
This recipe requires a custom field on the lead sObject to capture the location.
Navigate to the lead fields setup page by clicking on Your Name | Setup | App Setup | Customize | Lead | Fields.
Scroll down to the Lead Custom Fields and Relationships section and click on the New button.
On the next page, Step 1. Choose the field type, select the Gelocation option from the Data Type radio buttons and click on the Next button.
On the next page, Step 2. Enter the Details, enter Location in the Label field, enter...
Mobile devices, especially phones, have small keyboards and screens which can make entering page URLs difficult. If the device has a camera, scanning a code to navigate to a page can improve the user experience.
QR, or Quick Response, codes are 2-dimensional barcodes originally used to track automobiles during manufacture. For more information on QR codes see http://en.wikipedia.org/wiki/QR_code.
In this recipe we will create a mobile view page to display details of an opportunity. We will also create a Visualforce page to generate a QR code that links to this mobile view page, which we will then embed into the opportunity view page. When the code is scanned on a mobile device, this navigates a user to the mobile view page to allow them to view the opportunity details.
This recipe relies on the mobile device being able to scan the QR code.
This recipe also uses the jquery.qrcode.js (https://github.com/jeromeetienne/jquery-qrcode) JavaScript...
© 2013 Packt Publishing Limited All Rights Reserved
