Integrating Web Apps with Canvas - Salesforce1 World Tour

Download Integrating Web Apps with Canvas - Salesforce1 World Tour

Post on 15-Jan-2015

819 views

Category:

Technology

4 download

Embed Size (px)

DESCRIPTION

Overview of Force.com Canvas, a technology that enables you to rapidly integrate third party web applications (on-premise or cloud) into a Salesforce environment, showing their user interface within a secure iframe. Includes: - why Canvas is essential to integrate diverse enterprise web apps - how it works for both desktop and mobile, using Salesforce1 - tips from Cloudfind developers to solve some key challenges with Internet Explorer and Safari

TRANSCRIPT

<ul><li> 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 </li></ul> <p> 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 3. Ideal World 4. Real World 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 18. How Canvas works Salesforce provides context for the Canvas frame Users 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 dont 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 cant 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 apps 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 25. Thank You Richard Donkin richard@cloudfindhq.com @rdonkin http://cloudfindhq.com @CloudfindHQ www.slideshare.net/rdonkin Slides, including notes </p>