Uber is one of my favorite mobile apps. Not only is it a great concept (“Everyone’s Private Driver”), but the app also has a great UI and UX experience (yes, they are different). It asks for the absolute minimum user input and infers the rest via a combination of the mobile context (current location) and some backend data (payment options etc). The UI/UX for the average enterprise mobile app is a far cry from the high bar set by consumer focused apps like Uber. It doesn’t and shouldn’t have to be that way. Users will bucket an app in the “have to” vs “want to” usage category without a compelling UI/UX experience, and that is not a healthy foundation for any enterprise mobile strategy. Many IT departments however don’t have dedicated mobile designers, and developers (this one included) usually don’t make great designers. Something has to change.
Our recent Mobile Services release introduced Mobile Design Templates, an open-source library of 22 visually striking, mobile-optimized HTML5 and CSS3 markup for common mobile use cases of interacting with Salesforce data. There are templates to view and edit customer data, view backend reports, find nearby records, and much more. Developers can customize and reuse these templates at will to meet the specific UI/UX requirements of their mobile app. Being able to use these open-source templates as a starting point for their UI/UX design should dramatically shorten the time it takes to develop a great looking web/hybrid app on the Salesforce Platform. Here are some other important tidbits about the design templates.
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.
Here’s a short video that walks you through the basics of how and when to use to the Mobile Design Templates to build compelling web and hybrid mobile apps on the Salesforce Platform.
IFRAME Embed for Youtube
Tip: Watch the video in 720p HD resolution by clicking on the gear icon in YouTube.
Getting Started
The quickest way to get started with the Mobile Design Templates is via their interactive home page. As you scroll down the page, you’ll see each template broken down into its constituent HTML5/CSS3 components. The phone image on the right will also update with each template/section making the whole learning process more visual and easier to follow. Check it out. As the ad claims, you’ll like it - I guarantee it (here’s hoping that I don’t meet the same fate as that pitchman).
In addition to the interactive home page, you can read this FAQ, download the project from GitHub and quickly peruse all the templates in this gallery.
Sample App Use Case
In the remainder of this blog post, I’ll review how I built a simple mobile web app in Visualforce using the Picture List View template to view Contact records in Salesforce. List View templates provide different visual representations for showing a list of Standard or Custom Salesforce records and the Picture List View template in particular can be used to display any data that has a picture associated with it (Contact, User, Product, etc.). The template also has an optional feature whereby a swipe-right on any image in the list reveals some ‘Quick Action’ icons. 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). Here’s a screenshot of the completed Visualforce page. You can also peruse the entire codebase for this sample app in the Sample Apps directory of the GitHub repo.
I’ll build on this basic app over the next couple of blog posts and show you how to combine multiple templates into an end-to-end, fully featured mobile app. Note also that while the Picture List View template and this sample app uses Contacts as an example, every mobile design template is use case agnostic and can be modified and reused with any Salesforce object (Standard or Custom) in the context of any mobile use case.
Using Mobile Design Templates in Visualforce
Lets start with how you can use any of the templates in a mobile optimized Visualforce page. The first step is to download the templates project from GitHub. You can do so by executing the following from the command line.
If you don’t have Git installed, you can also click on the ‘Download ZIP’ icon on the right of the repo home page and download the project as a zip file. Next, upload the templates zip file as a Static Resource in your DE Org. Finally, lets look at our Visualforce page skeleton that imports the necessary JavaScript and CSS from the templates Static Resource zip.
The two most important imports for using the mobile templates in a web page are app.min.css and main.min.js (note that the GitHub project also has the uncompressed versions of these files for easier review). These two files respectively define the CSS and minimal JavaScript required to render the templates. In addition to these two files, the templates also require jQuery 2.0.2 (for basic DOM manipulation in main.min.js). The Picture List View Template used in this sample also requires a small JS library (jquery.touchwipe.min.js) to enable touch gestures in the List View.
In addition to the JS and CSS imports, note the use of the HTML5 doctype and the disabling of the standard stylesheets, header and sidebar in the Visualforce page. This is a way to make the page mobile optimized and load faster on a mobile device.
Data binding with the Mobile Design Templates
All Mobile Design Templates in the GitHub repo use static/hard-coded data for illustrative purposes. This helps a new developer quickly review the overall UI/UX offered by a template and determine if its a good starting point for their own mobile use case/app. However, in order to use a template in an actual mobile app, the HTML5/CSS3 markup has to be populated with live data from Salesforce. In the case of this sample app, we need to query a list of Contact records from Salesforce and then build out the appropriate page markup. There are several options for a developer to bind these mobile web templates to Salesforce data.
JavaScript Remoting when the templates are used in a Visualforce page
JavaScript wrapper for the REST API (aka ForceTK) to perform CRUD access to Salesforce data from a template Visualforce or web page
Mobile Packs for Backbone, Angular or Knockout when the templates are used in an app built using one of those MV* frameworks.
In the interest of keeping things simple, I’ve used JavaScript Remoting in this sample to query the list of Contact records. Before I dive deeper into the data binding code, lets quickly review how I store the Contact pics in Salesforce. Since the Contact Standard Object does not have a native picture field, I created a Rich Text Custom Field (Contact_Pic__c) and used it to upload thumbnail images to Contact records. You can also upload images as Attachment or Chatter Files and then use a combination of Formula Fields and trigger/API logic to store and display the images.
Next, lets review how to query and display a dynamic list of Contact records using the Picture List View Template.
Using JavaScript Remoting to query Contact records
The following markup shows how I use JavaScript Remoting to provide the data binding for the page.
The getAllContacts JavaScript method invokes the getContactRecs function on the Contacts_Ext Extension class via JavaScript Remoting. The method returns a list of Contact records which are then processed in the showContacts callback method. There, we iterate thr. the Contact records and assign a default ‘blank avatar’ image to any Contact record that doesn’t have an associated image in the Contact_Pic__c Rich Text Custom Field (lines 18-24). Finally, we insert the list of Contacts into the page DOM (lines 2, 27) using the Underscore utility library (more on this later).
Note the triggering of the onTemplateReady custom JavaScript event on line 28. As mentioned earlier, the templates use a minimal amount of JavaScript (main.min.js) to enable basic user interactivity. The main.min.js script listens for the onTemplateReady event before executing some initialization logic and you’re therefore required to fire that event once the template markup has been inserted into the page DOM.
Using Underscore to generate the template markup
The real action in the VF page happens in the Underscore template that generates the dynamic list of Contacts using markup from the the Picture List View Template.
If you’re unfamiliar with using the Underscore templating utility, you can read more about it here. I want to focus more on the HTML5 and CSS3 markup used in this template. This is our first glimpse of the Mobile Design Templates in action. I simply copy pasted this markup from the Picture List View Template in GitHub (minus the dynamic binding part). I then made a couple of minor tweaks to the markup to suit my specific use case. For example, removing the gear icon from the header and updating the menu list (under the <nav class=”main-menu”> section).
As is evident from the above markup, all templates use plain-vanilla HTML5 with CSS3 styling to generate a mobile-optimized view. They have no dependency on external frameworks like jQuery Mobile, Twitter Bootstrap etc. The template markup and CSS is also very modular and composable. Adding a list item in the Picture List View Template is as simple as adding a <ul> tag with the list-view with-swipe left-thumbs right-one-icons CSS styles applied to it (line 15). Adding a Quick Action icon (revealed when the user does a swipe-right on the thumbnail) is simply a matter of applying the thumb CSS style to the <img> tag (lines 21, 28). As so on. For a more detailed breakdown of the different components of the Picture List View and other templates, simply scroll down through the interactive home page and see the templates come to life.
Remember also that the templates are not a all-or-nothing monolith. You can and should pick and choose components of a particular template that fit your specific use case and requirements. Don’t want the Contact title to show in your list view? Just drop the respective markup from the page. Don’t need the Quick Action on-swipe component? Simply drop the entire <div class=”thumbs”> tag.
Customizing the look and feel of the templates
In addition to being modular and composable, the templates are also completely customizable in terms of their look and feel. Simply modify app.css to implement your unique styling and UX requirements. Lets take a very simple example to see this in action. Lets say I wanted to display a red border around the Contact image when the user does a swipe-right to reveal the Quick Action icons. All I have to do is to change the respective style class in app.css to the following
And voila, the list view looks a little different. The CSS used in the templates was generated from Saas and so if you’re more comfortable in a tool like Compass, you can modify the Saas files instead.
Wrap-up and Next steps
In future posts, I’ll build on this basic list view example and use other Mobile Design Templates to build a complete CRUD mobile app. In the meantime, take the Mobile Design Templates for a ride and send me (@cloudysan) your feedback. Remember also that the templates are an open-source project. Please pass along any enhancements or bug fixes via a pull request. Till then, happy coding (and designing).