Mobile Design Templates FAQ

Q: How do I download these templates?

Mobile Design Templates are an open-source project and can be downloaded from this GitHub repo.

Q: Which Mobile OS do these templates support?

Since all the templates are based on standard web technologies like HTML5, CSS3 and JavaScript, they are cross-platform and can run on any mobile OS (iOS, Android etc.) that supports a modern web browser. However, the templates have currently only been tested on iOS 6.0 and above and Android 4.0 and above.

These web templates can also be used in a Cordova based Hybrid iOS and/or Android application built using the Salesforce Mobile SDK.

Q: Which mobile use cases and SObjects can I use these templates for?

The templates are use case agnostic. Though some templates default to a particular Standard (e.g. Contact or Opportunity) or Custom (e.g. Invoice, Project) Object for illustrative purposes, they can easily be modified to work with any dataset and use case.

For example, though the Picture List View template shows a list of Contacts, it is meant to be a general purpose template for showing a list of any data in Salesforce that has images associated with it (e.g. Users, Products etc.). Similarly, though the Standard Data Capture template shows a sample Hotel Inspection report, it has general HTML5 form elements for all the basic Salesforce field types - Checkbox, Text, Picklist etc. Those form elements can be reused in any mobile web/hybrid app to capture user input.

Q: Can I use these templates in a Tablet app?

Each template is optimized for the phone form factor. Though these templates will display on a tablet (by virtue of being based on HTML5), they not inherently responsive or optimized for that form factor. Future templates are planned to address the tablet form factor specifically.

Q: Are the templates based on any existing CSS or JavaScript framework like Twitter Bootstrap, Ratchet or jQuery Mobile?

The templates are not based on any existing mobile CSS or JavaScript framework. They use plain vanilla HTML5 and CSS3. The templates also use jQuery 2.0.2 to enable basic DOM manipulation.

Q: Can these templates be used in a hybrid application built using PhoneGap/Cordova?

Yes. Since all the templates use standard web technologies like HTML5, CSS3 and JavaScript, they can be used in any Cordova based Hybrid iOS and/or Android application built using the Salesforce Mobile SDK.

Q: Can I use these templates with jQuery Mobile?

Yes and no. Templates like the List View, Detail View and Data Input replicate functionality that is also provided by jQuery Mobile. These templates therefore cannot be easily combined with jQuery Mobile.

Other templates like the Map View, Reports/Dashboards and Miscellaneous however are complementary to jQuery Mobile and can be used in an app built using that framework.

Q: Can I use these templates with JavaScript MVC frameworks like AngularJS, Backbone or Knockout?

Yes, and in most cases, you have to. Since each template uses static/hard-coded data, developers are expected to combine these templates with a JavaScript library like ForceTk or one of the Mobile Packs for Backbone, Angular or Knockout to provide data bindings with a Salesforce backend. The HTML5/CSS3 provided by the templates can therefore be used in an Angular Template/Partial or a Backbone View to build a complete mobile app.

Q: Can I use these templates with CSS frameworks like Bootstrap?

No. The templates provide their own CSS that cannot to mixed with a framework like Twitter Bootstrap.

Q: Can I use these templates with Visualforce?

Yes. This blog post describes how to use the Mobile Design Templates in a Visualforce page.

Q: How do I bind live Salesforce data to these templates?

Typically by combining the HTML/CSS from the template with some JavaScript code that queries and updates data from Salesforce. Developers can either use the JavaScript wrapper for the REST API (aka ForceTk) to perform this data binding, or use one of the Mobile Packs for AngularJS, Backbone or Knockout depending on the use case.

The Mobile Templates Jumpstarter sample app shows an example of a mobile app that combines the templates with the Backbone Mobile Pack to perform the data binding with Salesforce.

Q: Can multiple templates be used in a single mobile app?

Yes. For example, clicking on a record in a List View template can navigate the user to a page built using a Detail View template. Clicking on the ‘Edit’ button of a Detail View can navigate the user to a page built using the Data Input template. One of the Map View templates can then be added to the app to support a ‘Find Nearby’ use case. And so on.

Each template is a single-page ‘lego block’ that can be mixed and matched with other templates to develop complete mobile apps.

Q: Can I customize the look and feel of these templates by modifying the CSS?

Yes. The open-source CSS used in the templates can and should be modified to meet the specific UI/UX requirements of a mobile app.

For example, say you needed to the Dollar Amount in the Detail View 2 template to be shown in green. Simply change the ‘color’ CSS attribute of the H1 element.  Similarly, say you wanted to display a custom ‘Quick Action’ icon on the top right of the Detail View 2 template to match your specific use case/app. Simple create a new icon image and change the background-image CSS attribute of the a.action-note element to point to the new PNG.

The CSS used in the Mobile Design Templates was generated using Saas. Developers and designers can therefore choose to customize the CSS directly, or manipulate the Saas (using tool like Compass).

Q: What license are these templates distributed under?

The Mobile Design Templates are distributed under a BSD-3 license.

Q: What do I do if I find a bug or have an enhancement request for one of the templates?

The Mobile Design Templates are available via GitHub. In order to file a bug, create a new Issue in GitHub with as much detail as possible on how to recreate the issue.

Since the templates are an open-source, we encourage developers to share any enhancements/improvements they make with the rest of the community. Simply send us a Pull request and we’ll take it from there.