SlideShare a Scribd company logo
1 of 25
Integrating Web Apps with
Force.com Canvas
Richard Donkin
@rdonkin
CTO, Cloudfind
cloudfindhq.com
Salesforce1 World Tour - May 22, 2014
www.slideshare.net/rdonkin
About Cloudfind
 xxxx
Smart tagging makes it simple to find
and manage files in the cloud
Brings collateral into Salesforce so
that teams close deals faster
Ideal World
Real World
Ideal World
“All our apps are on Salesforce”
Real World
ERP
SCM
…
Field Service
Project Management
…
HR
Cloud
Storage
Sales
Service
Marketing
Real World
ERP
SCM
…
Field Service
Project Management
…
HR
Cloud
Storage
Sales
Service
Marketing
Force.com Canvas iframe
Real World
ERP
SCM
…
Field Service
Project Management
…
HR
Cloud
Storage
Sales
Service
Marketing
Canvas
integration via
Cloudfind app
Show auto
tagged files from
cloud storage
No need to hunt
through folders
Real World
ERP
SCM
…
Field Service
Project Management
…
HR
Cloud
Storage
Sales
Service
Marketing
Any Salesforce Page
Any Web Application
(full page or part)
UI integration
ERP
SCM
…
Field Service
Project Management
…
HR
Cloud
Storage
Sales
Service
Marketing
Any Web
Application
Any Salesforce
Page
Any Web Application
Salesforce1
Demo – Canvas for desktops
Why not build a Force.com UI?
 Assume you have a web app outside Salesforce
 Using Force.com, build a new UI for the app:
• Existing skills for Salesforce developers
• Easy data integration via Apex
• Classic model used by ISVs
 But…
• Must replicate UI and integrate with app
• Two UIs: one for Salesforce, one for non-Salesforce
• Existing app must have an API
Why use Canvas?
With Canvas:
• No re-building – just embed existing UI
• Any language: Java, C#, Python, Ruby, PHP, JavaScript, …
• Flexible deployment:
• Cloud - Heroku (PaaS), Amazon AWS (IaaS)
• On-premise
• Any technology, e.g. NoSQL, Big Data, …
• “Pay as you go” resources
• Easier limits: generous allocation for Canvas
• Off-platform resources
• Use daily limits on data integration, not UI
Where can you use Canvas?
Wherever Visualforce works:
• Custom tab
• Object detail page
• Chatter publisher
• Chatter feed
• Chatter page
Chatter publisher
Chatter feed
Canvas for mobile with Salesforce1
Integrate with Salesforce1, through Canvas
• Visualforce page setup is one click!
• Ensure web app works for mobile
• Fonts, touch targets, responsiveness, …
• Can add Canvas app to Salesforce1 menu
• Usage: Canvas app is view-only in main page
• Touch this area to interact on separate page
Demo – Canvas for Salesforce1
How to embed with Canvas – real-life example
 Height - 600 pixels works for laptops at 1366x768 or higher
– Test with your app, and adjust for Saleforce1 on mobile
 Width - 100% allows horizontal resizing (and use 100% in page layout)
 Parameter Format – JSON, XML, …
 Parameter Encoding – prevent XSS security issues
<apex:page>
<apex:canvasApp
namespacePrefix="MyApp" applicationName="MyApp"
height="600px" width="100%"
parameters=”{id:'{!Account.Id}', name: '{!JSENCODE(Account.Name)}'}”
/>
<apex:page>
How Canvas works
 Salesforce provides context for the Canvas “frame”
– User’s authentication is passed through:
• Signed Request – no authorization step, some OAuth permissions
• OAuth Web Server flow – extra permission allows background API use
– Included in request: org, time zone, user, OAuth token, …
– Use Canvas Framework SDK for Java - or roll your own
 Use Canvas OAuth token for Salesforce access:
