Salesforce1: Getting Started with OneStarter

Salesforce1 is Salesforce.com new mobile platform. It’s also incredibly easy to build a declarative app with Salesforce1. All your object tabs can be accessible through Salesforce1, so you can quickly build a Salesforce app and have it available on their mobile platform. There’s a great webinar on this called Intro to Building Mobile Apps with Salesforce1: No Code Required . Sometimes, we need something a bit more to provide a specific functionality or look and feel. Now we’re in the realm of Apex and Visualforce.

It can be challenge to match Salesforce1’s look and feel. It involves a lot of CSS and sometimes other libraries like jQuery Mobile. This can be very difficult for Salesforce Developers used to using the standard Visualforce components. Thankfully, a Salesforce Developer Evangelist Josh Birk , has released a starter pack to help us along. This pack is called This is my experience getting started with OneStarter.

A word to the Admins out there – yes this involves Visualforce. What I’ll be reviewing will not require to write any code. So this is something everyone should be able to do and try out.

Disclaimer: I am not a programmer. I consider myself a Salesforce Developer who’s familiar with Visualforce and Apex. My method may not be the fastest or easiest to get OneStarter working – but it does work!

Our process will be five main steps.

1. Get the files and prep
2. Upload .zip as static resources to Salesforce
3. Create our Sample Visualforce Page
4. Make our Sample page available in Salesforce1
5. Play!

Get the Files and Prep

The OneStarter files can be found on Github: https://github.com/joshbirk/onestarter. On the right hand side there’s a very nice “Download Zip.” There are a lot of files you’ll be downloading. This includes files for icons, javascript, css, static resources (more on this later), sample pages and a readMe file.

First thing after you download the files is to Unzip them in a directory. The second thing to do is read the README.md file. Alternative, you can read it from the website you just downloaded the files from.

Next we’re going to grab some files that we’ll upload.  We’re going to be upload a minimum of two files and optionally one more.

1. Create a zip file that contains everything in the “OneStarter-Master” folder except the folders: pages and StaticResources. Name this file “OneStarter”
2. From the StaticResource folder, rename “TouchSwipe-Jquery-Plugin.resource” to “TouchSwipe-Jquery-Plugin.zip”

*****Update 2/21/214  Josh released an updated version of OneStarter. This version includes a "zips" folder which contains all the files you need. You can effectively skip the above step and simply upload these zips as your static resources /Update ******

Upload Static Resources

We’re not going to upload these as static resources in Salesforce. Upload the “OneStarter.zip” as “OneStarter” and “TouchSwipe-Jquery-Plugin.zip” as “TouchSwipe”

These are our two static resources we need to have. The third optional static resource are for the jQuery files. I decided not to do that and reference an online link instead. We’ll look at this in our sample page.

Creating our Sample Visualforce Page

We have our static resources in place. Now we can start creating our visualforce page. There are many ways to create a new Visualforce page. My currently preferred method is using the Developer Console. I’ll walk through this in a different post. I suggest you check out this guide if you need help creating a page. Let’s call this page “OneStarterApp.”

Ready to actually put some code on the page? Josh was very nice and provided many samples. We’re going to use one of those samples. Let’s start by copying and pasting the Visualforce code from the “OneStarterApp” page. You can grab the code from Github here: https://github.com/joshbirk/onestarter/blob/master/pages/OneStarterApp.page

The start of the page looks like this:

<apex:page showHeader="false" >
<apex:stylesheet value="{!URLFOR($Resource.OneStarter,'icons.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.OneStarter,'styles.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.OneStarter,'OneStarter.css')}"/>
<!-- JavaScript files -->
<apex:includeScript value="{!URLFOR($Resource.jquery)}"/>
<apex:includeScript value="{!URLFOR($Resource.TouchSwipe,'jquery.touchSwipe.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.OneStarter,'jquery.onestarter.js')}"/>
<apex:includeScript value="/canvas/sdk/js/publisher.js"/>

I made one change. Instead of using:

<apex:includeScript value="{!URLFOR($Resource.jquery)}"/>

I replaced it with

<apex:includescript value="//code.jquery.com/jquery-1.10.2.min.js" />
 <apex:includescript value="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"/>

I was already using jquery and jquery mobile on other pages. I wanted to be consistent with how I was including jquery on my pages. The alternative is upload jquery as a static resource and this is the method Josh used in his example.

Make our Sample page available in Salesforce1

There are three things we need to do before our page will be available.

1. Make the Visualforce page “Available for Salesforce mobile apps”
2. Create a Visualforce tab
3. Add our new Visualforce Tab to Mobile Navigation

Let’s first make the page ready for mobile apps. We need to go to the page in the UI: Setup -> Develop -> Page, and “Edit” for our OneStarterApp page. There’s a checkbox labeled “Available for Salesforce mobile apps” which we simply want to check and save.

Mobile Ready Visualforce page

Next we need to create a Visualforce Tab. This is just like creating a custom object tab. Under the Build section, got to Create -> Tabs. Scroll down to the section labeled “Visualforce tab.” This will be the last section on the page. Select our OneStarterApp page we just created and name your tab OneStarterApp.

Finally, we need to add the tab to be available in Salesforce1.  Under “Administer” go to Mobile Administration -> Mobile Navigation. You should see our OneStarterApp tab under the “Available” column. Move it to the “Selected” column and save.

Time To Play

Now you have a choice. You can grab your phone or tablet and load up Salesforce1. You can also use a supported browser (I prefer Chrome) and go to *instance*.Salesforce.com/one/one.app. For example, my sandbox instance is CS16. So my URL is CS16.salesforce.com/one/one.app.  Be aware that if you decide to use your browser “swiping” menus can be challenging.

Click the menu button and you should see our Visualforce tab: OneStarterApp. Go ahead and click on it and you should see this glorious page:

Here’s what I love about the page. It gives us an example of a carousel. That’s those 6 little gray radio buttons that let’s us change parts of the screen by swiping right and left.  I also love this sample because it provides examples of many of the common styles you would use in a custom Salesforce1 app. Here’s what’s available from first radio button in the carousel to the further right:

• Basic List Example
• Record List Example (with Icons!)
• Related List Example
• Form Example (My favorite)
• Detail Example
• Icon Library

This is a great page to get an idea of the look and feel for custom Salesforce1 pages. My next step is to take the examples on this page and apply them to my own applications, but that’s a different post.

I hope this inspires you to go in and play with Salesforce1 and Visualforce. What mobile apps would you like to build? Are there other libraries you’re using with Salesforce1? Share in the comments!