Lightning Component Code Examples

The following examples show how to reference a <force:canvasApp> component using applicationName, developerName, and namespacePrefix.

<force:canvasApp> represents a canvas app that's embedded in a Lightning component. It provides attributes and event handlers that you can use to customize the canvas app. Sfdc.canvas is not supported for use with Lightning components. For more information, see the <force:canvasApp> reference documentation.

When possible, use developerName instead of applicationName. The developerName (also called the API name) is the permanent name assigned to a Connected App when you create a canvas app. You can change the applicationName, which can break Aura components that use an outdated name.

Note

Object Detail Page

This example displays a canvas app on an Account page using the applicationName and namespacePrefix attributes of <force:canvasApp>.

In myCanvasApp.cmp, we first define an Aura attribute called canvasParameters. We use this attribute to pass a recordId into the canvas app. Next, we define an init handler, which invokes the action method doInit when the component is initialized. In <force:canvasApp>, we set the size of the canvas app in pixels.

1<!-- myCanvasApp.cmp file -->
2<aura:component implements="flexipage:availableForAllPageTypes, force:hasRecordId">
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="Test_Inline_Aura" 
8            namespacePrefix="testorg"
9            height="400px" width="750px"
10            parameters="{!v.canvasParameters}"/>
11    </aura:if>
12
13</aura:component>

In myCanvasAppController.js, the doInit method sets the recordId in the canvasParameters attribute.

1// myCanvasAppController.js
2({
3    doInit : function(cmp, evt, helper) {
4        var recordId = cmp.get("v.recordId");
5        cmp.set("v.canvasParameters", JSON.stringify({
6            recordId: recordId
7        }));
8    }
9})

When your code has dependencies that require a prior action to complete, don’t call dependent actions until the earlier action completes. For example, render a dependent element conditionally, based on the result of the earlier action being available. Or call the dependent action from the earlier action’s callback function. This ensures that the dependent call isn’t made until after the earlier call completes. See “Hidden Dependencies in a Canvas Component” in Manage Synchronous Action Dependencies in the Lightning Aura Components Developer Guide.

Important

Standard Page

This example displays a canvas app in an Aura component using the developerName and namespacePrefix attributes of <apex:canvasApp>. The code specifies the size of the canvas app to be 1000 pixels high and 800 pixels wide. It passes three custom parameters to the canvas app.

1<aura:component>
2
3    <force:canvasApp developerName="Test_Standard_Aura" 
4        namespacePrefix="testorg" height="1000px" width="800px" 
5        parameters='{"p1":"value1", "p2":"value2", "p3":"value3"}'/>
6
7</aura:component>

Canvas Developer Guide

Lightning Component Code Examples

Object Detail Page

Standard Page

See Also