– Browser: Canvas SDK for JavaScript
• Wrapper around REST, SOAP and Chatter APIs
– Backend: REST, SOAP and other APIs from your web app
Canvas-enabling (1): Add Canvas to the
App
 If you have source code access for the app:
– Make the app work in iframe, and with Canvas authentication
– Selectively disable any frame-busting and anti-clickjacking
 Can open new tab if required – e.g. Google OAuth2
Salesforce UI
Canvas iframe Canvas Web App
Canvas Signed
Request, and AJAX
User authorizes
Cloudfind app
Cloudfind
confirmation
page
Outside Canvas
Canvas-enabling (2): new Canvas “UI app”
 If you don’t have source code for an enterprise app:
– Write a small custom “UI app” on top
– Focused UI for specific tasks or views
– No data storage in Canvas app
Salesforce UI
Canvas iframe Canvas “UI App”
Canvas Signed
Request, and AJAX
Enterprise app
App API
Browser Tips: Internet Explorer
• Cookie setting requires a P3P header in HTTP response
• Configure web server to deliver this on all pages
• Once configured, works without user interaction
21
$ curl -si https://www.facebook.com/ | grep P3P
P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"
Browser Tips: Safari on OS X and iOS
• Cookie setting requires user interaction with non-framed page
• First cookie set by app requires two clicks per user device
• 1. Try to set a cookie, and if you can’t …
• Ask user to ‘Please Register Your Device’ within iframe
• 2. User clicks Register
• Open new browser tab to show ‘almost done’ page
• 3. User clicks Finish Registration
• Canvas app sets any cookie
• Allowed by Safari due to the button click interaction in this ‘first party’ tab
• 4. Web app’s JavaScript calls into main iframe to finish
• Future sessions - cookie-setting in iframe will work
Canvas Resources
http://bit.ly/ForceCanvas
• Main DeveloperForce page
http://www.salesforce.com/us/developer/docs/platform_connect/
• Canvas Developer Guide
http://www.are4.us/best-practices/salesforce-canvas/
• Architecture overview
Summary
 Salesforce as the “single screen” for key apps
Thank You
Richard Donkin
richard@cloudfindhq.com
@rdonkin
http://cloudfindhq.com
@CloudfindHQ
www.slideshare.net/rdonkin
Slides, including notes

More Related Content

What's hot

Building Canvas Apps with ASP.NET and Azure
Building Canvas Apps with ASP.NET and AzureBuilding Canvas Apps with ASP.NET and Azure
Building Canvas Apps with ASP.NET and AzureSalesforce Developers
 
Seamless Authentication with Force.com Canvas
Seamless Authentication with Force.com CanvasSeamless Authentication with Force.com Canvas
Seamless Authentication with Force.com CanvasSalesforce Developers
 
Xamarin.Forms Hands On Lab (Intermediate)
Xamarin.Forms Hands On Lab (Intermediate)Xamarin.Forms Hands On Lab (Intermediate)
Xamarin.Forms Hands On Lab (Intermediate)Cheah Eng Soon
 
Summer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSummer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSalesforce Developers
 
Intégrez vos applications métiers dans Microsoft Teams
Intégrez vos applications métiers dans Microsoft TeamsIntégrez vos applications métiers dans Microsoft Teams
Intégrez vos applications métiers dans Microsoft TeamsGuillaume Meyer
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceMagic Software
 
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSara Cannon
 
Salesforce1 UX Overview for ISVs and Partners
Salesforce1 UX Overview for ISVs and PartnersSalesforce1 UX Overview for ISVs and Partners
Salesforce1 UX Overview for ISVs and PartnersSalesforce Partners
 
Quickly Build a Native Mobile App for your Community using Salesforce Mobile SDK
Quickly Build a Native Mobile App for your Community using Salesforce Mobile SDKQuickly Build a Native Mobile App for your Community using Salesforce Mobile SDK
Quickly Build a Native Mobile App for your Community using Salesforce Mobile SDKMichael Welburn
 
