Salesforce1 is a powerful tool for web developers to build beautiful, responsive web apps. Developers can draw on their skills with JSP, ASP.NET, and PHP and go even faster with Visualforce. Join us for a fun tour where you'll learn how to use HTML, CSS, Javascript, and Visualforce to make awesome apps quickly. We'll show you how to use Twitter Bootstrap for CSS, access and bind Salesforce data with Javascript, and optimize your App using server side controllers and Visualforce markup.
#CNX14 - Use Chatter and Communities to Drive Stronger Customer Engagement
#CNX14 - Building Enterprise Mobile Apps With Salesforce1
1. Track: Developers
#CNX14
#CNX14
Building Enterprise Mobile Apps with
Salesforce1
James Ward
Platform Evangelist
@_JamesWard
2. Track: Developers
#CNX14
90% Of All Enterprise Apps Will be Mobile by 2017
20%
of enterprise apps
are mobile
Source: Gartner, Ian Finley, Research VP; 2010
2014 2017
90%
of enterprise apps
will be desktop and mobile
3. Track: Developers
#CNX14
But it’s Difficult to Build Mobile Apps
54%
0%
54%
26%
have
deployed
apps <½
Complexity of form factors
Limited number of developers
Multiple operating systems
Multiple platforms
60%
40%
20%
Percent of Respondents
Mobile apps
deployed
2013 Study of
1,300 Global Executives
“The Rise of the Customer-Led Economy”
Mobile apps
are critical
4. Track: Developers
#CNX14
The Salesforce1 Customer Platform
Transform your sales,
service, & marketing:
Cloud . Social . Mobile . Connected
Connect all your apps
Connect all your customer
data
Breakthrough for Developers,
Admins, ISVs, and Users
Sales Cloud Service Cloud
ExactTarget
Marketing Cloud
AppExchange
Your Customers
5. Track: Developers
#CNX14
Experience Salesforce on Any Device
All your past investments...
...now in the future
Download the Salesforce1 Mobile App today.
Your CRM
Your AppExchange Apps
Your Custom Apps
Feed First UI
Notifications Platform
Publisher Actions
Salesforce1
9. Track: Developers
#CNX14
An App That Anyone Can Build
Check out this app. It’s completely custom and requires no
coding.
10. Track: Developers
#CNX14
List Views
Sobject Tab New List View
Tapping an object in the Left Nav
displays your List Views and your
Recent records
11. Track: Developers
#CNX14
Expanded Lookup
Parent Sobject Compact Layout
Child SObject Page Layout Expanded
Lookup
Show additional info for Parent records
12. Track: Developers
#CNX14
Built-in Map Integration
for Accounts & Contacts
Account any record populate Billing
Address or Shipping Address fields
Map icon will automatically display at the
top of the detail page.
13. Track: Developers
#CNX14
Publisher Actions
Global: Create Global Actions
Object Specific: SObject Buttons, Links &
Actions New Action
Page Layouts control which actions
show in what order
14. Track: Developers
#CNX14
Visualforce – Mobile Cards
Mobile Cards - Visualforce
Pages on Record Detail
(VF page needs to the extend Standard
Controller)
15. Track: Developers
#CNX14
Visualforce in Salesforce1
• <apex:page docType="html-5.0" …>
• ‘Available for Salesforce Mobile apps’ flag enabled
• Developers are responsible for making the VF page ‘mobile ready’
• Use a Responsive Design framework like Bootstrap or Mobile Design templates
• Leverage touch and swipe events where appropriate
• Use JavaScript Remoting/VF Remote Objects for better
performance
• Use HTML5 for device features like Geolocation and Camera
access
16. Track: Developers
#CNX14
Custom Mobile Apps with Mobile SDK
Identity Management
Securely Access Salesforce1 APIs
with Native Wrappers
SmartSync for online/offline
Push Notifications
Support for iOS, Android and
HTML5
17. Track: Developers
#CNX14
Building apps with Mobile SDK
Developer Packs
Native HTML5
UI Libraries
Data Management
Networking API Wrappers
Identity
Hybrid
Secure Storage
Provided by OS
Provided by OS SmartSync
SmartStore
OAuth2 Client Library
Salesforce1 Platform
18. Track: Developers
#CNX14
Take the after-session survey!
Take the Survey in
the Connections
2014 Mobile App
Join the
Conversation!
#CNX1
4
$50
Starbucks
Gift Card
21. Track: Developers
#CNX14
CUSTOMER JOURNEY
SHOWCASE
MARKETING
THOUGHT LEADERS
EMAIL MARKETING PRODUCT STRATEGY
& ROADMAP
PERSONAL
TRANSFORMATION
& GROWTH
SOCIAL MARKETING MOBILE & WEB
MARKETING
DEVELOPERS HANDS-ON
TRAINING
INDUSTRY
TRENDSETTERS
CREATIVITY &
INNOVATION
SALESFORCE FOR
MARKETERS
ROUNDTABLES
Hinweis der Redaktion
Salesforce1 is the new customer platform that lets you connect to your customers in a whole new way . We’ve completely re-architected Salesforce to enable a future of connected customers, connected devices and connected apps.
Before we jump into the app, I want to highlight two key aspects of the navigation. The first is the Left Nav menu. This give users access to the same tabs they would see in the browser app, plus ones specfiic to mobile. This menu is configurable via the Mobile Administration setting in Setup.
The 2nd aspect is the record view – how your users see the data in salesforce on their device. How many of you a;ready have a bunch of page layouts that you love? [hands raise] Those same page layouts you use for the browser app are used on the mobile devices. That’s what you see on the bottom half of the screen. This top half is controlled by a new layout, called the Compact Layout. The Compact Layout allows you to configure the 4 fields that show at the top of a record – these should be the fields your users need to see at a glance.
Now let’s take a look at a sample app – one that anyone can build. It requires no coding.
Demo package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000Csmi
Package contains:
- custom fields for Contact, custom action for Contact, compact layout for Contact
- custom object Interview, includes custom action, compact layout, custom List View for My Interviews – change this List View to match your username
Org setup:
- remove fields and related lists that aren’t needed on Account and Contact, they clutter the story
- create data for Account, Contact, and Interview
- create a 2nd user (your boss)
Slide Talk Track: This app is for Campus Recruiting. It can be used by any company or organization looking to recruit students for jobs, internships, or volunteer work. It was inspired by a custom mobile app created by Swathi Ramini at Teach for America for their campus recruiters.
When recruiters visit campuses, they do not bring their laptops, but they always have their phones. Without Salesforce1 Mobile, they take handwritten notes and then enter them into the Campus Recruiting app in salesforce.com when they get back to the office. Sometimes, that is days later, if they are visiting many schools. With Salesforce1 they have their interview schedule in their hand, and can capture their notes and outcomes with a few taps.
Let’s take a look…[switch to demo on your phone/tablet]
Demo Script: For example, I need to go to Drew University today, so I can search for Drew in the global search to access the Drew account record. From here I can tap on the map icon and that will open the map application on my phone, in this case it is Google Maps. I love this because when I click on addresses from most websites it opens google maps in the browser, which is not as user-friendly on the phone.
(This should be done either using your device. You should check out reflector, air display or if you have a direct connection from the device to the projector.)
Show the chatter Feed.
Show the left hand nav.
Search for an account.
Tap the Map icon on the account.
Close the map and reopen Salesforce1.
Once I get to Drew, I check my Interview schedule by swiping to the Left Nav and tapping Interviews and selecting My Interviews, a custom List View I created in the browser – the Salesforce1 Mobile App is just reading that same metadata to display the lists. I see I have an interview with Sarah Scribble at 11:30. I can see this, and the location, right at the top of this detail view. This top section is customizable, and you should include the 4 fields that mobile users will need to see most when on the road.
Back to left nav – tap Interviews, My Interviews
Tap a specific interview, show detail view
I am at the room on time, but Sarah is not there. I swipe to see more information about Sarah as I wait – I do this via an Expanded Lookup element that was added to the Page Layout as a Mobile Card. We’ll see how to do this in a minute. I can see she’s a Junior majoring in Math. That might be handy because not a lot of people like to teach Math.
Swipe to show related info, show Expanded Lookup mobile card for contact info.
Now I’m getting impatient, so I click into Sarah’s contact record. Here I can quickly call her to see where she is. I do that (not really, but note that the Log a Call screen displays automatically when you dial from the Contact record, saving the user a couple of clicks and gently reminding them to log all calls). She’s on her way, so I have some time. I use that time to learn more about her by swiping to the right pane of the Student details and check out her Twitter feed to see what she’s been saying [note: use my twitter feed, @rockchick322004, or yours if you prefer].
Tap a specific contact, show detail view.
Click phone icon (in the top section). Don’t call. Close Log a Call screen.
Swipe to related info, show Twitter feed.
Sarah arrives and we have a good interview. I quickly schedule a follow-up interview for her with my manager, Reid, for later in the day. I do that with a Publisher Action on the Contact record which lets me create a child record. Behind the scenes the Interview Status is set to Scheduled, and now it will appear in Reid’s Interview list.
Click the plus button
Show the custom quick action, New Interview.
Create a new interview, making your 2nd user the Interviewee.
Finally, I need to record my notes while they’re fresh and indicate whether there is potential for hiring her. I do that by navigating back to the Interview record, which is here in the Related List, just like it would be in the Desktop app (note that you can see the new Interview here as well). From here I can tap the Interview and then tap the plus button on the lower right and tap on the Log Interview quick action. This is a custom Publisher Action, created with just point & click. I’ll show how to do that in a second… Sarah was pretty awesome and I think she’d be a great Math teach at Teach for America, so I enter that and tap Submit. What I’ve just done is updated the Interview record with my notes and outcome, and also, behind the scenes, the Interview Status field was updated to Complete. Setting values automatically, using the new Predefined Values feature for Publisher Actions, is a great way to save your users time when they are on their mobile device.
Still on the Contact detail. the plus button
Swipe to related info.
Tap your Interview record.
Click the plus button
Show the custom quick action, Log Interview.
Enter the interview info, submit.
That’s it! In this scenario, I would go on to my next interview, and at the end of the day, instead of having to transcribe all of my handwritten notes into my laptop in the office, or my hotel, I can spend time socializing with my friends or watching movies in my hotel.
[switch to desktop browser]
Have Setup open to the Schema Builder, showing only Account, Contact, and Interview.
Now, let’s take a look behind the scenes to see how I created this custom Campus Recruiting app without any code.
The data model schema for the Campus Recruiting app is simple. It leverages standard Accounts and Contacts, and a custom object for Interviews that has a Master-Detail relationship with Contact. It is because of that relationship that I can use point & click to create the “New Interview” Publisher Action on the Contact object. I can do this for both Master-Detail and Lookup relationships.
I won’t demo everything I did to set this up, because most of it you are already familiar with – it is the same Setup work you do in the desktop browser app. However, I would like to walk through creating a Publisher Action, since that is something you will be doing a lot. Let’s add a new Publisher Action on the Contact that will let the interviewer quickly update the Education Information for the Student they are interviewing.
Close Schema Builder
In Setup’s QuickFind, enter “Contact”.
Click Buttons, Links & Actions under the Contact node.
Click New Action. Show the Action Types and Target Objects.
Create an Action of type “Update a Record”, label “Update Education”.
Action layout should contain only Name, Grade, and Major.
If time, show the Predefined Values, even though there isn’t a good example for this use case. Important to know how powerful these are - you can select a specific Picklist value, or use Formulas to set any of the field types Formulas support as a return type (Text, Number, Checkbox, etc.).
Nav to Contacts – Page Layouts and add the Update Education action to the Publisher.
Don’t bother going back to the phone to demo this, you can just show it in the Contact detail page Publisher. Makes the point that they are the same.
Let’s review the other parts of the salesforce1 app that we interacted with.
You are going to see 5 different apps today, and I don’t expect you to remember every click. You can dig into these features in Setup and the documentation when you get started building your own app.
First is List Views. Main point here is that they are the same as the ones your user has access to in the desktop application, including custom List Views they add.
Next is the Expanded Lookup. In the Page Layout Editor, there is a new category called Expanded Lookups, and you drag the one you want into the Mobile Card section. It will only display in Salesf orce1 Mobile, not on the Desktop app.
The fields for the Expanded Lookup are defined by the Primary Compact Layout definition for the object in the lookup. So, in our case that was the Contact object. This is important because the Compact Layout also controls the fields at the top of the detail page in Salesforce1 Mobile, and you can only have 4 fields, so choose carefully.
One great trick is the built-in map integration for Account & Contact records. Note this is ONLY on Accounts and Contacts, not on custom objects, but it is pretty cool.
This last feature is the secret sauce of Salesforce1 Mobile success in your company. The thing is, like any sauce, you want to use it wisely. Not enough quick actions, Salesforce1 feels cumbersome, too many, users get overwhelmed. This is the area you want to really focus on when you are gathering requirements from your users – what are the 3-4 things they are ALWAYS doing on the road. Define those as Publisher Actions, setting Predefined Values whenever possible to save even more time, and you will be a hero.
A couple of things that you should do to make your Visualforce pages work well in the salesforce1 app.
Always use the doctype attribute on your page tag. This provides access to the most current features of HTML from your javascript code.
There is a check box on the metadata detail page for your Visualforce pages that needs to be checked. If for some reason your page is not showing, double check that you have made it available for salesforce mobile apps.
You need to style your pages appropriately for the device you are targeting. Responsive design CSS and JS are great ways to target multiple devices with one code base.