AngularJS App In Two Weeks

Salesforce1 Events App on AngularJS
in Two Weeks
Peter Chittum
Developer Evangelist
salesforce.com
@pchittum
Adrian Smalley
Lead Salesforce Architect
Acumen Solutions
@adriansmalley

Safe Harbor
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize
or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the
forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any
projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding
strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or
technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for
our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate
of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with
completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability
to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our
limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential
factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year
and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are
available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and
may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are
currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

Peter Chittum
Developer Evangelist
@pchittum
github.com/pchittum

Adrian Smalley
Lead Salesforce Architect - UK
@adriansmalley

2 Min DEMO
Adrian : EventFlex

EventFlex
Before we begin….
• This app is open source and an accelerator for those wishing to take it further.
• It is hosted on github : https://github.com/adriansmalley/eventflex
• Showcases cool features but isn’t quite production ready. You have been warned.

Our Approach
Adrian : Begin with the end in mind

Timeline
Acumen’s approach to custom SF1 App creation
Initiate Define Build Deliver Launch
1 2 3 4 5 6 7 8 9 10
UX SF1 Config Angular App Data Layer Front end Dev

Who and How?!
The criticalness of UX and Wireframing
Solution
Team
Tools
?!
UX & BA Admin Angluar & SF DEV
Google Docs
Balsamiq
Git Issues
Github
UX

Step 1 : Persona’s, Design, Style, UX
Adrian : Bringing user experience to the centre of app development

Have the user at the heart and the start
Thinking about User Experience from the beginning
# 1
# 2
# 3
1. Personas 2. Stories 3. Prioritise Stories
4. User Flows 5. Wireframes 6. Design
UX

Begin with the end in Mind
The criticalness of UX and Wireframing
4 Version of this
screen before
deciding
Choosing Charts
before development
Single attempt at Build!
UX

Visualforce on Salesforce1
Peter : Connecting Angular, Salesforce1, and Visualforce

Salesforce1 Mobile
Extensible Hybrid Mobile App
• Point and Click
• Visualforce
• Canvas
• NEW! Lightning Components
Salesforce1

Salesforce1 + Visualforce
• Publisher Action
• Visualforce Tab
• Mobile Card
Salesforce1

Your Visualforce Page in Salesforce1

<apex:page docType="HTML-5.0" showHeader="false" sidebar="false"
standardStylesheets="false" controller="EventFlexServices">
Salesforce1

<apex:includeScript value="{!URLFOR($Resource.efLibs,'angular/angular.min.js')}" />
...
<apex:stylesheet value="{!URLFOR($Resource.efLibs,
'bootstrap1/css/bootstrap.min.css')}"/>

Angular App Architecture
Peter : Angular in SFDC

BASE HTMLPAGE
App Structure
APEX Classes
JAVASCRIPT
• APP STARTUP
• DIRECTIVES
• CONTROLLERS
• SERVICES
ANGULARJS MODULE
LIBS
CSS
HTML VIEWS (PARTIALS)
VISUALFORCEPAGE
Static Resources
Static Resources
Static Resources
Static Resources/Bundle
AngularJS
App

Static Resource Mapping
var staticItems = {
'efMainHTML' : "{!URLFOR($Resource.efMainHTML)}",
'efSessionHTML' : "{!URLFOR($Resource.efSessionHTML)}",
...
'getSessionTopics':'{!$RemoteAction.EventFlexServices.getSessionTopics}',
'getSessionSpeakers' : '{!$RemoteAction.EventFlexServices.getSessionSpeakers}’,
...
};
AngularJS
App

The Components
BOOTSTRAP(-SF1)
ANGULARJS
VISUALFORCE
The “VAB” Stack
AngularJS
App

Why AngularJS
• Structured JS
• Convention creates familiarity
• Adaptable, Extensible
• Big community
• Enterprise ready
AngularJS
App

AngularJS App Startup
<div class="container-fluid" ng-app="eventflex">
<div ng-view="#" class="slide container"></div>
</div>
var eventFlex = angular.module('eventflex', ['ngRoute', 'ngAnimate', 'gantt']);
App Name Included Modules
AngularJS
App

AngularJS Page Views & Routing
Page UI templates
eventFlex.config(function($routeProvider) {
$routeProvider
.when('/', { templateUrl : staticItems['efMainHTML'],
controller : 'MainCTRL'
})
.when('/session/:id', {templateUrl : staticItems['efSessionHTML'],
controller : 'SessionCTRL'
})
});
Request URL JS Controller True File URL
AngularJS
App

Bootstrap-SF1
Salesforce1 Theme for Twitter Bootstrap
CSS Framework
AngularJS
App

Data Access
Peter : Getting data

Data Access for Salesforce1
• Remote Object
• @RemoteAction apex Methods
• REST API for large requests
Data Access