Visualforce in Salesforce1: Optimizing your User Interface for Mobile
Visualforce in Salesforce1: Optimizing your User Interface for MobileVisualforce in Salesforce1: Optimizing your User Interface for Mobile
Visualforce in Salesforce1: Optimizing your User Interface for MobileSalesforce Developers
 
Building a Rich Social Network Application
Building a Rich Social Network ApplicationBuilding a Rich Social Network Application
Building a Rich Social Network Applicationgoodfriday
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGapMihai Corlan
 
Usability In Mobile Applications
Usability In Mobile ApplicationsUsability In Mobile Applications
Usability In Mobile ApplicationsBruno Figueiredo
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonSara Cannon
 

What's hot (20)

Building Canvas Apps with ASP.NET and Azure
Building Canvas Apps with ASP.NET and AzureBuilding Canvas Apps with ASP.NET and Azure
Building Canvas Apps with ASP.NET and Azure
 
Seamless Authentication with Force.com Canvas
Seamless Authentication with Force.com CanvasSeamless Authentication with Force.com Canvas
Seamless Authentication with Force.com Canvas
 
1 + 1 = 3
1 + 1 = 31 + 1 = 3
1 + 1 = 3
 
Xamarin.Forms Hands On Lab (Intermediate)
Xamarin.Forms Hands On Lab (Intermediate)Xamarin.Forms Hands On Lab (Intermediate)
Xamarin.Forms Hands On Lab (Intermediate)
 
Summer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSummer '13 Developer Preview Webinar
Summer '13 Developer Preview Webinar
 
Intégrez vos applications métiers dans Microsoft Teams
Intégrez vos applications métiers dans Microsoft TeamsIntégrez vos applications métiers dans Microsoft Teams
Intégrez vos applications métiers dans Microsoft Teams
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
 
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
 
Salesforce1 UX Overview for ISVs and Partners
Salesforce1 UX Overview for ISVs and PartnersSalesforce1 UX Overview for ISVs and Partners
Salesforce1 UX Overview for ISVs and Partners
 
Smart Design
Smart Design Smart Design
Smart Design
 
IconFonts
IconFontsIconFonts
IconFonts
 
Quickly Build a Native Mobile App for your Community using Salesforce Mobile SDK
Quickly Build a Native Mobile App for your Community using Salesforce Mobile SDKQuickly Build a Native Mobile App for your Community using Salesforce Mobile SDK
Quickly Build a Native Mobile App for your Community using Salesforce Mobile SDK
 
Using Visualforce in Salesforce1
Using Visualforce in Salesforce1Using Visualforce in Salesforce1
Using Visualforce in Salesforce1
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Visualforce in Salesforce1: Optimizing your User Interface for Mobile
Visualforce in Salesforce1: Optimizing your User Interface for MobileVisualforce in Salesforce1: Optimizing your User Interface for Mobile
Visualforce in Salesforce1: Optimizing your User Interface for Mobile
 
Salesforce1 for Developers
Salesforce1 for DevelopersSalesforce1 for Developers
Salesforce1 for Developers
 
Building a Rich Social Network Application
Building a Rich Social Network ApplicationBuilding a Rich Social Network Application
Building a Rich Social Network Application
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGap
 
Usability In Mobile Applications
Usability In Mobile ApplicationsUsability In Mobile Applications
Usability In Mobile Applications
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp London
 

Similar to Integrating Web Apps with Canvas - Salesforce1 World Tour

Introduction to WOLF Platform As A Service
Introduction to WOLF Platform As A ServiceIntroduction to WOLF Platform As A Service
Introduction to WOLF Platform As A ServiceCloudComputing
 
SharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning ModelsSharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning ModelsShailen Sukul
 
Enhance model driven embedded canvas app here is all that you need to know!
Enhance model driven embedded canvas app  here is all that you need to know!Enhance model driven embedded canvas app  here is all that you need to know!
Enhance model driven embedded canvas app here is all that you need to know!Concetto Labs
 
