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.

Mobile Components for Visualforce Architecture

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).

Mcvf-architecture.png

An example of an iPad page based on Mobile Components for Visualforce follows:

Mcvf-components-ipad.jpg

The library consists of various components providing different functionalities. Here’s the list of those components:

App Component
Provides a wrapper for any mobile application, including all the settings and architecture pieces (including jQuery and jQuery Mobile) for mobile app development.
SplitView Template
Provides a Page template for the split view components on the page. In landscape mode, it provides a left menu section and a broad main section. In portrait mode, it turns the left menu into a popover.
List Component
Provides a quick and easy way to render a record list for any sObject. You can easily manage the behavior of the component by using the various attributes or the JavaScript hooks on this component.
Detail Component
Provides a quick and easy way to render the details for any sObject. You can easily manage the behavior of the component by using the various attributes or the JavaScript hooks on this component.
Page Component
Provides a jQuery Mobile wrapper with data-role="page".
Header Component
Provides a jQuery Mobile wrapper with data-role="header" for header sections inside a Page component.
Content Component
Provides a jQuery Mobile wrapper with data-role="content" for content sections inside a Page component.
Footer Component
Provides a jQuery Mobile wrapper with data-role="footer" for footer sections inside a Page component.
Navigation Component
Provides a way to create hooks for navigation between various jQuery Mobile pages.

Installing the Package and Enabling the Remote Access Points

Follow these steps to get going with the Mobile Components for Visualforce.

Step 1: Grab the Source Code

git clone https://github.com/forcedotcom/MobileComponents.git

Step 2: Deploy the Force.com Metadata

Deploy the Force.com metadata found in the MobileComponents/Visualforce/src folder to your destination org with Workbench using following steps:

  1. Create a ZIP archive of MobileComponents/Visualforce/src.
  2. Navigate to the Workbench. If you are not working with a production org, you can access Workbench here. To use Workbench with a production org, see the Workbench page for more information about installing Workbench.
  3. Log in using your salesforce.com credentials and confirm that Workbench may access your data.
  4. Click Migration > Deploy.
  5. Click Choose File (or Browse, depending on your browser), and select the ZIP archive file created above.
  6. Enable Rollback on Error.
  7. Click Next and then Deploy.

Step 3: Enable the Remote Access Point

To configure a remote access point in your salesforce.com org, log in into your destination org and setup following:

  1. Click Setup > Administration Setup > Security Controls > Remote Site Settings.
  2. Click New Remote Site, then create a new site by specifying your org's instance URL for the Remote Site URL. For example, if your org is on instance NA1, the Remote Site URL will be https://na1.salesforce.com.


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

Creating Your First Tablet Page

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.

All mobile Visualforce pages built using Mobile Components for Visualforce need to be wrapped inside the App component. The App component provides the primary architectural pieces, such as viewport settings, JavaScripts, style sheets, etc., for the mobile app. The debug attribute of an App component let’s you specify whether the app is running in development or production mode and whether to deliver the minified version of assets for the later case.

<c:App debug="true"></c:App>

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.

<apex:composition template="SplitViewTemplate"></apex:composition>

SplitViewTemplate consists of two sections that you need to define.

menu
The left section of the split view in landscape mode. This section becomes a popover when user rotates the tablet to switch to the portrait mode.
main
The right, wide section of the split view. This section is always visible on the tablet in both portrait and landscape modes.

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.

<c:Detail sobject="Contact"/>

Easy Integration

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.

Roadmap

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.

Contribute!

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.

Related Resources