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?
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: Can these templates be used in a hybrid application built using PhoneGap/Cordova?
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.
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?
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.
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.