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
vikramkkvikramkk 

Hide/Unhide a section in a Page

 

Hi

 

 I want to create a custom button in opportunity layout page, such that when I click the button, a section in opportunity should become hidden. When I click again it should appear again. Basically it should hide/unhide on successive clicks

Ankit AroraAnkit Arora

You can achieve this if you are working with visualforce page, else I don't think you can conditionally render section on button clicks.

 

But if you are working in visualforce then here is the sample code which will conditionally render section on link click. You can change the command link to command button.

 

VFP :

 

<apex:page controller="t">
<apex:form >
  <apex:pageBlock >
  
      <apex:actionFunction name="RenderSection" action="{!RenderSec}"/>
  
      <apex:pageBlockSection>
          <apex:selectList multiselect="false" size="1" onChange="RenderSection() ;" value="{!SelectedVal}">
              <apex:selectOption itemLabel="--None--" itemValue=""/>
              <apex:selectOptions value="{!myList}"/>
          </apex:selectList>
      </apex:pageBlockSection>
  
      <apex:pageBlockSection rendered="{!showAccount}">
          <apex:outputLabel value="This Section will show account fields"/>
      </apex:pageBlockSection>
  
      <apex:pageBlockSection rendered="{!showContact}">
          <apex:outputLabel value="This section will show contact fields"/>
      </apex:pageBlockSection>
  
  </apex:pageBlock>
</apex:form>
</apex:page>

 Class :

public class t
{
    public List<SelectOption> myList {get; set;}
    public boolean showAccount {get; set;}
    public boolean showContact {get; set;}
    public String SelectedVal {get; set;}
    
    public t()
    {
        myList = new List<SelectOption>() ;
        myList.add(new SelectOption('Account' , 'Account')) ;
        myList.add(new SelectOption('Contact' , 'Contact')) ;
        
        showAccount = false ;
        showContact = false ;
        SelectedVal = '' ;
    }
    
    public PageReference RenderSec()
    {
        if(SelectedVal == 'Account')
        {
            showAccount = true ;
            showContact = false ;
        }
        if(SelectedVal == 'Contact')
        {
            showAccount = false ;
            showContact = true ;
        }
        return null ;
    }
}

 

 

Thanks

Ankit Arora

Blog | Facebook | Blog Page
SidharthSidharth

Thanks Ankit

 

This example helped me :)
Ankit AroraAnkit Arora

Great! So if this helped you then please mark it as a solution :)

 

 

Thanks

Ankit Arora

Blog | Facebook | Blog Page
sean*harrisonsean*harrison

Ankit,

 

Oddly I was coming to the dev board with a very similar question: how to rerender a section based on the value selected in a picklist. It looks like your solution is a good one but I notice it depends on a full page refresh. Isn't there a way to use the rerender param to accomplish this and avoid the full page refresh?

 

Apparently not for me as my example is not working:

<apex:page standardController="Case">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
	<apex:inputfield value="{!Case.Call_Type__c}">
		<apex:actionSupport event="onchange" rerender="InfoBlock"/>
	</apex:inputfield>
</apex:pageBlockSection> 
<apex:pageBlockSection rendered="{!Case.Call_Type__c != 'HideMe'}" id="InfoBlock">
	<apex:outputText value="{!Case.Call_Type__c}"/>
	<apex:outputText value="{!IF(Case.Call_Type__c=='HideMe','Should be hidden?', 'Peekaboo')}"/>
	<apex:inputField value="{!Case.Subject}" style="width: 100%"/>
	<apex:pageBlockSectionItem />
	<apex:inputfield value="{!Case.ContactId}" style="width: 100%"/>
</apex:pageBlockSection> 
</apex:pageBlock>
</apex:form>
</apex:page>

 

In this example I've a custom picklist. I expect that when the value is changed on the picklist, the section "InfoBlock" will rerender. Indeed, the outputText does refresh EXCEPT when I choose 'HideMe' - then nothing changes. I expected the section to disappear.

 

What I was really going for was the converse, where the section would only appear when a certain value was selected. With the rendered param on InfoBlock looking for a == rather than an !=, the section never appeared. 

 

What am I missing about the rerender parameter? Is there a way to do ajax-like show/hides without a full page refresh?
sean*harrisonsean*harrison

Ah...I am able to do what I want with the nifty apex:outputPanel. By changing my code to this...

 

<apex:page standardController="Case">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
	<apex:inputfield value="{!Case.Call_Type__c}">
		<apex:actionSupport event="onchange" rerender="InfoBlock"/>
	</apex:inputfield>
</apex:pageBlockSection> 
<apex:outputPanel id="InfoBlock"><apex:pageBlockSection rendered="{!Case.Call_Type__c != 'HideMe'}" id="SampleSendInfoBlock">
	<apex:outputText value="{!Case.Call_Type__c}"/>
	<apex:outputText value="{!IF(Case.Call_Type__c=='HideMe','Should be Hidden', 'Peekaboo')}"/>
	<apex:inputField value="{!Case.Subject}" style="width: 100%"/>
	<apex:pageBlockSectionItem />
	<apex:inputfield value="{!Case.ContactId}" style="width: 100%"/>
</apex:pageBlockSection></apex:outputPanel>
</apex:pageBlock>
</apex:form>
</apex:page> 

 

...it works like a charm.
Amrin.Amrin.

Hi Ankit,

 

When i am executing code am getting following error..

Error: t Compile Error: Constructor not defined: [selectOption].<Constructor>(String, String) at line 11 column 20

 

I have used String.valueOf  but its not getting through. can you please help as I am trying to use same code for my vf.

 

Thanks,

Amrin