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    <force:canvasApp applicationName="Test Inline Aura" 
7        namespacePrefix="testorg"
8        height="400px" width="750px"
9        parameters="{!v.canvasParameters}"/>
10</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})

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