Note: The template shows a list of Contact records as an example. Since the Contact standard object does not have a native picture field, this example assumes that pictures are stored as Attachment records or Content/Chatter Files.

This template is composed of the following components.

Header

This is a common, shared component used in all of the Mobile Design Templates.

The <nav> element should contain all the items to be displayed in the sliding Menu panel (click on the menu icon on the right to see it in action). Icons can be displayed left (main-menu-button-left) or right (main-menu-button-right) aligned by applying the respective CSS class to the <div> tag. The templates have a small set of basic icons defined for this header component (Menu, Gear, Left Arrow, Right Arrow). However, developers are free to create their own custom icons and add them to the header component.

List Elements

Each list element in this template can be added with the following markup.

Adding Quick Action icons with a swipe gesture

An optional feature of this Picture List View template is the ability to display some ‘Quick Action’ icons when the user swipes on any picture in the list. The user can then perform these quick actions (like emailing or calling the Contact) directly from this view (versus from a drill-down detail view).

This optional functionality can be enabled by adding the with-swipe CSS style to the <ul> element and adding the appropriate quick action links and icons to the <div class="thumbs"> section.

Note: This swipe gesture support is enabled by a small amount of JavaScript. Look for the setupSwipeLis function in main.js for more details.

Collapsible

The Collapsible List View template can be used to display grouped and summarized list data. Users can use an accordion style control to collapse and expand each group of data. The sample template shows an example of Contact records grouped by Account, but the template can be used for any use case that requires a grouped view of list data.

This template is composed of the following components.

Collapsible Section

Use the following markup to display a collapsible section with a thumbnail image.

Note: The accordion control uses a small amount of JavaScript. Look for the setupCollapsableMenus function in main.js for more details.

Standard

The Standard List View template shows a simple list of data. Each list element can display one or more lines of data depending on the specific use case.
This template is composed of the following components.

List Elements

Each list element (with the right arrow indicating a clickable item) can be added via the following markup.

Tabbed

The Tabbed List View template shows list data organized under two or more tabs. Users can quickly navigate across the different tabs by clicking on them. For example, this template could be used to show a list of Open and Closed Cases in a single list view.

In addition to the common Header component, this template is composed of the following components.

Users can navigate across the tabs by clicking on them (try it on the right). This interactivity requires a small amount of JavaScript (see the setupTabbedLists function in main.js for details).

Note: The appropriate CSS style element has to be applied to each <a> tag depending on the number of tabs to be displayed (up to a max of 4 tabs). For example, span-50 should be used when displaying 2 tabs, span-33 should be used when displaying 3 tabs and span-25 should be used when displaying 4 tabs.

List Elements

In order to add list items to a tab, create an unordered list <ul> element (with the tabbed-list-view CSS class), and insert a list-item element (<li>) for each tab you want to create. You can also nest an unordered list <ul> within each tab <li> element to display a list of data corresponding to each respective tab.

Carousel

The Carousel List View template provides a touch-optimized carousel view of images. Users can cycle through the images by using swipe gestures on their mobile phone. For example, this template can be used to allow users to browse through a set of products stored in Salesforce. The product images could be stored in Salesforce as either Attachment records or Content/Chatter Files.

This template uses the open-source SwipeView library to implement the carousel control. In addition to the common Header component, this template is composed of the following components.

Carousel Component

Most of the work in this template is done in JavaScript by the SwipeView library. The page markup simply needs a parent <div> tag to host the carousel control.

<div id="app-content">
<div id="carousel-wrapper"></div>
</div>

The SwipeView library can then be initialized in JavaScript with the set of images (including width and height) to display in the carousel. Here’s a small JavaScript snippet showing how to initialize the carousel:

In a real-world app, the images would typically be retrieved from Salesforce using an API call or JavaScript Remoting.

Timeline

The Timeline List View template can be used to show a timeline view of data in Salesforce. For example, this template can be used to show a set of Milestones associated with a Project, shipping status for an Order or Opportunity Stage history. The ProjectMilestones Visualforce page in the Mobile Templates Jumpstarter sample app shows an example of this template in action.

All time points are added as <li> elements to the following <ul> element.

