forcedotcom / salesforcecanvasjavascriptsdk

A JavaScript SDK used to integrate applications with the Force.com Canvas framework

SalesforceCanvasJavascriptSDK

A JavaScript SDK used to integrate applications with the Force.com Canvas framework

Introduction

Force.com Canvas is a mechanism for consuming third-party applications within Salesforce. Its goal is to connect applications at a UI level instead of just an API level. The purpose of this GitHub repository is to provide third-party applications with a JavaScript SDK so you can easily integrate canvas-style applications into Salesforce, while developing in the technology and platform of your choice.

The best place to get started building canvas applications is the online developer's guide.

Currently, we provide Java and Ruby examples, but you can develop in whatever language you prefer. Most of the integration with Salesforce is through JavaScript and REST. You can also run and test your application locally from your own host, or from Heroku. For a quick example of how to create a Java Canvas application, please see the SalesforceCanvasFrameworkSDK GitHub project.

How to install the SDK (using npm)

npm install @salesforce/canvas-js-sdk

Then add a <script> to your index.html:

<script src="node_modules/%40salesforce/canvas-js-sdk/js/canvas-all.js">

Or from React:

import '@salesforce/canvas-js-sdk';

How to clone the SDK repository

git clone [email protected]:forcedotcom/SalesforceCanvasJavascriptSDK.git

How to use the Canvas JavaScript SDK

To use this SDK, simply include the canvas-all.js file in your page.

Documentation

You can find JSDoc generated documentation for the JavaScript function in the docs directory.

salesforcecanvasjavascriptsdk's Issues

target origin and instanceid are not set

The example describes which information is coming in the callback url, but the code will not be able to set the target_origin and instance_id because these information are not provided or the identifiers are different.

/**
198 *@Private
199 */
200 // Example Results of tha hash....
201 // Name [access_token] Value [00DU0000000Xthw!ARUAQMdYg9ScuUXB5zPLpVyfYQr9qXFO7RPbKf5HyU6kAmbeKlO3jJ93gETlJxvpUDsz3mqMRL51N1E.eYFykHpoda8dPg_z]
202 // Name [instance_url] Value [https://na12.salesforce.com]
203 // Name [id] Value [https://login.salesforce.com/id/00DU0000000XthwMAC/005U0000000e6PoIAI]
204 // Name [issued_at] Value [1331000888967]
205 // Name [signature] Value [LOSzVZIF9dpKvPU07icIDOf8glCFeyd4vNGdj1dhW50]
206 // Name [state] Value [/crazyrefresh.html]
207 function parseHash(hash) {
208 var i, nv, nvp, n, v;
209

210 if (! $$.isNil(hash)) {
211 if (hash.indexOf('#') === 0) {
212 hash = hash.substr(1);
213 }
214 nvp = hash.split("&");
215

216 for (i = 0; i < nvp.length; i += 1) {
217 nv = nvp[i].split("=");
218 n = nv[0];
219 v = decodeURIComponent(nv[1]);
220 if ("access_token" === n) {
221 token(v);
222 }
223 else if ("instance_url" === n) {
224 instanceUrl(v);
225 }
226 else if ("target_origin" === n) {
227 tOrigin = decodeURIComponent(v);
228 }
229 else if ("instance_id" === n) {
230 instId = v;
231 }
232 }
233 }
234 }

Tag v30 & v31 Releases

The latest tagged release is v29. Please tag newer releases.

autogrow calls resize which is not detecting a need to change size

Hello ,

We have a canvas app hosted on tomcat and viewed from a visualforce page on a record detail page.
For mobile devices, we are using the autogrow function so that the canvas app takes up the whole available space.
The method is not behaving as expected. Autogrow calls resize and resize checks for the scroll height and client height. In our case these values are same. so no resize post message is being sent to the instance and the canvas app remains in it's original size.
It worked when we replaced scroll height with window.screen.height as there is a difference between window screen height and client height.
Can you please let me know why window screen height is not being used ? And also if i am doing something wrong.
I am new to this so be kind :)

Unable to subscribe using `Sfdc.canvas.client.subscribe` method from within the Canvas App

Subscribing in the aura component works without any issues but when I try to subscribe from within the canvas app (cross domain hosting) I can see a warning in chrome network tab for Set-Cookie headers:

• t=xxx; path=/cometd/; HttpOnly
• sfproxy-id="xxx"; Max-Age=3600; HttpOnly

This Set-Cookie header didn't specify a "SameSite" attribute and was defaulted to "SameSite=Lax," and was blocked because it came from a cross-site response which was not the response to a top-level navigation. The Set-Cookie had to have been set with "SameSite=None" to enable cross-site usage.

And the subscribe call fails with the response:

[
    {
        "advice": {
            "interval": 0,
            "reconnect": "handshake"
        },
        "channel": "/meta/subscribe",
        "id": "2",
        "error": "403::Unknown client",
        "successful": false
    }
]

The handshake/subscribe sequence is repeated 3 times and stops.

Not sure if it fails due to the cookie not being sent back or if this is unrelated but there is no way to debug this any further. Any advice?

amd module for requirejs

Is there a amd module for this library? I have an application based on requirejs.

Please tag new releases

Missing v39.0 and v40.0