Mobile Templates

Mobile Design Templates

Quickly build engaging enterprise mobile apps with high-impact visual design templates that utilize mobile-optimized HTML5 and CSS3. Combine these modular design templates with Salesforce Platform Mobile Services and Developer Mobile Packs to view, edit and update customer data, view backend reports, find nearby records, and more. Take advantage of these customizable, open-source templates and focus on building engaging mobile apps for your customers, employees, and partners.

Key Features
  • Modular and customizable open-source CSS3 and HTML5 markup that can be modified at will to meet the specific UI/UX requirements of a mobile app.
  • Combine these static templates with a JavaScript library like ForceTk or one of the Mobile Packs for Backbone, Angular or Knockout to provide live data bindings with any Salesforce backend.
  • Cross-platform (iOS, Android etc.) support courtesy of the use of standard web technologies like HTML5, CSS3 and JavaScript.
  • Optimized for the phone form factor.
  • Use-case agnostic. The base HTML5/CSS3 can be modified to work with any Salesforce object (Standard or Custom) in the context of any mobile use case.
Quick Links

List View

List View templates provide different visual representations for showing a list of Standard or Custom Salesforce records.

Picture

The Picture List View template can be used to display any data that has a picture associated with it (Contact, User, Product, etc.). The MyContacts Visualforce page of the Mobile Templates Jumpstarter sample app shows an example of this template in action.

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.

        <nav id="main-menu" class="main-menu">
            <a href="#">Something</a>
            <a href="#">Something</a>
            <a href="#">Something</a>
        </nav>

        <header>
            <div id="main-menu-button-left"
            class="main-menu-button main-menu-button-left">
                <a class="menu">&nbsp;</a>
            </div>
            <div id="main-menu-button-right"
            class="main-menu-button main-menu-button-right">
                <a class="gear">&nbsp;</a>
            </div>
            <h1>Contacts</h1>
        </header>

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.

        <ul class="list-view left-thumbs right-one-icons">
            <li>
                <div class="thumbs">
        <img class="thumb thumb-3" src="images/placeholders/contact-2.png">
                </div>
                <a href="#" class="content">
                    <h2>Rachel Aarons</h2>
                    Project Manager
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>
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.

        <ul class="list-view with-swipe left-thumbs right-one-icons">
            <li>
                <div class="thumbs">
                    <a href="#" class="thumb thumb-1"><img class="thumb" src="images/icons/tile-phone.png" ></a>
                    <a href="#" class="thumb thumb-2"><img class="thumb" src="images/icons/tile-email.png" ></a>
                    <img class="thumb thumb-3" src="images/placeholders/contact-2.png">
                </div>
                <a href="#" class="content">
                    <h2>Rachel Aarons</h2>
                    Project Manager
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>

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.

        <ul class="list-view collapsable left-thumbs right-one-icons">
            <li>
                <div class="thumbs">
                    <img class="thumb" src="images/placeholders/account-0.png">
                </div>
                <div class="content">
                    <h1>Acme Inc</h1>
                    <div class="list-view-icons">
                        <span class="icon-plus">&nbsp;</span>
                    </div>
                </div>
            </li>
        </ul>
List Element

In order to add list items to a collapsible section, add the following markup to the parent <li> tag.

        <ul class="list-view right-one-icons">
            <li>
                <div class="content">
                    <h2>John Broker</h2>
                    Retail Sales
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="content">
                    <h2>Allison Amin</h2>
                    Executive Assistant
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </div>
            </li>
        </ul>

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.

        <ul class="list-view right-one-icons">
            <li>
                <a href="#" class="content">
                    <h2>Acme 1,200 Widgets</h2>
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="content">
                    <h2>100 Servers</h2>
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>
 

Add additional markup to the <li> element to display additional information for each list element. For example the following markup adds the Opportunity Amount and Stage to the list view.

        <li>
            <a href="#" class="content">
             <h2>Acme 1,200 Widgets</h2>
                <p>
                    <strong>$24,000</strong><br/>
                    Value Proposition
                </p>
                <div class="list-view-icons">
                    <span class="icon-right-arrow">&nbsp;</span>
                </div>
            </a>
        </li>
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.

Tab Component

