Slides of my presentation in Salesforce Noida meetup on 7-Dec-2013, meetup.com/New-Delhi-Salesforce-Platform-Developer-User-Group/events/149480462/ Presentation synopsis: How to harness "Salesforce1" platform for your existing mobile web pages created in Visualforce using any framework like jQuery Mobile, Angular, Bootstrap etc. Slides only cover a part, most of it was live demos which show the Salesforce1 App tweaked live with hands on configurations and coding Few things broke when converting from Keynote to Slideshare compatible format, but most of it looking fine.

1. Reimagine Mobile Web
for Salesforce with
Salesforce1
Abhinav Gupta
@abhinavguptas

2. About myself
•
Force.com MVP | Evangelist
•
10 Years so far (Java | HTML | Salesforce | Mobile)
•
Independent Salesforce Consultant
•
Blogger (www.tgerm.com)
•
Some open source endeavours
•
Love meet-ups

3. Agenda
•
Quick overview of Salesforce1 platform
•
Use a mobile-pack template app in Salesforce1
•
Adding Salesforce1 elements to the template-app

4. Salesforce1
•
Its mobile development platform.
•
Desktop’s Point and Click configuration in Mobile.
•
Manageable and controlled mobile ecosystem.

5. Getting started
•
As usual, sign up for Developer Org.
•
You’re lucky, having COMPATIBLE smartphone is
not must (so, no excuses left)
•
Have Visualforce + HTML skills ? - That’s it !

6. Get Salesforce1 App
•
Apple mobile devices with iOS 7 or later:
•
iPhone 4 and later models
•
iPad 2 and later models (including the iPad mini)
•
Android phones with Android 4.2 or later
•
Mobile browser app for Android and Apple devices
•
<instance>/one/one.app

7. Lets step back
•
Remember “Salesforce Mobile Packs” ?
!
!
!
!
!
!
•
Learn more : http://www2.developerforce.com/mobile/services/mobile-packs

8. Reuse existing goodness
•
jQuery Mobile Pack - Address book app

9. Want same app in
Salesforce1 ?

10. Its super easy !
Lets see in live demo.

11. Neat, isn’t ?
!
•
No code change required.
!
•
Integrated in few mins.
!
•
Live on mobile devices
without any drama.

12. What i’m missing ?

13. Not harnessing S1 platform
•
Decent code / effort to create Contact CRUD
screens.
•
Adding new fields with correct locale and
security support is tough.
•
Detail page is missing:
•
Compact Layouts
•
Chatter
•
Related lists
•
Publisher actions
•
Mobile Cards
•
….

14. Contact in S1
•
Configured by Admin
•
Respects security
•
Looks better
•
Related lists
•
Publisher actions
•
Mobile cards
•
Chatter
•
etc.

15. How can my VF page
navigate to S1 screens ?

16. “sforce.one”
Javascript Object
•
Available for pages running in S1 app env.
•
Can be used for navigating to:
•
Object detail/chatter/related screens
•
Specific chatter feeds
•
Chatter feed item details
•
Create/Edit record screens
•
and many more

17. “sforce.one”
example

18. “sforce.one”
example 2

19. DEMO
•
Lets see how the new connected page looks like ?

20. Few tips
•
Using sforce.one in responsive pages
!
!
!
•
Think about caching and expiry of page

21. Q&A

22. Resources
•
Developer guide and other resources here
•
•
http://developer.salesforce.com/resources!
Salesforce1 style guide (really awesome)
•
http://sfdc-styleguide.herokuapp.com

23. Thanks !
Abhinav Gupta
@abhinavguptas