Enhance model driven embedded canvas app here is all that you need to know!
Enhance model driven embedded canvas app  here is all that you need to know!Enhance model driven embedded canvas app  here is all that you need to know!
Enhance model driven embedded canvas app here is all that you need to know!Heli Thakkar
 
Aura Framework and Lightning (Nikolay Zenko and Alexey Filippov)
Aura Framework and Lightning (Nikolay Zenko and Alexey Filippov)Aura Framework and Lightning (Nikolay Zenko and Alexey Filippov)
Aura Framework and Lightning (Nikolay Zenko and Alexey Filippov)Yury Bondarau
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
 
Salesforce1 dev week UYSDUG 2014 - the force canvas spark
Salesforce1 dev week UYSDUG 2014 - the force canvas sparkSalesforce1 dev week UYSDUG 2014 - the force canvas spark
Salesforce1 dev week UYSDUG 2014 - the force canvas sparkAldo Fernandez
 
Force.com Canvas: 2 Case Studies and a Roadmap
Force.com Canvas: 2 Case Studies and a RoadmapForce.com Canvas: 2 Case Studies and a Roadmap
Force.com Canvas: 2 Case Studies and a RoadmapSalesforce Developers
 
Hands-on Workshop: Intermediate Development with Heroku and Force.com
Hands-on Workshop: Intermediate Development with Heroku and Force.comHands-on Workshop: Intermediate Development with Heroku and Force.com
Hands-on Workshop: Intermediate Development with Heroku and Force.comSalesforce Developers
 
Dreamwares: Lightning Experience
Dreamwares: Lightning ExperienceDreamwares: Lightning Experience
Dreamwares: Lightning ExperienceAmit Ahuja
 
Creating Mobile Aps without Coding
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without CodingJack Molisani
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...Robert Nyman
 
OrangeScape Cool Facts that you didn't know!
OrangeScape Cool Facts that you didn't know!OrangeScape Cool Facts that you didn't know!
OrangeScape Cool Facts that you didn't know!Ashish Bhagwat
 
Building your own calendly using amazon app sync
Building your own calendly using amazon app syncBuilding your own calendly using amazon app sync
Building your own calendly using amazon app syncDhaval Nagar
 
Busy Bee Application Develompent Platform
Busy Bee Application Develompent PlatformBusy Bee Application Develompent Platform
Busy Bee Application Develompent PlatformUtkarsh Shukla
 
Xamarin Dev Days - Introduction to Xamarin.Forms, Insights, Test Cloud
Xamarin Dev Days -  Introduction to Xamarin.Forms, Insights, Test CloudXamarin Dev Days -  Introduction to Xamarin.Forms, Insights, Test Cloud
Xamarin Dev Days - Introduction to Xamarin.Forms, Insights, Test CloudJames Montemagno
 
Xamarin overview droidcon.tn
Xamarin overview   droidcon.tnXamarin overview   droidcon.tn
Xamarin overview droidcon.tnHoussem Dellai
 
PWA basics for developers
PWA basics for developersPWA basics for developers
PWA basics for developersFilip Rakowski
 

Similar to Integrating Web Apps with Canvas - Salesforce1 World Tour (20)

Introduction to WOLF Platform As A Service
Introduction to WOLF Platform As A ServiceIntroduction to WOLF Platform As A Service
Introduction to WOLF Platform As A Service
 
SharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning ModelsSharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning Models
 
Enhance model driven embedded canvas app here is all that you need to know!
Enhance model driven embedded canvas app  here is all that you need to know!Enhance model driven embedded canvas app  here is all that you need to know!
Enhance model driven embedded canvas app here is all that you need to know!
 
