SlideShare a Scribd company logo
1 of 24
Download to read offline
Chatter Everywhere
Externalizing Chatter with Heroku and the Chatter REST APIs
Michael Press, Technical Architect & Cloud Asset Library Program Lead, Appirio
michael@appirio.com
Social Collaboration On Enterprise Data In Salesforce

sforce
Sale

Co

nities
mmu

e
alForc
Visu
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
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+
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
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
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
External Chatter App – First Try

Cross-Domain
Request

X
External Chatter App – High Level Architecture
Architecture of an Externalized Chatter Application
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
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
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 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
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
Appirio
michael@appirio.com
Externalizing Chatter Using Heroku, Angular.js, Node.js and Chatter REST APIs
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
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
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
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
Demo Backup Slides – Container Integration
Screenshot of link
post integration

Screenshot
of new feed
item
notification

Screenshot
of
hide/close
integration

More Related Content

Viewers also liked

Build Consumer-Facing Apps with Heroku Connect
Build Consumer-Facing Apps with Heroku ConnectBuild Consumer-Facing Apps with Heroku Connect
Build Consumer-Facing Apps with Heroku ConnectJeff Douglas
 
CMOs Customer Experience Program Playbook
CMOs Customer Experience Program PlaybookCMOs Customer Experience Program Playbook
CMOs Customer Experience Program PlaybookCX Pilots
 
Best Practices for Lightning Apps
Best Practices for Lightning AppsBest Practices for Lightning Apps
Best Practices for Lightning AppsMark Adcock
 
Building apps faster with lightning and winter '17
Building apps faster with lightning and winter '17Building apps faster with lightning and winter '17
Building apps faster with lightning and winter '17Salesforce Developers
 
Concept Of Key Account Management
Concept Of Key Account ManagementConcept Of Key Account Management
Concept Of Key Account ManagementRavi Ayilavarapu
 
B2B Customer Experience Management Best Practice Study PREVIEW SAMPLE
B2B Customer Experience Management Best Practice Study PREVIEW SAMPLEB2B Customer Experience Management Best Practice Study PREVIEW SAMPLE
B2B Customer Experience Management Best Practice Study PREVIEW SAMPLEClearAction
 
What is Customer Experience?
What is Customer Experience?What is Customer Experience?
What is Customer Experience?ClearAction
 
Go-To-Market Framework
Go-To-Market FrameworkGo-To-Market Framework
Go-To-Market FrameworkDemand Metric
 
Sales Enablement Framework
Sales Enablement FrameworkSales Enablement Framework
Sales Enablement FrameworkDemand Metric
 
Patterns of Enterprise Application Architecture (by example)
Patterns of Enterprise Application Architecture (by example)Patterns of Enterprise Application Architecture (by example)
Patterns of Enterprise Application Architecture (by example)Paulo Gandra de Sousa
 
Sales, Sales Management, Sales Strategy
Sales, Sales Management, Sales StrategySales, Sales Management, Sales Strategy
Sales, Sales Management, Sales StrategyBrian Halligan
 
What is Key Account Management
What is Key Account ManagementWhat is Key Account Management
What is Key Account ManagementSteve Williams
 

Viewers also liked (13)

Build Consumer-Facing Apps with Heroku Connect
Build Consumer-Facing Apps with Heroku ConnectBuild Consumer-Facing Apps with Heroku Connect
Build Consumer-Facing Apps with Heroku Connect
 
CMOs Customer Experience Program Playbook
CMOs Customer Experience Program PlaybookCMOs Customer Experience Program Playbook
CMOs Customer Experience Program Playbook
 
Best Practices for Lightning Apps
Best Practices for Lightning AppsBest Practices for Lightning Apps
Best Practices for Lightning Apps
 
Building apps faster with lightning and winter '17
Building apps faster with lightning and winter '17Building apps faster with lightning and winter '17
Building apps faster with lightning and winter '17
 
Concept Of Key Account Management
Concept Of Key Account ManagementConcept Of Key Account Management
Concept Of Key Account Management
 
B2B Customer Experience Management Best Practice Study PREVIEW SAMPLE
B2B Customer Experience Management Best Practice Study PREVIEW SAMPLEB2B Customer Experience Management Best Practice Study PREVIEW SAMPLE
B2B Customer Experience Management Best Practice Study PREVIEW SAMPLE
 
CRM Framework
CRM FrameworkCRM Framework
CRM Framework
 
What is Customer Experience?
What is Customer Experience?What is Customer Experience?
What is Customer Experience?
 
Go-To-Market Framework
Go-To-Market FrameworkGo-To-Market Framework
Go-To-Market Framework
 
Sales Enablement Framework
Sales Enablement FrameworkSales Enablement Framework
Sales Enablement Framework
 
Patterns of Enterprise Application Architecture (by example)
Patterns of Enterprise Application Architecture (by example)Patterns of Enterprise Application Architecture (by example)
Patterns of Enterprise Application Architecture (by example)
 
