Chatter EverywhereExternalizing Chatter with Heroku and the Chatter REST APIs
Michael Press, Technical Architect & Cloud Asset Library Program Lead, [email protected]
Social Collaboration On Enterprise Data In Salesforce
SalesforceCommunities
VisualForce
Collaboration On Enterprise Data Outside of Salesforce
CommentsOrder Detail
Chatter > Order #1234
ConversationsDocument Libraries
Chatter > Groups > Marketing Group
Browser
SharePoint Legacy
System
Intranet
Chatter Everywhere - Design GoalsTrivial installation – embed Chatter in any app with 1 line of codeSaaS Subscription - Chatter As A ServiceStandard UX - Closely follow standard Chatter look-and-feelStandard Salesforce Authentication – Oauth2Adaptable - Conform to any container sizeContextual - Parameterized context & container integration Customizable – Custom branding, language translation, etc. Browser-independent– Chrome, Firefox, IE 8+
Challenges to Externalizing ChatterChatter REST APIs return data – you need to write a UICross-Domain restriction – can’t directly call APIs from clientAuthentication & AuthorizationRefresh Token storage & securityMultiple apps & multiple languages
Considerations for an External Chatter AppUser Interface – Which Chatter features do you need?Cross-Domain browser restrictions – Where is your proxy server?Authentication – Oauth2 vs. Session ID vs. SSORefresh Token security – How to encrypt? Store in cookie or db?Server Security – Entitlements or access keysOther Integrations – Google Translate or enterprise application Chatter Licenses – Not all licenses support all Chatter features UI Flow - When/how to link back to Salesforce
Chatter Everywhere DemoExternal Chatter locations
▪ Intranet, SharePoint, Legacy App, Browser sidebarChatter 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
External Chatter App – First Try
Cross-Domain Request
X
External Chatter App – High Level Architecture
Architecture of an Externalized Chatter Application
Chatter Everywhere TechnologiesBrowser 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
Chatter REST API AuthenticationOAuth2
▪ 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
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
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>
Chatter Proxy Server – Sequence Of Events
A Few Specific Technical ChallengesChatter Images – URLs are provided in JSON, but access token expires, URL fails without proxy server being awareNo sorting on Group and User discovery feedsNew 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
All about Appirio
Technology-enabled professional services, supported by 1,000 cloud experts and a 600,000+ cloud developer community
Chatter Everywhere - ImplementationProduct Manager/Architect fulltime for 3 months45 CloudSpokes contests $35,000 total prizesAngularJS, NodeJS on Heroku, Chatter REST APIsXXX lines of code< $100/month Heroku fees
Externalizing Chatter With 1 Line Of Code
<iframe src="https://chattereverywhere.com/base#?record=000012345¬ify&refreshbtn”/>
brandingserver context (feed)
container options
app options
Conversations
Chatter > Groups > Marketing Group
Demo Backup Slides – Chatter externalized locationsScreenshot of CE in SharePoint
Screenshot of CE in Intranet
Screenshot of CE in Legacy App
Screenshot of CE in browser sidebar
Demo Backup Slides – Chatter Everywhere featuresScreenshot of CE feed w/• Text, link, image
feed items• Comments• Likes• Filled in post
form
Screenshot of CE Group Search w/type-ahead
Screenshot of CE People Search w/type-ahead
Screenshot of CE Gallery View
Screenshot of CE custom branding – presscorp, avon
Screenshot of CE language translation
Demo Backup Slides – Container IntegrationScreenshot of link post integration
Screenshot of new feed item notification
Screenshot of hide/close integration
