integrating web apps with canvas - salesforce1 world tour

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

Upload: richard-donkin

Post on 15-Jan-2015

831 views

Category:

Technology


4 download

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

Page 1: Integrating Web Apps with Canvas - Salesforce1 World Tour

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

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

Ideal World

Page 4: Integrating Web Apps with Canvas - Salesforce1 World Tour

Real World

Page 5: Integrating Web Apps with Canvas - Salesforce1 World Tour

Ideal World

“All our apps are on Salesforce”

Page 6: Integrating Web Apps with Canvas - Salesforce1 World Tour

Real World

ERPSCM…

Field ServiceProject Management…

HR

Cloud Storage

SalesServiceMarketing

Page 7: Integrating Web Apps with Canvas - Salesforce1 World Tour

Real World

ERPSCM…

Field ServiceProject Management…

HR

Cloud Storage

SalesServiceMarketing

Force.com Canvas iframe

Page 8: Integrating Web Apps with Canvas - Salesforce1 World Tour

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

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

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

Demo – Canvas for desktops

Page 12: Integrating Web Apps with Canvas - Salesforce1 World Tour

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

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

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

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

Demo – Canvas for Salesforce1

Page 17: Integrating Web Apps with Canvas - Salesforce1 World Tour

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

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

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

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

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

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

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

Summary

Salesforce as the “single screen” for key apps

Page 25: Integrating Web Apps with Canvas - Salesforce1 World Tour

Thank YouRichard Donkin

[email protected]

@rdonkin

http://cloudfindhq.com

@CloudfindHQ

www.slideshare.net/rdonkin

Slides, including notes