HTML5 has emerged as a popular technology for creating mobile applications. Visualforce, with its flexible component infrastructure, makes it possible to wrap low-level code into reusable components for developing custom apps on the Force.com platform. Mobile Components for Visualforce is an open-source Force.com library, available on Github, that simplifies development of HTML5 mobile apps. This library contains lightweight Visualforce UI components for generating cross-platform HTML5 output that runs well on tablets (with support for smartphones coming soon). You can deploy apps in the browser or embed them inside the Hybrid Mobile SDK Container from the Salesforce Mobile SDK.
Mobile Components for Visualforce let's Visualforce developers quickly and easily build mobile applications without having to dig deep into complex mobile frameworks and design patterns. This library includes the frameworks and best practices of mobile development that you can use with simple component interfaces. Let’s dive into the details on how you can use this library to quickly develop a simple tablet application that allows users to browse contacts and view the related details.
The following graphic is a quick overview of the architecture of Mobile Components for Visualforce (see the following discussion for more information about each component).
An example of an iPad page based on Mobile Components for Visualforce follows:
The library consists of various components providing different functionalities. Here’s the list of those components:
Follow these steps to get going with the Mobile Components for Visualforce.
git clone https://github.com/forcedotcom/MobileComponents.git
Deploy the Force.com metadata found in the MobileComponents/Visualforce/src folder to your destination org with Workbench using following steps:
To configure a remote access point in your salesforce.com org, log in into your destination org and setup following:
You should now be all set and ready to use Mobile Components for Visualforce! To see the sample Contact viewer app in action, navigate to the following page:
https://<remote site url>/apex/MobilePage
Mobile Components for Visualforce includes a couple of sample Visualforce pages (MobilePage and MobilePageWithComponents) that demonstrate how to use the components for a tablet application. Now take a look at the MobilePage and see how it is built for a tablet to display the list of Contacts and related details.
Inside the App component, you can specify the body of the mobile app. In this case, you build a split view page, which provides a slim left section for list view, and a wider right section to show the record details. To do this, you compose the page by using the SplitViewTemplate which is part of this component library.
SplitViewTemplate consists of two sections that you need to define.
Now define the content inside these sections of the split view. Here’s how to define the content for the left menu section:
<apex:define name="menu"> <c:Page name="list"> <c:Header > <h1 style="font-size: 20px; margin: 0px;">All Contacts</h1> </c:Header> <c:Content > <c:List sobject="Contact" labelField="Name" subLabelField="Account.Name" sortByField="FirstName" listFilter="true"/> </c:Content> </c:Page> </apex:define>
While defining the content of the left menu section, you use the Page component, which provides an important wrapper to define the fixed header and footer components with a scrollable content section in between. Within the Page component, you use the Header component to define the fixed title of the section. Following the header, you use the Content component to describe the scrollable content section. Within the body of Content component, you use the List component to fetch and display the Contact list. Use the sObject attribute on List component to specify the sObject type for creating the list view. Use other attributes such as labelField, subLabelField, sortByField and listFilter to specify the behavior and display properties of this list (hopefully, the attribute names are self-explanatory).
<c:List sobject="Contact" labelField="Name" subLabelField="Account.Name" sortByField="FirstName" listFilter="true"/>
Now take a look at the content inside the main section of the split view.
<apex:define name="main"> <c:Page name="main"> <c:Header > <h1 style="font-size: 22px; margin: 0px;">Contact Details</h1> </c:Header> <c:Content > <c:Detail sobject="Contact"/> </c:Content> </c:Page> </apex:define>
Similar to menu section, you use the Page component to define the contents of main section and to enable the use of Header, Footer, and Content components. Using the Header component, you specify the title to this section. Following the Header component, use the Content component to specify the Detail component. The Detail component takes the sObject type as an attribute and generates the mobile layout with details of the associated record. The Page layout associated to the current user profile and associated record type drives the mobile layout of the record. This gives administrators the flexibility to update the mobile layout by using the standard salesforce Page layout manager and avoids a requirement for code modifications.
The List and Detail components respect your org's Object, Field, and Record visibility settings. Consequently, you can develop apps using these components without having to modify existing security settings. Also, you can easily override the CSS styles of these components to give them a look and feel as required by your project.
If you already know jQuery Mobile, notice that the Page, Header, Footer, and Content components actually use the jQuery Mobile properties to enable the mobile user experience. So, while using this component library, you can easily leverage other features of jQuery Mobile too.
Besides these components, salesforce.com will be adding more components in the near future and will share a feature backlog through the Github repo. Also, it is very easy to build your own set of new components and share it with the community. The details on creating a new component or extending an existing component are available on Github.
Mobile Components for Visualforce is a open-source initiative, intended for the broader Force.com community to fork, modify, and create new components. We will gladly integrate useful additions to the main distribution branch.