The following markup adds tabs to the view.

        <div id="tabbed-list-view-nav" class="tabbed-list-view-nav">
            <a href="#" class="span-50 on">Red Fish</a>
            <a href="#" class="span-50">Blue Fish</a>
            <div id="tabbed-list-view-nav-arrow" class="tabbed-list-view-nav-arrow">&nbsp;</div>
        </div>

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.

        <ul id="tabbed-list-view" class="tabbed-list-view">
        <li>
            <ul class="list-view left-thumbs right-one-icons">
                <li>
                    <div class="thumbs">
                        <img class="thumb thumb-3" src="images/placeholders/contact-2.png">
                    </div><!-- .thumbs -->
                    <a href="#" class="content">
                        <h2>Rachel Aarons</h2>
                        Project Manager
                        <div class="list-view-icons">
                            <span class="icon-right-arrow">&nbsp;</span>
                        </div>
                    </a>
                </li>
                <li>
                    <div class="thumbs">
                        <img class="thumb thumb-3" src="images/placeholders/contact-3.png">
                    </div><!-- .thumbs -->
                    <a href="#" class="content">
                        <h2>Nathan An</h2>
                        Public Relations
                        <div class="list-view-icons">
                            <span class="icon-right-arrow">&nbsp;</span>
                        </div>
                    </a>
                </li>
            </ul>
        </li>
        </ul>

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.

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:

        <script type="text/javascript">
        $(document).ready(function() {
            var slides = [
                    {
                        img: 'images/placeholders/gallery/pic01.png',
                        width: 1017,
                        height: 699,
                        desc: '<h3>A Product</h3>$341.12'
                    }
                ];

            carouselObj.init({
                container: "#carousel-wrapper",
                slides: slides
            });
        });

        </script>

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.

        <li class="complete">
          <div class="content">
           <div class="date">07/13/2013</div>
           <div class="objective">
            Milestone Objective Text
           </div>
          </div>
         </li>

As shown above, the date and objective CSS classes can be used to display the date and text associated with the time-point.

Current

Add the current CSS style class to the <li> child element to display the current time-point.

        <li class="current">
          <div class="content">
           <div class="date">07/13/2013</div>
           <div class="objective">
            Milestone Objective Text
           </div>
          </div>
         </li>
Future

Add the future CSS style class to the <li> child element to display future time-points.

        <li class="future">
          <div class="content">
           <div class="date">07/13/2013</div>
           <div class="objective">
            Milestone Objective Text
           </div>
          </div>
         </li>

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.

        <div class="detail-view-header left-thumb">
            <div class="content">
                <img class="thumb" src="images/placeholders/account-0.png">
                <h1>Acme</h1>
            </div>
        </div>
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.

        <div class="detail-view-header left-thumb with-action-panel">
            <div class="content">
                <img class="thumb" src="images/placeholders/account-0.png">
                <h1>Acme</h1>
                <div class="detail-view-action-panel">
                    <a href="#" class="action-note open-modal">&nbsp;</a>
                    <a href="#" class="action-map open-modal">&nbsp;</a>
                </div>
            </div>
        </div>

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:

        <section class="border-bottom">
            <div class="content">
                <h3>Billing Address</h3>
                <p>
                    1 Main Street<br/>
                    San Francisco, CA 94105<br/>
                    USA
                </p>
            </div>
        </section>
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.

        <ul class="list-view right-one-icons large-padding">
            <li>
                <a href="#" class="content">
                    <h3>Cases</h3>
                    <h1 class="inline">12</h1> open cases
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>

This component can be used to display related child records. For example, this template shows a list of Contact records related to an Account.

        <section class="border-top">
            <div class="content">
               <h3>Key Contacts</h3>
                <p>
                    <a href="#">John Stamos</a><br/>
                    IT Man
                </p>
                <p class="no-bottom-padding">
                    <a href="#">Jennifer Lopez</a><br/>
                    Diva
                </p>
            </div>
        </section>

Each related child record can be made clickable via a <a> link and the user can be directed to the respective Detail View for that child record on click.

Action Buttons

This component can be used to display one or more action buttons (like Edit, Delete, etc.).

        <section class="data-capture-buttons one-buttons">
            <div class="content">
                <a href="#">edit</a>
            </div>
        </section>

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.

        <section class="opportunity-overview">
            <div class="content">
                <h1>$34,100</h1>
                Close date 07/11/2013
            </div>
        </section>

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.

        <section>
            <div class="content">
                <div class="progress-dotted" data-completed="4/10">
                    <div class="progress-dotted-label">Some Milestone</div>
                </div>

                <div class="progress-bar" data-completed="27">&nbsp;</div>
                <h1 class="inline">27%</h1> probability
            </div>
        </section>

