---
schema_version: "1"
id: 915f29988482236ec96fa51c266fd33503f0154d01fb2f66cd56f4ba47033e1e
title: Lightning Component Code Examples
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/canvas-framework/guides/platform-connect/using/canvas-app-aura-code-example.md
canonical_url: https://developer.salesforce.com/docs/platform/canvas-framework/guide/canvas-app-aura-code-example.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: b74f0d3913a85e82739ef8e9976d8240fb88f996af60f96df74fa80f79266dd5
products:
  - Canvas Developer Guide
  - Platform Developer Content
---

# 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](https://developer.salesforce.com/docs/component-library/bundle/force:canvasApp/specification).

**note:** 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.

## 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.

```visualforce

<!-- myCanvasApp.cmp file -->
<aura:component implements="flexipage:availableForAllPageTypes, force:hasRecordId">
    <aura:attribute name="canvasParameters" type="string" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:if isTrue="{!v.canvasParameters}">
        <force:canvasApp developerName="Test_Inline_Aura" 
            namespacePrefix="testorg"
            height="400px" width="750px"
            parameters="{!v.canvasParameters}"/>
    </aura:if>

</aura:component>
```

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

```javascript
// myCanvasAppController.js
({
    doInit : function(cmp, evt, helper) {
        var recordId = cmp.get("v.recordId");
        cmp.set("v.canvasParameters", JSON.stringify({
            recordId: recordId
        }));
    }
})
```

**important:** 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](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_actions_manage_dependencies.htm) in the *Lightning Aura Components Developer Guide*.

## 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.

```visualforce
<aura:component>

    <force:canvasApp developerName="Test_Standard_Aura" 
        namespacePrefix="testorg" height="1000px" width="800px" 
        parameters='{"p1":"value1", "p2":"value2", "p3":"value3"}'/>

</aura:component>

```

**See Also**  


-   [*Lightning Aura Components Developer Guide*: Manage Synchronous Action Dependencies](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_actions_manage_dependencies.htm)