Canvas Developer Guide

Introducing Canvas
Quick Start
Prerequisites
Create the App
Set the Canvas App Location for External Client Apps
Set the Canvas App Location for Connected Apps
Quick Start—Advanced
Canvas SDK
Canvas Apps and Visualforce Pages
Lightning Component Code Examples
Canvas Apps in a Page Layout or a Mobile Card
Canvas Apps in the Publisher
Canvas Apps in the Chatter Feed
Canvas in the Salesforce Mobile App
Customizing Your App Lifecycle
Objects
Canvas Limits
PDF

Set the Canvas App Location for External Client Apps

Specify where your canvas app can display to a user in Salesforce via an external client app.
  1. In Lightning Experience, from Setup, search for External Client App in the Quick Find box, then select External Client App Manager.
  2. In the related list, click the dropdown arrow for the app you just created and then click Edit Settings.
  3. In the Canvas Apps Settings section, in the Locations field, select where the canvas app can appear to the user. For this example, select Lightning Component.
    • Chatter Feed—The canvas app appears in the feed. If this option is selected, you must create a CanvasPost feed item and ensure that the current user has access to the canvas app.
    • Layouts and Mobile Cards—The canvas app can appear on a page layout or a mobile card. If this option is selected, you choose where the canvas app appears by adding it to the page layout.
    • Lightning Component—The canvas app appears on your custom Lightning component using the force:canvasApp component.
    • Mobile Nav—The canvas app is accessible from the mobile app navigation menu.
    • Publisher—The canvas app appears in the Chatter publisher and action bar. If this option is selected, you must also create a canvas custom action and add it to the global publisher layout or to an object’s page layout.
    • Visualforce Page—The canvas app can appear on a Visualforce page . If you add an <apex:canvasApp> component to expose a canvas app on a Visualforce page, be sure to select this location for the canvas app; otherwise, you’ll receive an error.
  4. Click Save.
  5. Embed the canvas app in a Lightning component.
    1. Open the Developer Console.
    2. Click File | New | Lightning Component.
    3. Enter myCanvasApp in the Name field.
    1. Copy and paste this code. 
      1<!-- myCanvasApp.cmp -->
2<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
3    <aura:attribute name="canvasParameters" type="string" />
4    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
5
6    <aura:if isTrue="{!v.canvasParameters}">
7        <force:canvasApp developerName="Hello_World" 
8            height="400px" width="750px"
9            parameters="{!v.canvasParameters}"/>
10    </aura:if>
11</aura:component>

      To verify the developerName value of your canvas app, in Setup, go to External Client App Manager and click on your app name. Then click the Settings tab and verify the API Name.

    2. In the controller file, copy and paste this code. 
      1({
2    doInit : function(cmp, evt, helper) {
3        var recordId = cmp.get("v.recordId");
4        cmp.set("v.canvasParameters", JSON.stringify({
5            recordId: recordId
6        }));
7    }
8})

      Save your changes.

  6. Display the Lightning component on a record.
    1. Navigate to the record page you want to customize, for example, a contact record page.
    2. Click the gear icon and select Edit Page.
    3. Find the myCanvasApp custom component and drag it to where you want it on the Lightning page. Save your changes.
    4. Activate the page. Click Assign as Org Default, and then click Next.
Your canvas app is now displayed on contact record pages.