<ul class="list-view list-view-milestones">
</ul>

In addition to the common Header component, this template is composed of the following components.

Completed

Add the complete CSS style class to the <li> child element to display a completed/past time-point in the timeline.

Detail View

Detail View templates provide various read-only views of a standard or custom data record. Typically, users will navigate to one of these detail views by clicking on a record in a List View.

Detail View 1

In addition to the common Header component, this template is composed of the following components.

Banner Section

This component should be used to display the most important information related to the record. For example, this template shows the Icon and Name associated with an Account record. It is assumed that the Icon is stored as an Attachment related to the Account record.

Quick Action Menu

This optional component provides a limited set of “Quick Actions” that a user can perform on a specific record type. The specific set of Quick Actions depend on the sObject and mobile use case and is therefore left to the developer. For example, since this template shows an Account record, it includes Quick Action icons for taking a Note and showing the Account address on the mobile map application (a common mobile use case for Account data).

Quick Action links can be added to the Banner Section with the following markup.

By default, clicking on any Quick Action icon shows a simple modal dialog box. (Click on any of the icons on the right for an example.) Developers should customize the actual action that occurs with each Quick Action depending on the specific mobile app and use case.

The new Chatter Publisher Actions feature is a perfect complement to this concept of Quick Actions. You could define an object-specific or Global Publisher Action in Salesforce (for example, quick create of an Opportunity record), and then invoke that Publisher Action via the Salesforce REST API when a user clicks on the corresponding Quick Action on the Detail View.

Data section

This component can be used to display selected fields from its respective sObject. For example, the following markup shows the Billing Address for an Account record:

Summary section

This component can be used to display important roll-up summary data from one or more related child objects. For example, this template shows the total number of open Cases related to an Account. A summary section can be made clickable via an <a> link and developers can navigate users to a list of related child records (using one of the List View templates) on click.

Similarly, the two-buttons style can be used to display two buttons in this section.

Detail View 2

In addition to the common Header component, this template is composed of the following components.

Banner Section

Similar to the Banner Section in Detail View 1, this component is used to display the most important information related to the record. For example, this template shows the Opportunity Name and Account associated with an Opportunity record.

Quick Action Menu

Similar to the Quick Action panel in Detail View 1, this component allows a limited set of “Quick Actions” that a user is likely to perform from a mobile device. For example, since this template shows an Opportunity record, it includes Quick Action icons for taking a Note, updating Opportunity Stage and marking an Opportunity as Closed Won or Closed Lost.

Data Section

Similar to the Data Section in Detail View 1, this component is used to display the selected fields from the respective sObject. For example, this template shows the Opportunity Name and Account associated with an Opportunity record.

Additionally, this template also includes two unique visual elements for displaying a Picklist field that implies a progression (such as Opportunity Stage) and a Percentage field (Probability). These elements can be used in any Detail View that displays those two field types.

Action Buttons

Detail View 3

In addition to the common Header component, this template is composed of the following components.

Banner Section

Similar to the Banner Section in Detail View 1, this component is used to display the most important information related to the record. For example, this template shows the Order Number and Status associated with a (custom) Order record.

The status CSS style used above can be used to display a Red/Yellow/Green status value.

Quick Action Menu

Similar to the Quick Action panel in Detail View 1, this component allows a limited set of “Quick Actions” that a user is likely to perform from a mobile device. For example, since this template shows an Order record, it includes Quick Action icons for showing the Order Status history (which can be implemented using the Timeline List View), canceling an order and contacting support.

Data Section

Similar to the Data Section in Detail View 1, this component is used to display selected fields from the respective sObject. For example, this template shows the order amount and delivery date associated with the Order record, the account name and billing address.

Related List Section

Similar to the Related List Section in Detail View 1, this component can be used to display related child records. For example, this template shows the Products related to the Order record.

Action Buttons

Data Input

Data Input templates use basic HTML5 form elements to capture user input from a phone. The different form elements included in these templates (phone, date, number, text, etc.) can be used in any mobile app that requires users to add or update Salesforce data.

In addition to the Previous and Next navigation buttons, a finish style class can be used to display a Finish button in the Survey template.

Map View

