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
Anonymous1Anonymous1 

upon changing the picklist value, the pageblocksection will show/hide

Hi everyone,

I tried one scenario, i have created picklist field using custom functionality, upon changing the picklist value, the pageblocksection will show/hide.
Ex: If picklist value is fresher, then some other fields should show with pageblock and other Exp pageblocksection will be hidden  and vice versa.
I have written code, but its not working. can anyone help me to meet my criteria.

Thanks in advance

Vf code:
<apex:page standardController="Contact" extensions="StudentData1"  >
    <apex:form >
        <apex:pageBlock title="Rendering PageBlock sections" >
            <apex:pageBlockSection columns="2"  title="Student Data">
                   <apex:selectList value="{!StudentList}" size="1">
                   <apex:outputLabel value="Student:"/>
                   <apex:selectOptions value="{!list}">
                   <apex:actionSupport event="onchange" reRender="ab,bc"/>
                   </apex:selectOptions>
                   </apex:selectList>
            </apex:pageBlockSection>       
        </apex:pageBlock>
                
        <apex:outputpanel id="ab">

         <apex:pageBlock title="Fresher Details" rendered="{!list == 'Fresher'}">
            <apex:pageBlockSection columns="2">
                  <apex:inputField value="{!contact.FirstName}" />
                  <apex:inputField value="{!contact.LastName}" />
            </apex:pageBlockSection>
         </apex:pageBlock>
         
          </apex:outputpanel>
          
          <apex:outputpanel id="bc">

           <apex:pageBlock title="Experience Details" rendered="{!list == 'Exp'}">
            <apex:pageBlockSection columns="2">
                  <apex:inputField value="{!contact.Email}" />
                  <apex:inputField value="{!contact.Phone}" />
            </apex:pageBlockSection>
         </apex:pageBlock>
          
          </apex:outputpanel>

       <apex:commandButton value="save" action="{!Save}" /> 
        
    </apex:form>
</apex:page>

apex class:
public class StudentData1 {

    public StudentData1(ApexPages.StandardController controller) {

    }
  
public String StudentList {get;set;}
 
public List<SelectOption> getlist()
{
  List<SelectOption> stulist = new List<SelectOption>();
  stulist.add(new SelectOption('None','None'));
  stulist.add(new SelectOption('fresher','Fresher'));
  stulist.add(new SelectOption('Experience','Exp'));
  return stulist;
}

public pageReference save()
{
 return null;
}

}
Best Answer chosen by Anonymous1
Anonymous1Anonymous1
HI Khan Anas, Thank you so much for your reply and i have one thing to get clarity. Ihave taken tag , it takes standard fields properties and behaviour like label name , but y u have given tag to give label name for fields? plz clarify my doubt Thanks

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Greetings to you!

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Visualforce: 
<apex:page standardController="Contact" extensions="HideSectionBasedOnPicklistC">
    <apex:form >
        <apex:pageBlock > 
            <apex:actionRegion>
                <apex:selectList value="{!pickchoice}" multiselect="false" size="1">
                    <apex:selectOptions value="{!items}"/>
                    <apex:actionSupport event="onchange" rerender="out1,out2"/>
                </apex:selectList>
            </apex:actionRegion>            
            <br/><br/>
            <apex:pageBlockSection id="out1" >
                <apex:outputPanel rendered="{!IF(pickchoice== 'Fresher' && pickchoice!= 'None', true , false)}">                    
                    <apex:outputLabel value="First Name" /><br/>
                    <apex:inputField value="{!contact.FirstName}" /><br/><br/>
                    <apex:outputLabel value="Last Name" /><br/>
                    <apex:inputField value="{!contact.LastName}" />
                </apex:outputPanel>
            </apex:pageBlockSection>
            
            <apex:pageBlockSection id="out2" >
                <apex:outputPanel rendered="{!IF(pickchoice== 'Experience' && pickchoice!= 'None', true , false)}">
                    <apex:outputLabel value="Email" /><br/>
                    <apex:inputField value="{!contact.Email}" /><br/><br/>
                    <apex:outputLabel value="Phone" /><br/>
                    <apex:inputField value="{!contact.Phone}" />
                </apex:outputPanel>
            </apex:pageBlockSection>        
        </apex:pageBlock>
    </apex:form>
