Embed Size (px)
DESCRIPTION
Join us to learn how to make a robust Salesforce 1 Mobile App web application using the combination of Salesforce1, Ionic, and Salesforce Foundation's Bootstrap-SF1. We'll discuss how to integrate all three of these technologies to create a mobile UI that closely follows the Salesforce1 Mobile App's design and navigation patterns. Using a basic Master-Detail application which flows between our Custom Visualforce pages and the standard Salesforce record detail and publisher pages, we'll demonstrate how to setup Ionic URL routing, how to load data into our interface via Remote Actions and directly into the page on load, and how to create effective transitions between screens.
Citation preview
Rapid Mobile Development with Salesforce1, Ionic, and Bootstrap-SF1Mike Tetlow
Developer
@Mikename
Mike TetlowDeveloper
Bracket Labs
Session Overview
• What is Salesforce 1 and how do we develop on it?• Resources• Demo• Caveats• QA
What is Salesforce1•In this session we will focus on just the Salesforce1 mobile web app
•You have the ability to create Salesforce1 app’s using several methods
•The most flexible method is a custom HTML UI presented through the Salesforce1 app
Why custom Visualforce Development?
•Exacting product managers who want things to look a specific way
•Flexibility in presentation and actions
•Salesforce1’s Javascript API allows us to reuse some powerful views
What tools should we use for this development?
•Mobile frameworks:• jQuery Mobile
• Ionic (without hybrid/Cordova components)
• Appframework???
•CSS libraries• Bootstrap
• SFDC-Styleguide
• Onestarter
• Bootstrap-SF1
•IDE• Dev console
• Mavensmate
IonicMobile app framework.
The best one out there right now
Angular-JSDynamic web app framework
Client side MVC, Data Binding,
Templating, Validation, etc!
MavensmateSublime Text 3 and Resource
Bundles wheee!
Bootstrap-SF1All the hardwork for matching SF1
styles done for you!
Salesforce’s charitable arm
Also has a great Dev Team!
Ionic App Demo
•Custom display of Opportunity object
•List views -> Detail -> Further Detail
•Quick actions on record from list view
Ionic Dev Demo
Caveats
iOS webviews are slow
Page loads wait times on tab clicks are not what the SF1 user is
expecting
Loading indicators can be tough to effectively show on initial page load
Resources
https://github.com/metadaddy-sfdc/IssuesInGitHub
https://developer.salesforce.com/blogs/developer-relations/2014/04/building-beautiful-mobile-apps-in-visualforce-using-angularjs-and-ionic-part-1.html
http://ionicframework.com/docs/guide/
QA
• Mike Tetlow• Bracket Labs• @Mikename
All about
Award-winning AppExchange ISV Partner selling productivity apps. 100% native architecture, focus on usability and simplicity. Founded 2010, Boulder CO
Campaign Calendar – Top 10 app in Marketing category
TaskRay – Top app in Project Management and Collaboration
categories
MyDay – Salesforce Task Management
Notable customers include GE, NBCUniversal, Kelly Services, Tata
Communications, Forbes, Houghton Mifflin
Bracket Labs
![Visualforce in Salesforce1 [Best Practices of Visualforce In Salesforce1]](https://img.pdfslide.net/doc/110x75/55cf97a7550346d03392d0d6/visualforce-in-salesforce1-best-practices-of-visualforce-in-salesforce1.jpg)