The template uses some JavaScript and the data-completed attribute to display the progression and percentage values.

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 Activity History for the Opportunity record.

Action Buttons

Similar to the Action Buttons in Detail View 1, this component can be used to display one or more action buttons (like Edit, Delete, etc.).

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.

        <div class="detail-view-header with-action-panel">
            <div class="content">
                <h1>#310129123</h1>
                <div class="status status-red"><span class="status-dot">&nbsp;</span>Processing</div>
             </div>
        </div>

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.

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

Similar to the Action Buttons in Detail View 1, this component can be used to display one or more action buttons (like Edit, Delete, etc.).

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.

Standard

The Standard Data Input template includes all the basic HTML5 form elements to capture user input. The InspectionReport Visualforce page of the Mobile Templates Jumpstarter sample app shows an example of this template in action.

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

Text

Add the following markup to accept text input.

        <section class="border-bottom">
         <div class="content">
          <h3>Hotel Name</h3>
          <div class="form-control-group">
           <div class="form-control form-control-text">
            <input type="text" name="text">
           </div>
          </div>
         </div>
        </section>
Date

Add the following markup to accept date input.

        <section class="border-bottom">
         <div class="content">
          <h3>Inspection Date</h3>
          <div class="form-control-group">
           <div class="form-control form-control-date">
            <input type="date" name="date">
           </div>
          </div>
         </div>
        </section>
Toggle

Add the following markup to accept a toggle (Checkbox) input. Use the data-on-label and data-off-label attributes to control the text that appears for the on/off positions of the toggle.

        <section class="border-bottom">
         <div class="content">
          <h3>Passed</h3>
          <div class="form-control-group">
           <div class="form-control form-control-toggle" data-on-label="yes" data-off-label="no">
            <input type="checkbox" name="toggle">
           </div>
          </div>
         </div>
        </section>
Textarea

Add the following markup to accept long textarea input.

        <section class="border-bottom">
         <div class="content">
          <h3>Remarks</h3>
          <div class="form-control-group">
           <div class="form-control form-control-textarea">
            <textarea></textarea>
           </div>
          </div>
         </div>
        </section>
Multi-select

Add the following markup to accept a multi-select Picklist value.

        <section class="border-bottom">
         <div class="content">
          <h3>Room Types</h3>
          <div class="span-50 form-control-group">
           <div class="form-control form-control-checkbox">
           <input type="checkbox"><label>Single</label>
           </div>
           <div class="form-control form-control-checkbox">
           <input type="checkbox"><label>Double</label>
           </div>
          </div>
          <div class="span-50 form-control-group">
           <div class="form-control form-control-checkbox">
           <input type="checkbox"><label>Suite</label>
           </div>
          </div>
         </div>
        </section>
Picklist/Select

Add the following markup to accept a Picklist value.

        <section class="border-bottom">
         <div class="content">
          <h3>Hotel Type</h3>
          <div class="form-control-group">
           <div class="form-control form-control-select">
            <select>
             <option>Owner Operated</option>
             <option>Co-op</option>
             <option>Pure Anarchy</option>
            </select>
           </div>
          </div>
         </div>
        </section>
Number

Add the following markup to accept a number value.

        <section >
         <div class="content">
          <h3>Number of Rooms</h3>
          <div class="form-control-group">
           <div class="form-control form-control-number">
           <input type="number" >
           </div>
          </div>
         </div>
        </section>
Action Buttons

Add the following markup to display one or more action buttons (like Submit, Edit, Delete, etc.).

        <section class="data-capture-buttons one-buttons">
         <div class="content">
             <a href="#">submit</a>
            </div>
        </section>

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

Survey

The Survey Data Input template provides a sample design for capturing simple survey responses from a mobile device. The Take_Survey Visualforce page of the Mobile Templates Jumpstarter sample app shows an example of this template in action.

All the form elements used in this template are common to the previous Standard Data Input template, except for the following two components.

Toggle