AngularJS Services for Backend
• Declare Service then Use Where Needed
Data Access
eventFlex.service('efSERVICES', function(){
return{
getAllEvents : function(callback){
...service logic...
},
getSessions : function(callback){
...service logic…
}...
}
});
eventFlex.controller('MainCTRL', ['$scope','efSERVICES'...,funtion($scope,efSERVICES,...{
...controller logic...
};

Remote Object in Angular Service
<apex:remoteObjects >
<apex:remoteObjectModel name="Event__c" jsShorthand="evt”
fields="Name,Id,OwnerId,Short_description__c,..."/>
<apex:remoteObjectModel name="Session__c" jsShorthand="session"
fields="Name,Id,Location_text__c,Short_description__c,Description__c,..."/>
</apex:remoteObjectModel>
</apex:remoteObjects>
getEventDetails : function(eventId, callback){
var data = new SObjectModel.evt();
var whereOb = { where : {Id : {eq:eventId}}};
data.retrieve(whereOb,function(err, records){
//if failure
if(err) alert(err.message);
else {
console.debug(records);
callback(records[0]);
}
});
},
Data Access

@RemoteAction in AngularJS Service
getMyFriendsAttendance : function(eventId, callback){
Visualforce.remoting.Manager.invokeAction( staticItems['getMyFriendsAttendance'],
eventId, function(result, event){
if( event.status ) {
callback(result);
}
});
},
Data Access

Components and Community
Adrian : Power your productivity with the Angular Community

Angular Community and Directives
There is heaps of awesome open source out there
• Using other peoples components in your app :
– Saves you loads of time
– Is often better tested
– Often more widely tested (cross browsers etc)
• It’s easy to search for components (directives) that will help you out.
• We used :
– Angular Gantt (http://angular-gantt.github.io/angular-gantt)
– Angular Charts (https://github.com/chinmaymk/angular-charts.git)
Front End

Installing Apps / Directives
Integrating other components
• Adding to your app is super easy :
1. Install
<apex:includeScript
value="{!URLFOR($Resource.Angula
rD3, 'd3-master/d3.min.js')}"/>
<apex:includeScript
value="{!URLFOR($Resource.Angula
rChartsJS)}" />
2. Inject
var d3App =
angular.module('d3App',
['ngRoute', 'angularCharts']);
3. Add to controller
$scope.config = {}
$scope.data = {}
4. Use Directive in Page
<div ng-controller="d3CTRL">
<div data-ac-chart="'pie'" data-ac-
data="data" data-ac-config="
config" class="chart">
<div>
Front End

Building the Page
Adrian : UI development

Understanding the Data Flow
VISUALFORCE
CONTROLLER DIRECTIVES
SERVICES
APEX Classes
The Execution Cycle
Front End
1. Page Loads
2. Angular Controller calls init()
3. Controller Calls the Services
4. Services calls APEX classes via
@remoteAction
5. Data Returned from Apex to
Services
6. Services Returns data to
Controller
7. Controller Refreshes the page
8. VOLA!

MVC for Javascript. Remarkably similar to APEX.
APEX Controller Angular Controller
public with sharing class efCharts {
public Id eventId {get;set;}
public list<events> evtList {get;set;}
public pageReference getNewDashboard(){
return null;
}
}
d3App.controller('d3CTRL', function($scope,
chartServices, $routeParams) {
$scope.eventId = $routeParams.id;
$scope.events = [];
$scope.refreshData = function(){
...
}
}
Visualforce Page HTML Page
<apex:page controller="efCharts" >
<apex:repeat value=”{!evtlist}” var=”e”>
{!e.Name}
</apex:repeat>
</apex:page>
<div ng-app="d3App">
<div ng-controller="d3CTRL">
<ul ng-repeat=”e in events”>
<li>{{e.Name}}</li>
</ul>
</div>
</div>
Front End

Bindings - putting stuff on the page
• Output bindings are the simplest way to stamp data on your page using {{}}
<span>{{Event.Start_Date__c}}</span>
• However this prints out the wrong format so lets use a formatter. Magic.
<span>{{Event.Start_Date__c | date : ‘dd-MM-yyyy’}}</span>
[Works for Date, Number, Currency, Uppercase, Lowercase]
• If we want a 2 way connection e.g. an input field we use ng-model which will refresh
the page on change of this value. Amazing for live filtering.
<input ng-model=”searchText”/>
Front End

Repeats, Repeats, Repeats
• Repeats are key to delivering lists of data. They can be either Arrays OR Objects.
<li ng-repeat=”item in items”>{{item.Name}}</li>
<li ng-repeat=”(key, value) in items”>{{value.Name}}</li>
• Angular Packs some serious punch with filters
–Simple filter that searches for anything in the array
<li ng-repeat=”item in items | filter: searchText”>{{item.Name}}</li>
Front End
–Restricted filter that searches for a field on an object
<li ng-repeat=”item in items | filter: {name:searchText}”>{{item.Name}}</li>
–Add in orderBy for maximum control<li ng-repeat=”item in items | filter:
searchText | orderBy:’Name’”>{{item.Name}}</li>

Directives & Partials
• Directives are tags that allow you to create angular components. Directives can be
reused thought out your app.
• You need to specify how you want to register a directive Attribute or Tag:
<span my-directive=””></span> or <my-directive></my-directive>
• Key components of a directive include :
–HTML template / Partial : specify how you want to display data
–Scope : Specify which pieces of data you need
–Link Function : specify how you want to interact with the component.
• On your page now simply reference the directive and pass in the data
<span my-directive=”” data-item=”dataitem”></span>
Front End

An Example
1. Use Attribute to get directive &
replace original tag
Front End
1. Allow dataItem to be passed in.
NOTE you use data-item=”” in the
HTML.
1. Template as HTML
1. Create a link function with new scope
and allow access to the HTML
element and attributes. Great for
adding on-click events, jquery etc
myapp.directive(‘myDirective’, function() {
return {
restrict: 'A',
replace: true,
scope: {
dataItem:’=’
},
template:
'<span>{{dataItem.name}}</span>',
link: function (scope, element, attr){
scope.dataitem2 = ‘ABCD’
scope.resetValue = function(){
scope.dataItem = scope.dataitem2
}
element.bind(‘click’,
scope.resetValue);
}
};

So the app in the end...
Adrian : Recap

EventFlex as a Solution
Mapping the features to the UI
Twitter Integration
Chatter
Service Cloud
Salesforce1
Communities
Force.com

AngularJS App In Two Weeks

Recommended

More Related Content

What's hot (20)

Similar to AngularJS App In Two Weeks (20)

More from Peter Chittum (20)

Recently uploaded (20)

AngularJS App In Two Weeks