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
bohemianguy100bohemianguy100 

using scrollbars with inline visualforce page on a standard page layout

I have a simple visualforce page that I've added to a standard Opportunity page layout inline.  The query can return more records than what fits in the inline section of the page layout.

 

Is there a way I can add vertical scrollbars to view all the records that are returned?  Or, perhaps there is some JS that can manipulate the DOM and adjust the height of the inline section (that is probably a clumsy way to do it).  Or, maybe there is a paging mechnisim to elegantly page thru all the records?  Has anyone encountered this issue and what are the options and best solution?

 

Here is my VF page:

 

<apex:page standardController="Opportunity" extensions="SalesCoachActivityController">
	<apex:form >
		<apex:pageBlock >
			<apex:pageBlockTable value="{!SalesCoachActivity}" var="sca">
				<apex:column >
                	<apex:facet name="header">
                    	Sales Coach Activity
                	</apex:facet>
                	<apex:outputLink value="{!sca.Content_URL__c}" >{!sca.Name}</apex:outputLink>
            	</apex:column>
			</apex:pageBlockTable>
		</apex:pageBlock>
	</apex:form>
</apex:page>

 Here is my controller:

 

public class SalesCoachActivityController {
	
	private final Opportunity opp;
	private String stage;
	
	public SalesCoachActivityController(ApexPages.StandardController stdController) {
		this.opp = (Opportunity)stdController.getRecord();
		Opportunity o = [Select StageName From Opportunity Where Id =: opp.Id];
		stage = o.StageName;	
	}
	
	public List<Sales_Coach_Activity__c> getSalesCoachActivity() {
		String soql = 'Select Name, Content_URL__c From Sales_Coach_Activity__c Where Stage__c = \'' + stage  + '\' Order By Sequence_Number__c ASC';
		return Database.query(soql);
	}

}

 Also, in my constructor, I get the opportunity record id and then I have to run a query to get the stagename value that I use as a filter in the dynamic query in the getSalesCoachActivity() method.

 

Is there a way to eliminate the first query and get the stagename without having to query the opportunity?  It would be nice to reduce the queries to just one, if possible?

 

Thanks for any help.

Best Answer chosen by Admin (Salesforce Developers) 
SteveBowerSteveBower

Hi, 

 

1. You can't adjust the height allocated from the outer page to the inner page from within the inner page.  That voilates cross-site scripting security becaus VF pages are hosted under a different namespace than the SF ui.   So, what you probably want to do is decide how much of the outer page you want to devote to this vf page, and then implement the scroll bars within your VF page.

 

There are many ways to do this using jQuery (which is worth learning is you're going to be serious about hacking your VF pages).  http://www.net-kit.com/jquery-custom-scrollbar-plugins/ for example.

 

 

2. If you put {!Opportunity.StageName} in your VF as a hidden value (as from the tip below in the doc), then the controller will have the stagename in the Opportunity record when you reach your controller.

 

So you can use:

 

 

public class SalesCoachActivityController {
	public List<Sales_Coach_Activity__c> getSalesCoachActivity() { return [
           Select Name, Content_URL__c 
           From Sales_Coach_Activity__c 
           Where Stage__c = :((Opportunity)stdController.getRecord()).stageName
           Order By Sequence_Number__c ASC'
        ];}
}

 

Best, Steve.

 

 

Tip

You can work around this restriction by including a hiddencomponent that references any additional fields that you want to query. Hide the component from display by setting the component's rendered attribute to false. For example: 
<apex:outputText  value="{!account.billingcity} {!account.contacts}" rendered="false"/>

 

All Answers

SteveBowerSteveBower

Hi, 

 

1. You can't adjust the height allocated from the outer page to the inner page from within the inner page.  That voilates cross-site scripting security becaus VF pages are hosted under a different namespace than the SF ui.   So, what you probably want to do is decide how much of the outer page you want to devote to this vf page, and then implement the scroll bars within your VF page.

 

There are many ways to do this using jQuery (which is worth learning is you're going to be serious about hacking your VF pages).  http://www.net-kit.com/jquery-custom-scrollbar-plugins/ for example.

 

 

2. If you put {!Opportunity.StageName} in your VF as a hidden value (as from the tip below in the doc), then the controller will have the stagename in the Opportunity record when you reach your controller.

 

So you can use:

 

 

public class SalesCoachActivityController {
	public List<Sales_Coach_Activity__c> getSalesCoachActivity() { return [
           Select Name, Content_URL__c 
           From Sales_Coach_Activity__c 
           Where Stage__c = :((Opportunity)stdController.getRecord()).stageName
           Order By Sequence_Number__c ASC'
        ];}
}

 

Best, Steve.

 

 

Tip

You can work around this restriction by including a hiddencomponent that references any additional fields that you want to query. Hide the component from display by setting the component's rendered attribute to false. For example: 
<apex:outputText  value="{!account.billingcity} {!account.contacts}" rendered="false"/>

 

This was selected as the best answer
Mandeep DekaMandeep Deka

Hi,

 

regarding your first query, I have a solution where you can just add an output panle to your pageBlockTable with the attribute oveflow=auto and give a fixed width. Below is an example:

 

<apex:pageBlock title="Search Results:" mode="edit" id="results">
         
        <apex:outputPanel layout="block" style="overflow:auto; height:260px;margin: 0 2px" >
        <apex:pageBlockTable value="{!contrs}" var="pat">
            
            <apex:column width="25">
                   <apex:facet name="header">
                    <apex:inputCheckBox styleClass="sel-all-checkbox" /> 
                   </apex:facet>
                   <apex:inputCheckBox value="{!pat.checked}" styleClass="patent-checkbox"/> 
            </apex:column>
            
        </apex:pageBlockTable>
        </apex:outputPanel>
</apex:pageBlock>

 It has worked for me and sud work for you too. 

 

Cheers,

Mandeep