Integrating Web Apps with Canvas - Salesforce1 World Tour
-
Upload
richard-donkin -
Category
Technology
-
view
829 -
download
4
description
Transcript of Integrating Web Apps with Canvas - Salesforce1 World Tour
![Page 1: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/1.jpg)
Integrating Web Apps with Force.com CanvasRichard Donkin @rdonkin
CTO, Cloudfindcloudfindhq.com
Salesforce1 World Tour - May 22, 2014
www.slideshare.net/rdonkin
![Page 2: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/2.jpg)
About Cloudfind
xxxxSmart tagging makes it simple to find and manage files in the cloud
Brings collateral into Salesforce so that teams close deals faster
![Page 3: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/3.jpg)
Ideal World
![Page 4: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/4.jpg)
Real World
![Page 5: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/5.jpg)
Ideal World
“All our apps are on Salesforce”
![Page 6: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/6.jpg)
Real World
ERPSCM…
Field ServiceProject Management…
HR
Cloud Storage
SalesServiceMarketing
![Page 7: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/7.jpg)
Real World
ERPSCM…
Field ServiceProject Management…
HR
Cloud Storage
SalesServiceMarketing
Force.com Canvas iframe
![Page 8: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/8.jpg)
Real World
ERPSCM…
Field ServiceProject Management…
HR
Cloud Storage
SalesServiceMarketing
Canvas integration via Cloudfind app
Show auto tagged files from
cloud storageNo need to hunt through folders
![Page 9: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/9.jpg)
Real World
ERPSCM…
Field ServiceProject Management…
HR
Cloud Storage
SalesServiceMarketing
Any Salesforce Page
Any Web Application(full page or part)
![Page 10: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/10.jpg)
UI integration
ERPSCM…
Field ServiceProject Management…
HR
Cloud Storage
SalesServiceMarketing
Any Web Application
Any Salesforce Page
Any Web Application
Salesforce1
![Page 11: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/11.jpg)
Demo – Canvas for desktops
![Page 12: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/12.jpg)
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
![Page 13: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/13.jpg)
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
![Page 14: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/14.jpg)
Where can you use Canvas?
Wherever Visualforce works:
• Custom tab
• Object detail page
• Chatter publisher
• Chatter feed
• Chatter page
Chatter publisher
Chatter feed
![Page 15: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/15.jpg)
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
![Page 16: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/16.jpg)
Demo – Canvas for Salesforce1
![Page 17: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/17.jpg)
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>
![Page 18: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/18.jpg)
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
![Page 19: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/19.jpg)
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
![Page 20: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/20.jpg)
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
![Page 21: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/21.jpg)
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"
![Page 22: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/22.jpg)
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
![Page 23: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/23.jpg)
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
![Page 24: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/24.jpg)
Summary
Salesforce as the “single screen” for key apps
![Page 25: Integrating Web Apps with Canvas - Salesforce1 World Tour](https://reader034.fdocuments.us/reader034/viewer/2022042513/54b715c84a7959a2718b45db/html5/thumbnails/25.jpg)
Thank YouRichard Donkin
@rdonkin
http://cloudfindhq.com
@CloudfindHQ
www.slideshare.net/rdonkin
Slides, including notes