Sign Up ›
  • tsailingw.sfdc
  • NEWBIE
  • 0 Points
  • Member since 2011
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
6 replies

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!