I've got an older Web Tab that iframes an external web application into Salesforce. It uses the full page width configuration and a fixed defined height.

enter image description here

I'm now looking to switch this to being a canvas app in a Visualforce page. E.g.

<apex:page >
  <apex:CanvasApp developerName="TestPrintSF" maxHeight="infinite" maxWidth="infinite"/>

How can I define the canvas app so that it expands and contracts to follow the full page width like a Web Tab did when a user resizes the browser window?

With a Web Tab you would get an iframe something like:

<iframe frameborder="0" height="3000px" id="itarget" name="itarget" scrolling="auto" src="urlWithSessionIdAndServerUrl" title="Content" width="100%"></iframe>

Note the Width="100%" on the iframe that allows it to follow changes in browser size.

It appears I can call Sfdc.canvas.client.resize(sr.client, {width : '100%'});, but I can't then use Sfdc.canvas.client.autogrow(sr.client);

Maybe I need to make my own version of autogrow() in canvas-all.js? It could keep the width at 100% while allowing the height to follow changes in the content.


I did go with a custom version of canvas-all.js.

Specifically I modified the resize function that is within the frame function. Immediately before the postit call on line 1022 I added the following:

if (!$$.isNil(s.height) || !$$.isNil(s.width)) {
    // Fix iframe at 100% width and only scale the height.
    s.width = "100%";
    // Prevent infinite height loop when content dynamically resizes to available height
    if (Math.abs(sh - ch) <= 10) {
        s.height = Math.max(sh, ch) + "px";
    postit(null, { type: "resize", config: { client: client }, size: s })

I then explicitly call the resize function before setting autogrow in the iframed app.

// sr is the parsed signed request JSON.
Sfdc.canvas.client.resize(sr.client, {width : '100%', height : '400px'});

In testing this has allowed the app to initially size itself to the content at fill width. And then subsequently resize/autogrow if the window is adjusted.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.