Chatter EverywhereExternalizing Chatter with Heroku and the Chatter REST APIs

Michael Press, Technical Architect & Cloud Asset Library Program Lead, Appiriomichael@appirio.com

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

Michael Press

Technical Architect & Cloud Asset Library Program Lead

Appiriomichael@appirio.com

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&notify&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