</apex:page>

Controller: 
public class HideSectionBasedOnPicklistC {
    
    public String Pickchoice {get;set;}
    
     public HideSectionBasedOnPicklistC(ApexPages.StandardController controller) {

    }
    
    public List<SelectOption> getItems() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('None','None'));
        options.add(new SelectOption('Fresher','Fresher'));
        options.add(new SelectOption('Experience','Experience'));
        return options;
    }
}

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas
Anonymous1Anonymous1
HI Khan Anas, Thank you so much for your reply and i have one thing to get clarity. Ihave taken tag , it takes standard fields properties and behaviour like label name , but y u have given tag to give label name for fields? plz clarify my doubt Thanks
This was selected as the best answer
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Input field label is displayed only when they are the direct child of PageBlockSection. I have used inputField inside outputPanel, that's why outputLabel should be used to display field label.

I hope it helps you.

Kindly mark this as solved if the information was helpful.

Thanks and Regards,
Khan Anas
Maharajan CMaharajan C
Hi sfdc,

If you want to cahnge the pageblock entirely then please refer the below code:

I have just your code and made some changes.

<apex:page standardController="Contact" extensions="StudentData1"  >
    <apex:form >
        <apex:pageBlock title="Rendering PageBlock sections" >
            <apex:pageBlockSection columns="2"  title="Student Data">
                   <apex:selectList value="{!StudentList}" size="1" multiselect="false">
                   <apex:outputLabel value="Student:"/>
                   <apex:selectOptions value="{!list}">
                   </apex:selectOptions>
                   <apex:actionSupport event="onchange" action="{!onChangeFnCall}"  reRender="op1,op2"/>
                   </apex:selectList>
            </apex:pageBlockSection>       
        </apex:pageBlock>
                
            <apex:outputPanel id="op1">
         <apex:pageBlock id="pb1" title="Fresher Details" rendered="{!pb1Rendered}">
            <apex:pageBlockSection columns="2">
                  <apex:inputField value="{!contact.FirstName}" />
                  <apex:inputField value="{!contact.LastName}" />
            </apex:pageBlockSection>
         </apex:pageBlock> </apex:outputPanel>
         
          
            <apex:outputPanel id="op2">
           <apex:pageBlock id="pb2" title="Experience Details" rendered="{!pb2Rendered}">
            <apex:pageBlockSection columns="2">
                  <apex:inputField value="{!contact.Email}" />
                  <apex:inputField value="{!contact.Phone}" />
            </apex:pageBlockSection>
         </apex:pageBlock> </apex:outputPanel>
          

       <apex:commandButton value="save" action="{!Save}" /> 
        
    </apex:form>
</apex:page>

=========================

Class :

public class StudentData1 {


    public StudentData1(ApexPages.StandardController controller) {
    
        StudentList ='';
        
    }
    
   public boolean pb1Rendered{get;set;}
   public boolean pb2Rendered{get;set;} 
  
public String StudentList {get;set;}
 
public List<SelectOption> getlist()
{
  List<SelectOption> stulist = new List<SelectOption>();
  stulist.add(new SelectOption('None','None'));
  stulist.add(new SelectOption('fresher','Fresher'));
  stulist.add(new SelectOption('Experience','Exp'));
  return stulist;
}

public pageReference save()
{
 return null;
}

public void onChangeFnCall(){

        system.debug('@@@ '+ StudentList );
        if(StudentList =='fresher'){
            pb1Rendered = true;
            pb2Rendered= false;
        }
        else if(StudentList =='Experience'){
            pb1Rendered= false;
            pb2Rendered= true;
        }
        else{
            pb1Rendered= false;
            pb2Rendered= false;
        }
        
        system.debug('@@@ pb1Rendered = '+ pb1Rendered);
        system.debug('@@@ pb2Rendered = '+ pb2Rendered);
    }

}

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!

Thanks,
Maharajan.C