Canvas Developer Guide
japex:canvasApp Component
Use this component to display a canvas app on a Visualforce page. The table below
lists the component attributes.
Pass parameters that contain non-alphanumeric characters such as quotation marks, apostrophes, and so on, as JavaScript-safe objects. To do this, write an Apex class that uses the methods of the Apex JSONGenerator class to build the JSON string. Call the Apex class from the parameters value:
1<apex:page controller="JSONGeneratorSample">
2 <apex:canvasApp developerName="mycanvas" parameters="{!generateJSON}" />
3</apex:page>Alternatively, you can also use the JSENCODE function to escape the strings:
1<apex:page standardController="Account">
2 <apex:canvasApp developerName="mycanvas" parameters="{!JSENCODE(Account.Description)}" />
3</apex:page>| Attribute | Type | Description |
|---|---|---|
| applicationName | String | Name of the canvas app. Either applicationName or developerName is required. |
| border | String | Width of the canvas app border, in pixels. If not specified, defaults to 0 pixels. |
| canvasId | String | Unique ID of the canvas app window. Use this attribute when targeting events to the canvas app. |
| containerId | String | ID of the HTML element in which the canvas app is rendered. If not specified, defaults to null. The container specified by this attribute can’t appear after the <apex:canvasApp> component. |
| developerName | String | Internal name of the canvas app. You specify this value in the API Name field when you expose the canvas app by creating a connected app. Either developerName or applicationName is required. |
| entityFields | String | Specifies the fields returned in the signed request Record object when the component appears on a Visualforce page placed on an object. If this attribute isn’t specified or is blank, only the Id field is returned. Use a comma-separated list of field names (for example, entityFields="Phone,Fax") or an asterisk (*) to return all fields from the associated object. |
| height | String | Canvas app window height, in pixels. If not specified, defaults to 900 pixels. |
| id | String | Unique identifier that allows the <apex:canvasApp> component to be referenced by other components on the page. |
| maxHeight | String | The maximum height of the Canvas app window in pixels. Defaults to 2000 px; 'infinite' is also a valid value. |
| maxWidth | String | The maximum width of the Canvas app window in pixels. Defaults to 1000 px; 'infinite' is also a valid value. |
| namespacePrefix | String | Namespace value of the Developer Edition organization in which the canvas app was created. You can set a namespace only in a Developer Edition organization, so this is optional if the canvas app was created in a different type of organization. If not specified, defaults to null. |
| onCanvasAppError | String | Name of the JavaScript function to be called if the canvas app fails to render. |
| onCanvasAppLoad | String | Name of the JavaScript function to be called after the canvas app loads. |
| parameters | String | Object representation of parameters passed to the canvas app. Supply in JSON format or as an expression to a JavaScript JSON object literal. If not specified, defaults to null. |
| rendered | Boolean | Specifies whether the component is rendered on the page. If not specified, defaults to true. |
| scrolling | String | Specifies whether the canvas app window uses scroll bars. Valid values are auto, no, or yes. If not specified, defaults to no. If this attribute contains an invalid value, it’s treated the same as no to prevent browser errors. |
| width | String | Canvas app window width, in pixels. If not specified, defaults to 800 pixels. |
These code examples show valid usage of the <div> container and the containerId attribute:
1<apex:page>
2 <div id="container1"></div>
3 <apex:canvasApp applicationName="myApp" containerId="container1"/>
4</apex:page>
5
6<apex:page>
7 <div id="container1">
8 <apex:canvasApp applicationName="myApp" containerId="container1"/>
9 </div>
10</apex:page>This code example shows invalid usage of the <div> container and the containerId attribute:
1<apex:page>
2 <apex:canvasApp applicationName="myApp" containerId="container1"/>
3 <div id="container1">
4 </div>
5</apex:page>