Lightning Component Code Examples

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

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