Enterprises love the social collaboration of Chatter, especially since Chatter is tightly aligned with enterprise data in Salesforce. Many companies that integrate their legacy data into Salesforce want to extend Chatter to these mission critical, integrated systems allowing employees to engage in communities right where they work. Join us as Appirio shows how you can use Chatter to engage user communities in external systems using the Chatter UI in the cloud to plug Chatter into external systems with just one line of code. We'll walk through architectural patterns for avoiding browser cross-domain restrictions, access Chatter APIs from the browser, then dive deep into the implementation details of the AngularJS User Interface, NodeJS Chatter Proxy server on Heroku, use of Oauth2, Heroku platform considerations, and specific Chatter REST APIs used.

1. Chatter Everywhere
Externalizing Chatter with Heroku and the Chatter REST APIs
Michael Press, Technical Architect & Cloud Asset Library Program Lead, Appirio
michael@appirio.com

2. Social Collaboration On Enterprise Data In Salesforce
sforce
Sale
Co
nities
mmu
e
alForc
Visu

3. Collaboration On Enterprise Data Outside of Salesforce
tranet
In
r
rowse
B
Order Detail
Document Libraries
Comments
Conversations
Chatter > Order #1234
Chatter > Groups > Marketing Group
Point
Share
egacy
L
ystem
S

4. Chatter Everywhere - Design Goals
Trivial installation – embed Chatter in any app with 1 line of code
SaaS Subscription - Chatter As A Service
Standard UX - Closely follow standard Chatter look-and-feel
Standard Salesforce Authentication – Oauth2
Adaptable - Conform to any container size
Contextual - Parameterized context & container integration
Customizable – Custom branding, language translation, etc.
Browser-independent– Chrome, Firefox, IE 8+

5. Challenges to Externalizing Chatter
Chatter REST APIs return data – you need to write a UI
Cross-Domain restriction – can’t directly call APIs from client
Authentication & Authorization
Refresh Token storage & security
Multiple apps & multiple languages

6. Considerations for an External Chatter App
User Interface – Which Chatter features do you need?
Cross-Domain browser restrictions – Where is your proxy server?
Authentication – Oauth2 vs. Session ID vs. SSO
Refresh Token security – How to encrypt? Store in cookie or db?
Server Security – Entitlements or access keys
Other Integrations – Google Translate or enterprise application
Chatter Licenses – Not all licenses support all Chatter features
UI Flow - When/how to link back to Salesforce

7. Chatter Everywhere Demo
External Chatter locations
▪ Intranet, SharePoint, Legacy App, Browser sidebar
Chatter Features
▪ Feeds – comments, likes, posts
▪ Navigation – Feeds, People, Groups
▪ Custom features – branding, views, language translation
Container Integration
▪ Show/hide, link post population, new feed item notification

8. External Chatter App – First Try
Cross-Domain
Request
X

9. External Chatter App – High Level Architecture

10. Architecture of an Externalized Chatter Application

11. Chatter Everywhere Technologies
Browser client
• AngularJS - Single-page app, HTML markup, two-way data binding,
MVCish, dependency injection, handles JSON well
Chatter Proxy Server
• Heroku for price, scalability, add-ons (app monitoring, db)
• Node.JS for package mgmt, Heroku support, fast & non-blocking
• Nforce for authentication (Salesforce Oauth2 web server flow), utilities
• Npm.Crypto.js for refresh token encryption
• Google Translate APIs for language translation

12. Chatter REST API Authentication
OAuth2
▪ Requires one-time authentication & authorization step by the user
▪ Provides permanent (revocable) access via refresh token.
▪ Treat refresh tokens as securely as a password (encrypt it)
Salesforce Session ID
▪ Direct replacement for Oauth token for custom Chatter apps in VisualForce
SSO & Connected Apps
▪ <company>.my.salesforce.com as your OAuth2 endpoint +
Connected Apps = users skip authentication and authorization

13. Chatter REST APIs for User Data
/connect/organization – determine if feed polling enabled
/chatter/feeds/news/me/is-modified – new feed item available?
/chatter/feeds/to/me/feed-items – my feed
/chatter/feeds/news/<userid>/feed-items – user’s feed
/chatter/users/<userid> – user profile
/chatter/users/me/following/filterType==005 – users I’m following
/chatter/users?q=<chars>* – search by user name

14. Code: AngularJS Client
<!-- CHATTER PUBLISHER -->
<div data-chatterpublisher></div>
<!-- CHATTER FEED -->
<ul class="feedcontainer actionsOnHoverEnabled" data-ng-controller="MainCtrl">
<!-- FEED ITEMS -->
<li ng-repeat="item in feed.items">
<div data-translatablefeed="item"/>
</li>
</ul>
<!-- SHOW MORE BUTTON -->
<div class="cxshowmorefeeditemscontainer" data-ng-show="feed.nextPageUrl != null">
<a href data-ng-click="loadNextPage($event,feed.nextPageUrl);">Show More</a>
</div>

15. Chatter Proxy Server – Sequence Of Events

16. A Few Specific Technical Challenges
Chatter Images – URLs are provided in JSON, but access token
expires, URL fails without proxy server being aware
No sorting on Group and User discovery feeds
New feed item notification
• “Enabled Chatter Feed Polling” must be enabled in Salesforce org.
• Query Identity service, poll isModifiedUrl on the “me” feed
Translations – may fail without warning, UI looks unresponsive

17. All about Appirio
Technology-enabled professional services, supported by
1,000 cloud experts and a 600,000+ cloud developer community

18. Michael Press
Technical Architect &
Cloud Asset Library Program Lead
Appirio
michael@appirio.com

20. Chatter Everywhere - Implementation
Product Manager/Architect fulltime for 3 months
45 CloudSpokes contests
$35,000 total prizes
AngularJS, NodeJS on Heroku, Chatter REST APIs
XXX lines of code
< $100/month Heroku fees

21. Externalizing Chatter With 1 Line Of Code
Conversations
Chatter > Groups > Marketing Group
<iframe src="https://chattereverywhere.com/base#?record=000012345&notify&refreshbtn”/>
server
branding
context
(feed)
container
options
app
options

22. Demo Backup Slides – Chatter externalized locations
Screenshot
of CE in
SharePoint
Screenshot
of CE in
Intranet
Screenshot
of CE in
Legacy App
Screenshot
of CE in
browser
sidebar

23. Demo Backup Slides – Chatter Everywhere features
Screenshot of CE
feed w/
•
Text, link, image
feed items
•
Comments
•
Likes
•
Filled in post
form
Screenshot
of CE
Group
Search
w/typeahead
Screenshot
of CE
People
Search
w/typeahead
Screenshot
of CE
Gallery View
Screenshot
of CE
custom
branding –
presscorp,
avon
Screenshot
of CE
language
translation

24. Demo Backup Slides – Container Integration
Screenshot of link
post integration
Screenshot
of new feed
item
notification
Screenshot
of
hide/close
integration