Enhance model driven embedded canvas app here is all that you need to know!
Enhance model driven embedded canvas app  here is all that you need to know!Enhance model driven embedded canvas app  here is all that you need to know!
Enhance model driven embedded canvas app here is all that you need to know!
 
Aura Framework and Lightning (Nikolay Zenko and Alexey Filippov)
Aura Framework and Lightning (Nikolay Zenko and Alexey Filippov)Aura Framework and Lightning (Nikolay Zenko and Alexey Filippov)
Aura Framework and Lightning (Nikolay Zenko and Alexey Filippov)
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Salesforce1 dev week UYSDUG 2014 - the force canvas spark
Salesforce1 dev week UYSDUG 2014 - the force canvas sparkSalesforce1 dev week UYSDUG 2014 - the force canvas spark
Salesforce1 dev week UYSDUG 2014 - the force canvas spark
 
Force.com Canvas: 2 Case Studies and a Roadmap
Force.com Canvas: 2 Case Studies and a RoadmapForce.com Canvas: 2 Case Studies and a Roadmap
Force.com Canvas: 2 Case Studies and a Roadmap
 
Hands-on Workshop: Intermediate Development with Heroku and Force.com
Hands-on Workshop: Intermediate Development with Heroku and Force.comHands-on Workshop: Intermediate Development with Heroku and Force.com
Hands-on Workshop: Intermediate Development with Heroku and Force.com
 
Salesforce Lightning
Salesforce LightningSalesforce Lightning
Salesforce Lightning
 
Dreamwares: Lightning Experience
Dreamwares: Lightning ExperienceDreamwares: Lightning Experience
Dreamwares: Lightning Experience
 
Creating Mobile Aps without Coding
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without Coding
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
OrangeScape Cool Facts that you didn't know!
OrangeScape Cool Facts that you didn't know!OrangeScape Cool Facts that you didn't know!
OrangeScape Cool Facts that you didn't know!
 
Building your own calendly using amazon app sync
Building your own calendly using amazon app syncBuilding your own calendly using amazon app sync
Building your own calendly using amazon app sync
 
Busy Bee Application Develompent Platform
Busy Bee Application Develompent PlatformBusy Bee Application Develompent Platform
Busy Bee Application Develompent Platform
 
Xamarin Dev Days - Introduction to Xamarin.Forms, Insights, Test Cloud
Xamarin Dev Days -  Introduction to Xamarin.Forms, Insights, Test CloudXamarin Dev Days -  Introduction to Xamarin.Forms, Insights, Test Cloud
Xamarin Dev Days - Introduction to Xamarin.Forms, Insights, Test Cloud
 
It ppt
It pptIt ppt
It ppt
 
Xamarin overview droidcon.tn
Xamarin overview   droidcon.tnXamarin overview   droidcon.tn
Xamarin overview droidcon.tn
 
PWA basics for developers
PWA basics for developersPWA basics for developers
PWA basics for developers
 

More from Richard Donkin

How Serverless Changes DevOps
How Serverless Changes DevOpsHow Serverless Changes DevOps
How Serverless Changes DevOpsRichard Donkin
 
When DevOps Meets Serverless
When DevOps Meets ServerlessWhen DevOps Meets Serverless
When DevOps Meets ServerlessRichard Donkin
 
Go Faster with Ansible (AWS meetup)
Go Faster with Ansible (AWS meetup)Go Faster with Ansible (AWS meetup)
Go Faster with Ansible (AWS meetup)Richard Donkin
 
Go Faster with Ansible (PHP meetup)
Go Faster with Ansible (PHP meetup)Go Faster with Ansible (PHP meetup)
Go Faster with Ansible (PHP meetup)Richard Donkin
 
Minecraft in 500 lines with Pyglet - PyCon UK
Minecraft in 500 lines with Pyglet - PyCon UKMinecraft in 500 lines with Pyglet - PyCon UK
Minecraft in 500 lines with Pyglet - PyCon UKRichard Donkin
 
