Skip to main content

Building a Mobile App faster than it takes to make Coffee Using Salesforce1

The world is moving towards mobile, screens are getting smaller (and larger simultaneously). Cloud has already replaced the need for the computer as we know it and mobile has now stepped up to finish the job. To become a complete customer company we need to cater to every screen the customers prefer.

Now as a Force.com platform loyalist (and a purist at that) I find it really annoying that I have to learn a new language (Objective C for iOs and Java for android) just to build an mobile app. But this nagging piece of overwork is no longer a trouble. Have no fear Salesforce1 is here.

The moment Salesforce1 was announced, it is understood that it is a game-changer. Salesforce1 app is to mobile what visualforce did to cloud development, smash it. Generations ahead of its time, Salesforce1 is a treat to all visualforce developers out there to bring amazing functionality to phones. Before we begin, lets get few things clear.

1. Salesforce1 is a way of building mobile apps around Salesforce, using the existing Salesforce data, heroku and many other services. For full list of API's and Services included head over to Salesforce1 page. (Side note: Did you checkout the awesome new developer homepage? )

2. Salesforce1 is just an extension of existing Salesforce application, so you can migrate any existing Visualforce page to mobile. It does not support Cordova libraries yet but I am sure they will support that in the future. (Fingers Crossed) (Edit: Thanks to @Metadaddy you can get most thinks to work using pure HTML5, e.g. here is a great article that shows you how)

3. Salesforce1 is the most awesome platform that allows you to deploy Force.com applications on mobile faster than you make coffee.

Lets get started on building a small form based application that will collect responses from people in a conference. We will build a lead generation page using Visualforce and deploy it for Salesforce1 before you make coffee. So lets begin and don't forget to put that coffee pot boiling.

Step 1: Go to Setup -> App Setup -> Customize -> Leads -> Field Sets



Step 2: Create new Field Set adding the required fields. (Side note: If you are an Salesforce Admin and a Developer is trying to confuse you by using complex visualforce jargons whisper field sets in his ears to scare him. More on field sets here.)



Step 3: Create a Visualforce page called SurveyPage and use the Field set created in step 1. The following code adds a field set called Survey on the visualforce. Note: I am using Standard Visualforce controls, if you intend to add a custom CSS to your page please make sure you use Responsive Web design to cater for all Screens.

Visualforce code:

<apex:page standardcontroller="Lead">
<apex:form>
<apex:pageblock>
<apex:pageblocksection>
<apex:repeat value="{!$ObjectType.Lead.FieldSets.Survey}" var="f">
<apex:inputfield value="{!Lead[f]}">
</apex:inputfield></apex:repeat>
</apex:pageblocksection>
<apex:pageblockbuttons>
<apex:commandbutton action="{!Save}" value="Submit Survey">
</apex:commandbutton></apex:pageblockbuttons>
</apex:pageblock>
</apex:form>
</apex:page>


Step 4: To enable the visualforce for mobile we have to set the Available for Salesforce mobile apps flag on the edit page.  (Side note: If you are building the page using Development Mode or any IDE, go to Setup-> Develop->Pages to see that flag)


Step 5: Now we are all set, create a new Visualforce Tab called Survey and assign it to the visualforce page.


Step 6: Go to Administration Setup -> Mobile Navigation

Step 7: Add the Survey tab to the Mobile Navigation.
Step 8: Open Salesforce1 app on iOs device and test your page. (Side Note: One super cool feature about Salesforce1 is that if you do not have a Apple Device you can test your application one browser. Go to <Salesforce instance>/one/one.app)


Step 9: Enjoy your Coffee.

Compatibility issue:
Salesforce1 is available for all iOS devices and can be downloaded from App Store. For Android devices however the minimum requirement is Android 4.2 (Jellybean), all other devices will receive Chatter Mobile 3.4. I find it offensive to discuss Windows mobile OS.

Comments

  1. "It does not support Cordova libraries yet but I am sure they will support that in the future." - you can get most things working in 'pure' HTML5 - e.g. blogs.developerforce.com/developer-relations/2013/11/uploading-photos-to-chatter-files-with-html5.html

    ReplyDelete
    Replies
    1. That is awesome, I have added this link to the blog. I did not know we could do that, now going to try.

      Delete
  2. And it would be GREAT to have a screenshot of the finished page!

    ReplyDelete

Post a Comment

Popular Post

The unofficial guide to become a Certified Salesforce Administrator (ADM 201)

In my attempt at maximum certifications in 60 days, I completed Salesforce Certified Administrator exam on February 11th 2013 So you have decided to ramp up your career and take certifications in your hand. Good choice. It is also likely that this is the first time you have heard of Salesforce, certification and since your company has a vision of you completing the certification you have decided to do it. At this stage it is likely that, You have done extensive googling. You have received countless brain-dumps. And you have received plenty of advise from different types of users which ranges from Admin certification is easier than making coffee to Admin certification is tougher than building a rocket-ship to fly off to the moon. The purpose of this guide is to give you a clear understanding of what to expect when you are expected to become Certified Salesforce Administrator. To bring sense to all the things you have seen so far and to clearly explain what to do and what

Some PDF tricks on Visualforce: Landscape, A4, page number and more

The beauty of Visualforce is simplicity. Remember the shock you received when you were told the entire page renders as PDF if you just add renderAs=PDF to the Page tag. For those who thought I spoke alien language right now, here is the trick, to render a page as PDF, we add a simple attribute to the <apex: page> tag <apex: page renderAs='pdf'> This will render the entire page as PDF. Now, say we need to add some extra features to the PDF. Like a page number in the footer or we need to render the page in landscape mode. Faced with this problem, I put on my Indiana Jones hat and went hunting for it in the vast hay-sack of the internet (read: googled extensively). Imagine my happiness when i found a big big page with many big big examples to solve the problem. The document I am referring to is from W3C, paged Box media . Long story short, I now possess the ultimate secret of rendering the page in any format I want. So here are few tricks I learned from the p

The Basics of writing a Apex Trigger

One of the most important and common asked question on Forums and everywhere is how do I write a trigger. Coding in Apex Trigger is like going to a dentist for a root canal, you keep dreading the moment until you realize it is actually not going to hurt you. If you plan to write an Apex Trigger this quick guide will help you doing so. The first and foremost rule in writing a trigger is to remember the oldest suggestion given to the most comprehensive Hitchhikers Guide to Galaxy, ' Don't Panic. ' Writing a trigger is not a rocket science, in-fact we should thank the team at Salesforce and ForceDotCom for making everything so simple, that anyone can do it. Enough of talk, lets code. So you want to write a trigger. Let us have a glimpse of what we are going to build. The problem statement is as follows Problem:  When the User is entering the Opportunity, check for the Opportunity Amount. If the Opportunity Amount is greater than 50,000. Mark the Parent Account as