[SalesForce] Automatic Resizing of Canvas App in Visualforce Page

I have created a canvas app and am hosting it on Heroku. I then added this app to a Visualforce page, along with the required Salesforce SDK (which is hosted on heroku).

Because this app will be used on different devices (mainly mobile) I added the autogrow function, however I cannot seem to get it to work. My visualforce page code is shown below:

    <apex:page controller="connectDataController" showHeader="false" sidebar="false" standardStylesheets="true" docType="html-5.0" language="en-US" applyHtmlTag="false">      

<apex:canvasApp canvasId="mycanvas0" developerName="x" id="mycanvas0" /> 

<script> type="text/javascript" src="/sdk/js/controller.js"  </script>
<script> type="text/javascript" src="/sdk/js/client.js" </script> 
<script> type="text/javascript" src="/sdk/js/canvas-all.js" </script> 

 <script>
    // Turn on auto grow with default settings.
    Sfdc.canvas(function() {
    alert("In function");
    var sr = JSON.parse('<%-JSON.stringify(canvasDetails)%>');
    console.log("CONSOLE.LOG FROM VF : " + sr.userId);
    alert("after var");
    alert(sr.environment.dimensions.width);
    Sfdc.canvas.client.autogrow(sr.environment.dimensions);
    });

    alert("Test End");
</script> </apex:page>

When I visit the page, the canvas app defaults to the standard size, and only the alerts saying "In function" and "Test End" are displayed.

Anybody have any ideas of what might be going wrong?

Thanks

Best Answer

Request for autogrow should happen in Heroku not in the Visualforce page. The canvas app (the iFrame) needs to tell the parent (Visualforce page) that it wants to grow. You should add below code on Heroku side

var sr = JSON.parse('<%=signedRequestJson%>');
Sfdc.canvas.client.autogrow(sr.client);

Related Solutions

[SalesForce] Calling REST API in Canvas with OAuth Webflow (GET)

Sorry for the delay in answering.

You can do this today with the SDK. There are examples in the SDK on how to use the OAuth method. Essentially, you use canvas to establish the OAuth authentication, and then use the SDK and the OAuth token to get the context portion of the signed request. With that, you can then make the cross domain calls, just as you would with signed request.

An example would be:

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>

<title>Test Page for OAUth User Agent</title>

<script type="text/javascript" src="/sdk/js/canvas-all.js"></script>

</head>
<body>
<script>

    if (self === top) {
        // Not in Iframe
        alert("This canvas app must be included within an iframe");
    }

    function contextCallback(msg){
    var html,context;
    if(msg.status !== 200){
      console.log (msg.status);
      return;
    }
    Sfdc.canvas.client.autogrow(Sfdc.canvas.oauth.client());
        Sfdc.canvas.byId('canvas-request-string').innerHTML = jsonSyntaxHighlight(msg.payload);
    }

     function jsonSyntaxHighlight(json) {
        if (typeof json != 'string') {
           json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                   return '<span class="' + cls + '">' + match + '</span>';
             });
    }

    function clickHandler(e) {
        var uri;

        if (! Sfdc.canvas.oauth.loggedin()) {
            uri = Sfdc.canvas.oauth.loginUrl();
            console.log("Login URI: " + uri);
            // This uri is the outer parent window.
       Sfdc.canvas.oauth.login(
        {uri : uri,
        params: {
                  display : "touch",
          response_type : "token",
          client_id : "", //Add Your Consumer ID
          redirect_uri : encodeURIComponent("") //Add your Callback URL
        }});
        }
        else {
            Sfdc.canvas.oauth.logout();
        }
        return false;
    }

    // Bootstrap the pae once the DOM is ready.
    Sfdc.canvas(function() {
        // On Ready...
        var login    = Sfdc.canvas.byId("login"),
            loggedIn = Sfdc.canvas.oauth.loggedin();
        login.innerHTML = (loggedIn) ? "Logout" : "login";
        Sfdc.canvas.byId("access-token").innerHTML = (loggedIn) ? Sfdc.canvas.oauth.token() : "No Token";
        login.onclick=clickHandler;
    if(loggedIn){
      Sfdc.canvas.client.ctx(contextCallback, Sfdc.canvas.oauth.client());
    }
    });

</script>

<style>
    pre {white-space: pre-wrap;padding: 5px; margin: 5px; overflow:auto;width:auto;height:80%;}
      .string { color: green; }
      .number { color: darkorange; }
      .boolean { color: blue; }
      .null { color: magenta; }
      .key { color: red; }
</style> 

<h1 id="header">OAuth Canvas App</h1>
<div>
 <div>
    <a id="login" href="#">Login</a>
  </div>
  <div>
     Access Token: <span id="access-token"></span>
  </div>
  <div id="canvas-content">
    <h4>Once logged in through OAuth, you can see the JSON representation of Canvas Request below:</h2>
    <pre><code id="canvas-request-string"></code></pre>
 </div> 
 </div>
</body>
</html>

[SalesForce] Is that possible to send and receive data between Canvas app and Visualforce page

Canvas apps allow you to interact with your embedded app via the publish (pushing data from your page to you app) and subscribe (receiving data from your app) javascript functions. If you needed the data from the canvas app in apex, then you would need to use a combination of the subscribe function and javascript remoting. Here is some stub code:

Sfdc.canvas(function() {
    sr = JSON.parse('<%=signedRequestJson%>');
    Sfdc.canvas.client.subscribe(sr.client,
        {name : 'mynamespace.orderSubmitted', onData : function (event) {
            //call my JS remoting method to do something with the order data
        }}
    );
}

Best Answer

Related Solutions

[SalesForce] Calling REST API in Canvas with OAuth Webflow (GET)

[SalesForce] Is that possible to send and receive data between Canvas app and Visualforce page

Related Topic