Minecraft in 500 lines of Python with Pyglet
Minecraft in 500 lines of Python with PygletMinecraft in 500 lines of Python with Pyglet
Minecraft in 500 lines of Python with PygletRichard Donkin
 

More from Richard Donkin (6)

How Serverless Changes DevOps
How Serverless Changes DevOpsHow Serverless Changes DevOps
How Serverless Changes DevOps
 
When DevOps Meets Serverless
When DevOps Meets ServerlessWhen DevOps Meets Serverless
When DevOps Meets Serverless
 
Go Faster with Ansible (AWS meetup)
Go Faster with Ansible (AWS meetup)Go Faster with Ansible (AWS meetup)
Go Faster with Ansible (AWS meetup)
 
Go Faster with Ansible (PHP meetup)
Go Faster with Ansible (PHP meetup)Go Faster with Ansible (PHP meetup)
Go Faster with Ansible (PHP meetup)
 
Minecraft in 500 lines with Pyglet - PyCon UK
Minecraft in 500 lines with Pyglet - PyCon UKMinecraft in 500 lines with Pyglet - PyCon UK
Minecraft in 500 lines with Pyglet - PyCon UK
 
Minecraft in 500 lines of Python with Pyglet
Minecraft in 500 lines of Python with PygletMinecraft in 500 lines of Python with Pyglet
Minecraft in 500 lines of Python with Pyglet
 

Recently uploaded

2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 

Recently uploaded (20)

2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 