Sales, Sales Management, Sales Strategy
Sales, Sales Management, Sales StrategySales, Sales Management, Sales Strategy
Sales, Sales Management, Sales Strategy
 
What is Key Account Management
What is Key Account ManagementWhat is Key Account Management
What is Key Account Management
 

Similar to Externalizing Chatter Using Heroku, Angular.js, Node.js and Chatter REST APIs

Sviluppare Applicazioni Real Time con AppSync Deck.pptx
Sviluppare Applicazioni Real Time con AppSync Deck.pptxSviluppare Applicazioni Real Time con AppSync Deck.pptx
Sviluppare Applicazioni Real Time con AppSync Deck.pptxAmazon Web Services
 
Silverlight Document Search Engine
Silverlight Document Search EngineSilverlight Document Search Engine
Silverlight Document Search EngineMustata Bogdan
 
Social Photos - My presentation at Microsoft Tech Day
Social Photos - My presentation at Microsoft Tech DaySocial Photos - My presentation at Microsoft Tech Day
Social Photos - My presentation at Microsoft Tech DayTechMaster Vietnam
 
Understanding Identity in the World of Web APIs – Ronnie Mitra, API Architec...
Understanding Identity in the World of Web APIs – Ronnie Mitra,  API Architec...Understanding Identity in the World of Web APIs – Ronnie Mitra,  API Architec...
Understanding Identity in the World of Web APIs – Ronnie Mitra, API Architec...CA API Management
 
Dave Carroll Application Services Salesforce
Dave Carroll Application Services SalesforceDave Carroll Application Services Salesforce
Dave Carroll Application Services Salesforcedeimos
 
Python - A Comprehensive Programming Language
Python - A Comprehensive Programming LanguagePython - A Comprehensive Programming Language
Python - A Comprehensive Programming LanguageTsungWei Hu
 
First Look at Azure Logic Apps (BAUG)
First Look at Azure Logic Apps (BAUG)First Look at Azure Logic Apps (BAUG)
First Look at Azure Logic Apps (BAUG)Daniel Toomey
 
FIWARE Identity Management and Access Control
FIWARE Identity Management and Access ControlFIWARE Identity Management and Access Control
FIWARE Identity Management and Access ControlFIWARE
 
PaaS + Appcelerator = WIN
PaaS + Appcelerator = WINPaaS + Appcelerator = WIN
PaaS + Appcelerator = WINAaron Saunders
 
Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright
Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan WrightSummit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright
Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan WrightAndrew Ly
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresherIvano Malavolta
 
FIWARE Training: Identity Management and Access Control
FIWARE Training: Identity Management and Access ControlFIWARE Training: Identity Management and Access Control
FIWARE Training: Identity Management and Access ControlFIWARE
 
Application Services On The Web Sales Forcecom
Application Services On The Web Sales ForcecomApplication Services On The Web Sales Forcecom
Application Services On The Web Sales ForcecomQConLondon2008
 
Building Desktop & Mobile Apps with Sencha and Force.com
Building Desktop & Mobile Apps with Sencha and Force.comBuilding Desktop & Mobile Apps with Sencha and Force.com
Building Desktop & Mobile Apps with Sencha and Force.comSalesforce Developers
 
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocialCrossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocialBastian Hofmann
 

Similar to Externalizing Chatter Using Heroku, Angular.js, Node.js and Chatter REST APIs (20)

Sviluppare Applicazioni Real Time con AppSync Deck.pptx
Sviluppare Applicazioni Real Time con AppSync Deck.pptxSviluppare Applicazioni Real Time con AppSync Deck.pptx
Sviluppare Applicazioni Real Time con AppSync Deck.pptx
 
Silverlight Document Search Engine
Silverlight Document Search EngineSilverlight Document Search Engine
Silverlight Document Search Engine
 
Social Photos - My presentation at Microsoft Tech Day
Social Photos - My presentation at Microsoft Tech DaySocial Photos - My presentation at Microsoft Tech Day
Social Photos - My presentation at Microsoft Tech Day
 
Introduction to Force.com
Introduction to Force.comIntroduction to Force.com
Introduction to Force.com
 
shiv_chandra_pathak
shiv_chandra_pathakshiv_chandra_pathak
shiv_chandra_pathak
 
RavenDB overview
RavenDB overviewRavenDB overview
RavenDB overview
 
Understanding Identity in the World of Web APIs – Ronnie Mitra, API Architec...
Understanding Identity in the World of Web APIs – Ronnie Mitra,  API Architec...Understanding Identity in the World of Web APIs – Ronnie Mitra,  API Architec...
Understanding Identity in the World of Web APIs – Ronnie Mitra, API Architec...
 
Andy Malone - The new office 365 for it pro's
Andy Malone - The new office 365 for it pro'sAndy Malone - The new office 365 for it pro's
Andy Malone - The new office 365 for it pro's
 
