ionic on visualforce and sf1 df14
TRANSCRIPT
Building Rich Salesforce1 Applications with Ionic and AngularJSKevin Poorman
Principal Architect
@CodeFriar
Place
Customer or
Partner logo in
white area of
slide, centered
Kevin PoormanPrincipal Architect at EDL Consulting.
Agenda
• Angular in 90 seconds
• The Ionic Framework
• Angular and Ionic on Visualforce
• Mixing server and client side controllers
• In app navigation
• Exposing our App to Salesforce1
• Recap
• Q/a
Angular.JS in 90 seconds
• Model, View – ViewModel Javascript application framework from
Google.
• “Enterprise” ready with familiar patterns like Dependency Injection
• Directives provide a framework for the development of new html tags
and attributes.
Ionic
• A combined set of pre-built Angular directives, CSS and Icons
• Can be used to build Cordova based apps OR apps hosted on
Visualforce
• Primary focus is on mobile apps, they work well in Browsers as
well.
• ionicframework.com
Ionic Directives at a Glance
• Side Menus
• Navigation
• Headers/Footers
• Form inputs
• Modal
• Popovers
• Action sheets
• Loading
• Tabs
• Lists
• Tap & click
Visualforce, Angular and Ionic stack
• Css
• DirectivesIonic
• Client Side Controllers
• Application Logic (services)Angular
• Server Side Controllers
• Std. Salesforce SecurityVF
Challenges & tips for this stack
• Apex:Page Options!
• Use Components!
Demo App Overview
• Essentially a “Contacts” app for
Salesforce contacts
• List view for contacts in the org, with
click for details.
• Stage Right
• Stage Left
• Data Integration
Use to
introduce a
demo, video,
Q&A, etc. Demo CodeDivider Subtitle
Recap:
• Ionic provides a Toolkit of
angular directives we can
declaratively use in our HTML
markup
• We use Visualforce to provide
a container our App runs in.
• Angular provides the logic and
integration framework
• All together, we can *rapidly*
build beautiful SF1 apps!
Use to
introduce a
demo, video,
Q&A, etc. Questions & AnswersDivider Subtitle
Github Repo: noeticpenguin/IonicOnVisualforce
Twitter me: @codefriar