Integrating Web Apps with Canvas - Salesforce1 World Tour

  • 1. Integrating Web Apps with Force.com Canvas Richard Donkin @rdonkin CTO, Cloudfind cloudfindhq.com Salesforce1 World Tour - May 22, 2014 www.slideshare.net/rdonkin
  • 2. About Cloudfind  xxxx Smart tagging makes it simple to find and manage files in the cloud Brings collateral into Salesforce so that teams close deals faster
  • 5. Ideal World “All our apps are on Salesforce”
  • 6. Real World ERP SCM … Field Service Project Management … HR Cloud Storage Sales Service Marketing
  • 7. Real World ERP SCM … Field Service Project Management … HR Cloud Storage Sales Service Marketing Force.com Canvas iframe
  • 8. Real World ERP SCM … Field Service Project Management … HR Cloud Storage Sales Service Marketing Canvas integration via Cloudfind app Show auto tagged files from cloud storage No need to hunt through folders
  • 9. Real World ERP SCM … Field Service Project Management … HR Cloud Storage Sales Service Marketing Any Salesforce Page Any Web Application (full page or part)
  • 10. UI integration ERP SCM … Field Service Project Management … HR Cloud Storage Sales Service Marketing Any Web Application Any Salesforce Page Any Web Application Salesforce1
  • 11. Demo – Canvas for desktops
  • 12. Why not build a Force.com UI?  Assume you have a web app outside Salesforce  Using Force.com, build a new UI for the app: • Existing skills for Salesforce developers • Easy data integration via Apex • Classic model used by ISVs  But… • Must replicate UI and integrate with app • Two UIs: one for Salesforce, one for non-Salesforce • Existing app must have an API
  • 13. Why use Canvas? With Canvas: • No re-building – just embed existing UI • Any language: Java, C#, Python, Ruby, PHP, JavaScript, … • Flexible deployment: • Cloud - Heroku (PaaS), Amazon AWS (IaaS) • On-premise • Any technology, e.g. NoSQL, Big Data, … • “Pay as you go” resources • Easier limits: generous allocation for Canvas • Off-platform resources • Use daily limits on data integration, not UI
  • 14. Where can you use Canvas? Wherever Visualforce works: • Custom tab • Object detail page • Chatter publisher • Chatter feed • Chatter page Chatter publisher Chatter feed
  • 15. Canvas for mobile with Salesforce1 Integrate with Salesforce1, through Canvas • Visualforce page setup is one click! • Ensure web app works for mobile • Fonts, touch targets, responsiveness, … • Can add Canvas app to Salesforce1 menu • Usage: Canvas app is view-only in main page • Touch this area to interact on separate page
  • 16. Demo – Canvas for Salesforce1
  • 17. How to embed with Canvas – real-life example  Height - 600 pixels works for laptops at 1366x768 or higher – Test with your app, and adjust for Saleforce1 on mobile  Width - 100% allows horizontal resizing (and use 100% in page layout)  Parameter Format – JSON, XML, …  Parameter Encoding – prevent XSS security issues <apex:page> <apex:canvasApp namespacePrefix="MyApp" applicationName="MyApp" height="600px" width="100%" parameters=”{id:'{!Account.Id}', name: '{!JSENCODE(Account.Name)}'}” /> <apex:page>
  • 18. How Canvas works  Salesforce provides context for the Canvas “frame” – User’s authentication is passed through: • Signed Request – no authorization step, some OAuth permissions • OAuth Web Server flow – extra permission allows background API use – Included in request: org, time zone, user, OAuth token, … – Use Canvas Framework SDK for Java - or roll your own  Use Canvas OAuth token for Salesforce access: – Browser: Canvas SDK for JavaScript • Wrapper around REST, SOAP and Chatter APIs – Backend: REST, SOAP and other APIs from your web app
  • 19. Canvas-enabling (1): Add Canvas to the App  If you have source code access for the app: – Make the app work in iframe, and with Canvas authentication – Selectively disable any frame-busting and anti-clickjacking  Can open new tab if required – e.g. Google OAuth2 Salesforce UI Canvas iframe Canvas Web App Canvas Signed Request, and AJAX User authorizes Cloudfind app Cloudfind confirmation page Outside Canvas
  • 20. Canvas-enabling (2): new Canvas “UI app”  If you don’t have source code for an enterprise app: – Write a small custom “UI app” on top – Focused UI for specific tasks or views – No data storage in Canvas app Salesforce UI Canvas iframe Canvas “UI App” Canvas Signed Request, and AJAX Enterprise app App API
  • 21. Browser Tips: Internet Explorer • Cookie setting requires a P3P header in HTTP response • Configure web server to deliver this on all pages • Once configured, works without user interaction 21 $ curl -si https://www.facebook.com/ | grep P3P P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"
  • 22. Browser Tips: Safari on OS X and iOS • Cookie setting requires user interaction with non-framed page • First cookie set by app requires two clicks per user device • 1. Try to set a cookie, and if you can’t … • Ask user to ‘Please Register Your Device’ within iframe • 2. User clicks Register • Open new browser tab to show ‘almost done’ page • 3. User clicks Finish Registration • Canvas app sets any cookie • Allowed by Safari due to the button click interaction in this ‘first party’ tab • 4. Web app’s JavaScript calls into main iframe to finish • Future sessions - cookie-setting in iframe will work
  • 23. Canvas Resources http://bit.ly/ForceCanvas • Main DeveloperForce page http://www.salesforce.com/us/developer/docs/platform_connect/ • Canvas Developer Guide http://www.are4.us/best-practices/salesforce-canvas/ • Architecture overview
  • 24. Summary  Salesforce as the “single screen” for key apps

