function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
mjohnson-TICmjohnson-TIC 

Dynamic Resizing of Visualforce pages on Pagelayout (example shown)

Hi all,

 

I recently came across a problem where I had a Visualforce page displayed on a page layout and the height of it needed to be defined according to how many records were returned in the list I was displaying. After doing a little poking around, I came up with a cool solution I am happy to share. First step, the div that displays the Visualforce page is actually given the id of the Visualforce page itself - so you need to first find the id of the Visualforce page. Next, create an S-Control to do an onload resizing of this particular div element based on a query defined within the script itself. Below is an example of resizing a Visualforce page displayed on the account that displays a list of active contacts.

 

<script type="text/javascript" src="/js/functions.js"></script> 
<script src="/soap/ajax/12.0/connection.js"></script> 
<script type="text/javascript">
window.onload = resizeWindow(); 
function resizeWindow(){
	//Ensure a valid Salesforce connection.
	sforce.connection.sessionId = "{!API.Session_ID}"; 
	//Set account id of account used in contact query.
	var accountid = "{!Account.Id}";
	//Retrieve a list of contacts on the account that are not inactive.
	result = sforce.connection.query("Select Id from Contact where AccountId = '"+accountid+"' and Inactive__c != true"); 
	//Create a pixel variable to assign the dynamic height. This example adds an extra 50px to display the top part of the page in 	the case no records are retrieved.
	contactsize = result.getArray("records").length*30+50+'px';
	//Retrieve the height of the div the Visualforce page lies in and set it to the new dynamic size. The id is the actual id of 	the Visualforce page.
	top.document.getElementById("066P00000008bke").height = contactsize;
	}
</script>

 

Next, add this S-Control to the page layout with a height of 0px and this should resize your page onload. Enjoy!

 

jwhartfieldjwhartfield

I thought S-Controls were deprecated are no longer supposed to be used?
tsailingw.sfdctsailingw.sfdc

Thank you!!! This helped!
vsw00tvsw00t

Brilliant solution!  

 

I wish we could still make s-controls to implement this.  Do you have any solutions without using s-controls?

 

David
toliotolio

(Not speaking for everyone, but from my own research)

 

When you really think about it, we have 2 only options to embed custom pages on a standard page layout:

  1. VisualForce pages -- which is hosted on a separate domain name. You cannot communicate with the parent window to resize iFrames, or control any of the iFrame properties, from an embedded page hosted on a different domain.
  2. So what we're left with, is the s-control pages, which is still hosted on the same domain as the standard salesforce pages, which is why this solution works.

 

I guess another alternative is to insert an invisible VisualForce page onto the page layout, which will popup a VisualForce page in a separate window to the user on page load. In this way, the window size isn't limited to a fixed size setting on the page layout.
Shri RajShri Raj
Hello, 

Did you find a proper solution for this? Can you please send me any links if you have any? I'm facing the same problem.

Thanks
Dr. P. ColemanDr. P. Coleman
Some more ideas on this include using HTML 5 postMessage() and cross-domain messaging for iframes. I've written up a blog post on how this can be used to not only do dynamic iframe resizing, but also implement basically any collaboration between the parent page and embedded VF that your business requires. HTH

http://salesforcehacks.blogspot.com/2014/12/resizing-embedded-vf.html