- Including iframe inside Visualforce or Lightning component
- mostly one way integration (salesforce to UI application)
- security issues
- sizing problems
- Canvas
- lightning and classic
- seamless and two way integration
- Lightning container component (Winter'18 - for lightning)
- only for lightning
Canvas by far the most feature rich and seamless integration between salesforce and third party UI application, especially we have two way interaction. E.g. salesforce passing data to third party application and UI application updating/creating data back in salesforce.
How to configure it
- Create Connected application
Step 1) Connected App -> Allow users to install canvas personal apps
Step 2) Create New App
Step 3) Configure Canvas App Settings (Note: check Publisher and Create Actions, if we plan to publish canvas app there)
Step 4)
Step 5) Grab the consumer secret and key
Step 6) Assign canvas app the users or profiles
Step 7) Canvas app viewer
- Sample Third Party application
- From Canvas App viewer, we can create canned "heroku quick start" app, however I decided to use create my own so that I can test out all the features in controller environment
- Create heroku application, and make sure to sign the request for the URL provided in canvas salesforce app
Main Features
Security
- Salesforce sends signed request to third party application, and it can be decrypted using consumer key. Hence the request is secure.
- Also when json request payload is decrypted, we get session id and all the information of the page context
Two way event
- Events can be raised from Visual Force and can be sent to Third Party App, and Third party app can send event back to Salesforce
Resize
- Third party App can use resize API to resize the canvas size in Salesforce. When we put canvas in visualforce and then in layout, we are restricted by iFrame size and height, but if canvas is put in directly in page layout we can have much better control over the size.
Api calls (e.g. chatter)
Third party application can use OAuth token provided in JSON request and make any API call. Below is example of chatter post
Where canvas can be used
Once it is configured correctly, it can be used at many places:
Canvas App Previewer : this is just for testing your canvas app
Page layout via Visual Force
Canvas App Previewer : this is just for testing your canvas app
Page layout via Visual Force
Canvas can be added in visual force page, however if we go that route, when we add the page to layout, we will be restricted by iframe size.
VisualForce code:
Page Layout Directly
VisualForce code:
Page Layout Directly
Lightning Component
We can add canvas in lightning component
Chatter / Publish Action
We can also put canvas chatter or publisher action as shown below
Source Code
Heroku code
https://github.com/c-shah/canvasly
Salesforce code
Salesforce code
https://github.com/c-shah/sf.canvasly