Dave Carroll Application Services Salesforce
Dave Carroll Application Services SalesforceDave Carroll Application Services Salesforce
Dave Carroll Application Services Salesforce
 
Python - A Comprehensive Programming Language
Python - A Comprehensive Programming LanguagePython - A Comprehensive Programming Language
Python - A Comprehensive Programming Language
 
First Look at Azure Logic Apps (BAUG)
First Look at Azure Logic Apps (BAUG)First Look at Azure Logic Apps (BAUG)
First Look at Azure Logic Apps (BAUG)
 
FIWARE Identity Management and Access Control
FIWARE Identity Management and Access ControlFIWARE Identity Management and Access Control
FIWARE Identity Management and Access Control
 
PaaS + Appcelerator = WIN
PaaS + Appcelerator = WINPaaS + Appcelerator = WIN
PaaS + Appcelerator = WIN
 
Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright
Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan WrightSummit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright
Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
FIWARE Training: Identity Management and Access Control
FIWARE Training: Identity Management and Access ControlFIWARE Training: Identity Management and Access Control
FIWARE Training: Identity Management and Access Control
 
Application Services On The Web Sales Forcecom
Application Services On The Web Sales ForcecomApplication Services On The Web Sales Forcecom
Application Services On The Web Sales Forcecom
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
Building Desktop & Mobile Apps with Sencha and Force.com
Building Desktop & Mobile Apps with Sencha and Force.comBuilding Desktop & Mobile Apps with Sencha and Force.com
Building Desktop & Mobile Apps with Sencha and Force.com
 
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocialCrossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
 

More from Salesforce Developers

Sample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSalesforce Developers
 
Maximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceMaximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceSalesforce Developers
 
Local development with Open Source Base Components
Local development with Open Source Base ComponentsLocal development with Open Source Base Components
Local development with Open Source Base ComponentsSalesforce Developers
 
TrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsTrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsSalesforce Developers
 
Why developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaWhy developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaSalesforce Developers
 
CodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentCodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentSalesforce Developers
 
CodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsCodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsSalesforce Developers
 
Enterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsEnterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsSalesforce Developers
 
TrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer HighlightsTrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer HighlightsSalesforce Developers
 
Lightning web components - Episode 4 : Security and Testing
Lightning web components  - Episode 4 : Security and TestingLightning web components  - Episode 4 : Security and Testing
Lightning web components - Episode 4 : Security and TestingSalesforce Developers
 
LWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilityLWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilitySalesforce Developers
 
Lightning web components episode 2- work with salesforce data
Lightning web components   episode 2- work with salesforce dataLightning web components   episode 2- work with salesforce data
Lightning web components episode 2- work with salesforce dataSalesforce Developers
 
Lightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionLightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionSalesforce Developers
 
Migrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCPMigrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCPSalesforce Developers
 
Scale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in SalesforceScale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in SalesforceSalesforce Developers
 
Replicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data CaptureReplicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data CaptureSalesforce Developers
 
Modern Development with Salesforce DX
Modern Development with Salesforce DXModern Development with Salesforce DX
Modern Development with Salesforce DXSalesforce Developers
 
Integrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS ConnectIntegrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS ConnectSalesforce Developers
 

More from Salesforce Developers (20)

Sample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce Developers
 
Maximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceMaximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component Performance
 
Local development with Open Source Base Components
Local development with Open Source Base ComponentsLocal development with Open Source Base Components
Local development with Open Source Base Components
 
TrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsTrailheaDX India : Developer Highlights
TrailheaDX India : Developer Highlights
 
Why developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaWhy developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX India
 
CodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentCodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local Development
 
CodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsCodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web Components
 
Enterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsEnterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web Components
 
TrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer HighlightsTrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer Highlights
 
Live coding with LWC
Live coding with LWCLive coding with LWC
Live coding with LWC
 
Lightning web components - Episode 4 : Security and Testing
Lightning web components  - Episode 4 : Security and TestingLightning web components  - Episode 4 : Security and Testing
Lightning web components - Episode 4 : Security and Testing
 
LWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilityLWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura Interoperability
 
Lightning web components episode 2- work with salesforce data
Lightning web components   episode 2- work with salesforce dataLightning web components   episode 2- work with salesforce data
Lightning web components episode 2- work with salesforce data
 
Lightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionLightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An Introduction
 
Migrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCPMigrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCP
 
Scale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in SalesforceScale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in Salesforce
 
Replicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data CaptureReplicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data Capture
 
Modern Development with Salesforce DX
Modern Development with Salesforce DXModern Development with Salesforce DX
Modern Development with Salesforce DX
 
Get Into Lightning Flow Development
Get Into Lightning Flow DevelopmentGet Into Lightning Flow Development
Get Into Lightning Flow Development
 
Integrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS ConnectIntegrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS Connect
 

Recently uploaded

Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 

Recently uploaded (20)

Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 

Externalizing Chatter Using Heroku, Angular.js, Node.js and Chatter REST APIs

  • 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