Similar to the Toggle control used in the Standard Data Input template, the following markup allows users to provide Yes/No type binary input:

        <section>
         <div class="content">
          <form>
           <div class="form-header-survey">Question 1<span class="color-menu-blue">/4</span></div>
           <p>Morbi id urna in diam dignissim feugiat?</p>
           <div class="form-control-group">
            <div class="form-control form-control-radio form-control-radio-thumbs span-50">
             <input type="radio" name="name" value="yes"><label class="thumbs thumbs-up">&nbsp;</label>
            </div>
            <div class="form-control form-control-radio form-control-radio-thumbs span-50">
             <input type="radio" name="name" value="no"><label class="thumbs thumbs-down">&nbsp;</label>
            </div>
           </div>
          </form>
         </div>
        </section>
Navigation Buttons

The Previous and Next navigation buttons provide an alternative styling to the Action buttons used in the Standard Data Input template.

        <section class="form-navigation-buttons">
         <div class="content">
          <a href="#" class="span-50 previous">previous</a>
          <a href="#" class="span-50 next">next</a>     
         </div>
        </section>

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.

        <ul class="list-view left-thumbs right-one-icons">
            <li>
                <div class="thumbs">
                    <img class="thumb" src="images/placeholders/contact-2.png">
                </div>
                <a href="#" class="content" data-map-id="0">
                    <h2>Rachel Aarons</h2>
                    Project Manager
                    <div class="list-view-icons">
                        <span class="icon-map-dot">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>
Map

Clicking on any record in the List section shows a marker on the Google Map for the corresponding lat/long coordinates (try it on the right).

        <div id="map-canvas-wrapper" class="map-canvas-wrapper map-canvas-wrapper-list-view">
        </div>

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.

        var markers = [
                {
                    id: 0,
                    lat: 47.604789,
                    lng: -122.335682,
                    contentString: "<div class='infowindow-container'><p class='span-50'><strong>Address</strong><br/><a href='https://maps.apple.com/maps?q=47.620513,-122.34861'>555 Madison Ave<br/>Seattle, WA<br/>98105</a></p><p class='span-50'><strong>Phone</strong><br/>555.123.4321</p></div>"
                } ];

        mapObj.init({
            view: "listView",
            markers: markers
         });

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.

        var markers = [
            {
                id: 0,
                lat: 47.604789,
                lng: -122.335682,
                contentString: "<div class='infowindow-container'><p class='span-50'><strong>Address</strong><br/><a href='https://maps.apple.com/maps?q=47.620513,-122.34861'>555 Madison Ave<br/>Seattle, WA<br/>98105</a></p><p class='span-50'><strong>Phone</strong><br/>555.123.4321</p></div>"
            } ];

        mapObj.init({
            view: "listView",
            markers: markers
        });

Calendar View

Calendar View templates provide mobile optimized views of a user’s Salesforce calendar (Tasks and Events).

Day Calendar

This template provides a mobile optimized view of a user’s scheduled Tasks and Events in Salesforce.

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

Week View

This component displays the current week on the left half of the page. Each scheduled Task is displayed as a dark brown dot and each Event as a light brown dot for any given day of the week.

        <div class="span-50 padding-right-gutter-half">
            <h1 class="padding-bottom-gutter">My Week</h1>
            <ul class="week-planner">
                <li data-date="06-20">
                    <div class="date">06/20</div>
                    <ul class="week-planner-items">
                        <li class="event"></li>
                        <li class="event"></li>
                        <li class="task"></li>
                        <li class="task"></li>
                    </ul>
                </li>
            </ul>
        </div>

Note the use of the week-planner-items, event and task style classes in the <ul> and <li> tags to display the list of Tasks and Events as dots.

Calendar Entries

This component displays the detailed list of Tasks and Events on the right half of the page when a user selects a particular date in the Week View. (Try it on the right.)

        <div class="span-50 padding-left-gutter-half">
            <div class="date-content" id="date-content-06-20">
                <h1 class="event">Events</h1>
                <div class="events">
                    <h3>Weekly Sales meeting</h3>
                    <p>
                        10:00AM - 11:00AM<br/>
                        <a href="#">John Doe</a><br/>
                        <a href="#">Opportunity #1232213</a>
                    </p>
                </div>
                <h1 class="task">Tasks</h1>
                <div class="tasks">
                    <h3>Weekly Sales meeting</h3>
                    <p>
                        <a href="#">John Doe</a><br/>
                        <a href="#">Opportunity #1232213</a>
                    </p>
                </div>
            </div>
         </div>

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.

        <div id="tabbed-list-view-nav" class="tabbed-list-view-nav">
            <a href="#" class="span-33 on">Today</a>
            <a href="#" class="span-33">This Week</a>
            <a href="#" class="span-33">This Month</a>
            <div id="tabbed-list-view-nav-arrow" class="tabbed-list-view-nav-arrow">&nbsp;</div>
        </div>