Map View templates provide Google Map-based designs for implementing the common ‘Find Nearby’ functionality on a mobile device. These templates can be combined with the Geolocation custom field in Salesforce and its corresponding SOQL companion to add geolocation functionality to any web or hybrid mobile app.

Map View 1

This template displays a list of data records (Contacts in this example) on the top half of the page, and the location of any selected data record on the bottom half of the page. Developers can use the HTML5 Geolocation feature and a SOQL distance query to find nearby data to display on the top half of the page. When a user selects any record from the list, the corresponding lat/long coordinates are displayed in the Google Map on the bottom half of the page. A user can also click on the selected address in the Google Map to launch the native Map application (iOS or Android) on the device.

In addition to the common Header component, this template is composed of the following components.

List

The list section displays the data set that is typically queried from Salesforce.

This Google Map interaction is implemented in the main.js script file. Some minor JavaScript initialization code is required in order to pass the lat/long coordinates for each of the records displayed in the List section to the mapObj object in main.js.

Note the maps.apple.com link passed to the contentString variable. If viewed on an iPhone, this will launch the native iOS Map application when the user clicks on the corresponding address on the Google Map (for directions, etc.). A different URL can be used to achieve the equivalent functionality on an Android device.

Map View 2

This template provides an alternative implementation for the ‘Find Nearby’ use case. The page shows the current location of the device on a Google Map (using the HTML5 Geolocation feature) as well as a set of nearby data points. As with the previous template, these nearby data records will typically be retrieved via a SOQL distance query. A user can also click on any marker on the Google Map to launch the native Map application (iOS or Android) on the device.

In addition to the common Header component, this template is composed of the following components.

Map

A simple container <div> tag is required to host the Google Map on the page.

<div id="map-canvas-wrapper">&nbsp;</div>

The Google Map interaction is implemented in the main.js script file. Some minor JavaScript initialization code is required in order to pass the lat/long coordinates for the nearby records to the mapObj object in main.js.

Note the use of the tasks and events style classes to display the Tasks and Events in different colors on the page. The <a> links included in this section can be used by developers to navigate a user to the Detail View of the respective Task or Event record.

The logic to display the correct set of Tasks and Events to display for a given day is encapsulated in the main.js file.

To-do Tasks

This template provides a mobile optimized view of a user’s pending Tasks. Tasks are grouped by Today, This Week and This Month for fast and intuitive access. Overdue Tasks are displayed with a red bar and user's can quickly mark a Task as complete by clicking on the checkbox next to the Task entry.

In addition to the common Header component, this template is composed of the following components.

Tab component

This component is used to group a user's pending Tasks by Today, This Week and This Month.

Marking a Task as overdue

To mark a Task as overdue, simply add the overdue style class to the <li> tag.

<li class="overdue">

Completing a Task

The template uses some JavaScript in the main.js file to achieve the strikeout effect when a user clicks on the checkbox to complete a task.

Reports & Dashboards

Dashboard templates provide mobile optimized report views of Salesforce data. These templates are developed using the open-Source D3 charting library and developers can combine them with the Salesforce Analytics API to add reporting capabilities to their mobile apps.

Developers should replace this hard-coded data with live Salesforce reporting data using a call to the Analytics API. Developers can also peruse the main.js script for the JavaScript logic used to render the D3 Gauge chart.

Donut

The Donut template uses the D3 Donut Chart to provide a distribution view of Salesforce data.

Developers should replace this hard-coded data with live Salesforce reporting data via a call to the Analytics API. Developers can also peruse the main.js script for the JavaScript logic used to render the D3 Donut chart.

Developers should replace this hard coded-data with live Salesforce reporting data via a call to the Analytics API. Developers can also peruse the main.js script for the JavaScript logic used to render the D3 Bar Chart.

Developers should replace this hard-coded data with live Salesforce reporting data via a call to the Analytics API. Developers can also peruse the main.js script for the JavaScript logic used to render the D3 Line Chart.

Miscellaneous

This category of templates provides simple designs for functionality common to most mobile apps. Developers can take these templates as a starting point to add a Settings, Splash or About screen to their mobile app.

Settings Screen

Use this template to allow a user to view and update the settings associated with your mobile app.