Editor's Notes

  1. POLL Built a force.com app? Built a web app on other platform? Built a Canvas app? WHY – diversity of enterprise apps HOW – embed different types of apps TIPS – from Cloudfind developers I’m going to start out on this Canvas introduction by looking at one of the big challenges of enterprise IT: integrating the huge diversity of applications within a business. Then I’m going to go into the why, what and how of Canvas, and finally cover some tips that the developers at Cloudfind have come up with as a result of developing one of the first Canvas applications in the AppExchange.
  2. Reality is that almost all companies will have quite a few apps that are not on the Salesforce platform, including intranet apps, intranet websites, and cloud apps. Even companies that have Salesforce as a preferred platform are likely to have some off-platform apps.
  3. One key point about Canvas web apps is that they can still integrate back into Salesforce via normal Salesforce APIs, as well as some new Canvas APIs. This can be for data integration, ensuring Salesforce and the web app are in sync, or function integration, allowing the web app to call Salesforce operations.
  4. The web app could be your own custom app, or an enterprise app from an ISV. If existing app doesn’t have an API, you will need source code access to add an API
  5. Choice of language is a key benefit of Canvas – at Cloudfind we use Python, which is great for our use case, and you can choose whatever makes sense for your team. IaaS or on-premise deployments enable you to use multi-core, SSDs, memory caches, NoSQL databases, Big Data technologies, or whatever is required by your application, and still deliver it within the Salesforce UI. Generous Canvas limits, and the use of off-platform processing, mean you can use Force.com’s daily governor limit allocations for CPU, API, etc on data integration from the Canvas app instead of the UI-driven interactive processing required by an app using Force.com UI. - Canvas needs 2 API calls each time the Canvas frame loads, so up to 2,500 Canvas frame loads are possible per day, given the Canvas API allocation of 5,000 Canvas calls per day
  6. Also: Service Cloud Console, OpenCTI, … Virtually anywhere that Visualforce works.
  7. Standard web app techniques: mobile toolkits, responsive design, size of touch targets Since you are just delivering a standard mobile web app with a few Canvas changes, it can also work inside a separate mobile hybrid app, using technologies such as Cordova/PhoneGap.
  8. Resources to check exact size of your browser window and screen: http://www.whatsmybrowser.org/ - quick test of screen size and browser window dimensions available to apps. http://www.whatismybrowser.org/ - more detailed Some of the work required to make a web app UI fit into a smaller iframe (for object detail page or the Chatter feed/publisher) is similar to responsive design for mobile devices – you can’t predict the exact size of the iframe the Salesforce admin may create, or the width of the user’s window. Internal apps don’t have to do so much on this, but in any case it’s good preparation for doing a mobile web app.
  9. Watch out for a couple of app characteristics that may make it not work in an iframe - it should be possible to turn these off if the app is invoked via Canvas frame-busting, aka frame-killing – some apps specifically break out of iframes if they find themselves within one. See http://en.wikipedia.org/wiki/Framekiller clickjacking prevention – these are attacks that carefully position malicious buttons on top of the app’s buttons, by putting it in an iframe without the app developer’s knowledge. To prevent this, some apps protect against this by sending a special HTTP header, X-Frame-Options. See https://docs.djangoproject.com/en/dev/ref/clickjacking/ for more about this, and how the Django framework for Python enables this protection
  10. This option is simply creating a new focused web UI, with whatever language / technology makes sense, and ensuring that this UI is Canvas-enabled. As long as there’s a suitable API (including the option of DB access where available), this is a great option. Typically the data or tasks that must be exposed from the enterprise app into Salesforce are quite specific, particularly if used in the object detail page. More ambitious integrations with a large UI may be better off integrating the whole enterprise app with Canvas. There are other options, for example creating a generic Canvas “UI to API” proxy application which can surface any enterprise app page – however, the value is not so clear compared to other types of integration.
  11. Reference: P3P policies in Internet Explorer: http://stackoverflow.com/a/16737097/992887
  12. Reference: Safari third-party cookies in iframes – there are many hacks to try to bypass Apple’s policies. I don’t recommend these as they are fragile – with any Safari update, Apple can break these hacks as they regard them as bypassing their cookie policies, and in fact many such hacks have been broken see http://stackoverflow.com/questions/9930671/safari-3rd-party-cookie-iframe-trick-no-longer-working. The recommended approach here requires only two extra clicks per device when first using the device. After this, there are no additional clicks for later login sessions on the same device – and most importantly, it won’t break in the future as doesn’t try to bypass Apple’s policies.