Note that this is the same Tab component that is used in the Tabbed List View template.

Tasks

The component displays a list of pending Tasks. Each Task can be added to the list using the following markup.

        <ul class="list-view list-view-tasks">
            <li>
                <div class="content">
                    <div class="task-complete-checkbox">
                        <input type="checkbox" name="checkbox" />
                    </div>
                    <div class="date">07/14</div>   
                    <h2>Call Mathew</h2>
                    <p><a href="#">Matthew Smith</a></p>
                    <p>Re: <a href="#">System Updates</a></p>
                </div>
            </li>
        </ul>
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.

The InventoryReport Visualforce page of the Mobile Templates Jumpstarter sample app shows an example of using these templates to display mobile optimized reports.

Gauge

The Gauge template uses the D3 Gauge Chart to provide a Gauge view of a Salesforce Report.

        <section>
         <div class="content">
          <div id="graph" class="graph"></div>
         </div>
        </section>

The Gauge chart is currently initialized with some hard-coded data.

        $(document).ready(function() {
            reportObj.init({
                graphType: "gauge",
                width: 300,
                gauge: {
                    max: 5000,
                    value: 1202
                }
            });
        });

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.

        <section>
         <div class="content">
          <div id="graph" class="graph"></div>
         </div>
        </section>

The Donut chart is currently initialized with some hard-coded JSON data.

        $(document).ready(function() {
            reportObj.init({
                graphType: "donut",
                jsonURL: "json/survey.json"
            });
        });

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.

Bar Chart

The Bar Chart template is based on the D3 Bar Chart.

        <section>
         <div class="content">
          <div id="graph" class="graph"></div>
         </div>
        </section>

The Bar Chart is currently initialized with some hard coded JSON data.

        $(document).ready(function() {
            reportObj.init({
                graphType: "bar",
                jsonURL: "json/produts.json",
                axis : {
                    xAxisIndex: "name",
                    yAxisIndex: "inventory"
                }
            });
        });

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.

Line Chart

The Line Chart template is based on the D3 Line Chart.

        <section>
         <div class="content">
          <div id="graph" class="graph"></div>
         </div>
        </section>

The Line Chart is currently initialized with some hard coded JSON data.

        $(document).ready(function() {
            reportObj.init({
                graphType: "line",
                jsonURL: "json/sales.json",
                line: {
                    periods : [10, 30]
                },
                axis: {
                    xAxisIndex: "date",
                    yAxisIndex: "total"
                }
            });
        });

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.

        <div class="list-view-header">Screen Security</div>
        <section>
            <div class="content">
                <div class="span-66 settings settings-left">
                    <h3>Screen Lock</h3>
                </div>
                <div class="span-33 settings settings-right">
                    <div class="form-control-group">
                        <div class="form-control form-control-toggle" data-on-label="on" data-off-label="off">
                            <input type="checkbox" name="toggle">
                        </div>
                    </div>
                </div>
            </div>
        </section>

The form elements used in this template are the same as those in the Standard Data Input template.

Splash screen

Use this template to show an initial custom branded splash screen when a user first launches the mobile app.

        <div class="splash-screen-wrapper">
            <div class="content">
                <div class="logo">
                    <img src="images/placeholders/logo.png" width="206" height="54" >
                </div>
                <div class="tagline">
                    Acme Inc Mobile App
                </div>
            </div>
        </div>
About screen

Use this template to show an About screen with credits for the mobile app.

        <div class="detail-view-header detail-view-header-about">
            <div class="content">
                <img src="images/placeholders/logo.png" width="206" height="54" >
                <div class="version">App Version 2.13</div>
                <div class="description">Some Description</div>
            </div>
        </div>

        <ul class="list-view right-one-icons padding-top-gutter">
            <li>
                <a href="#" class="content">
                    <h2>Rate this App</h2>
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>

*Page design inspired by Ratchet

Device