+ Start a Discussion
dlCamelotdlCamelot 

Show VF sections based on picklist selection

Trying to get my VisualForce blocks to display based on the selection.  If 'new user request' selected in request type field, then NewAccount block should show.  If any other value is selected in request type field, then Details block should show.  

-------------------------------------------------------------------------------------------------------
VF Page

<apex:page controller="EnhancementRequestControllerv2" cache="false" showHeader="false" sidebar="false" title="Enhancement Request">
    <apex:includeScript value="{!$Resource.Jquery}" />
    <style>
    span.pbSubExtra {
      display: none;
    }
    input.instructions{
      margin: 10px; 
      width: 100%;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
    }
    input.labels{
      margin: 10px;
      width: 100%;
      text-align: right;
      margin-left: auto;
      margin-right: auto;
      font-weight:bold
    }
    </style>
    
    <apex:image id="logo" value="{!$Resource.logo}" /> 
    
    <div style="width: 700px; margin-left: 5px;">
        <Script>
            $(document).ready(function(){
            $('[id*=NewAccount]').hide();
            $('[id*=Details]').hide();
            $('[id*=Select_Record_Type]').change(recordtype);
  

            function followupFields(){
                 alert('Showing followup fields');
                 var param = $('[id*=Select_Record_Type]').val();
                 if(param='New User Access'){
                     $('[id*=NewAccount]').show();       
                     alert('NewAccountDetails');
                     } 
                 else $('[id*Details]').show().
                    }     
            }
        });   
           
        </Script>
    <apex:form >
          <!-- main form section -->
          <apex:pageBlock id="thePB" mode="edit" rendered="{!NOT(showConfirmation)}"  >
                     <apex:pageMessages />
                     <apex:pageBlockSection collapsible="false" columns="1" title="Request Submission Form">
                     </apex:pageBlockSection>
             
                     <apex:pageBlockSection columns="1">
          
                                <apex:pageBlockSectionItem >
                                         <apex:outputPanel layout="block" styleClass="instructions">
                                                   <apex:outputLabel value="What is your request for the team?"  />
                                         </apex:outputPanel>
                                </apex:pageBlockSectionItem>
                   </apex:pageBlockSection> 
            
                   <apex:pageBlockSection columns="1">
                     <apex:pageBlockSectionItem >  
                            <apex:outputLabel value="{!$ObjectType.Enhancement_Request__c.Fields.Request_Type__c.Label}"  />
                            <apex:inputField id="Select_Record_Type" value="{!er.Request_Type__c}" style="width: 350px; height: 30px;" onchange="change();" />  
                     </apex:pageBlockSectionItem>
                      <br />
          </apex:pageBlockSection>
          
          <apex:pageBlockSection columns="1" id="NewAccount">
                    <apex:pageBlockSectionItem > 
                            <apex:outputPanel layout="block" styleClass="instructions">
                                <apex:outputLabel value="Please provide details of the new user account requested."  />
                            </apex:outputPanel>
                    </apex:pageBlockSectionItem>  
                  <apex:pageBlockSectionItem >
                        <apex:outputLabel id="showlabel" value="{!$ObjectType.Enhancement_Request__c.Fields.First_Name_New__c.Label}" />
                        <apex:inputField value="{!er.First_Name_New__c}" style="width: 350px;"/>  
                    </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                        <apex:outputLabel id="showlabel" value="{!$ObjectType.Enhancement_Request__c.Fields.Last_Name_New__c.Label}" />
                        <apex:inputField value="{!er.Last_Name_New__c}" style="width: 350px;"/>  
                    </apex:pageBlockSectionItem> 
                    <apex:pageBlockSectionItem >
                        <apex:outputLabel id="showlabel" value="{!$ObjectType.Enhancement_Request__c.Fields.Email_New__c.Label}" />
                        <apex:inputField value="{!er.Email_New__c}" style="width: 350px;"/>  
                    </apex:pageBlockSectionItem> 
           </apex:pageBlockSection> 
             <apex:pageBlockSection columns="1" id="Details"> 
                  <apex:pageBlockSectionItem >  
                            <apex:outputLabel value="{!$ObjectType.Enhancement_Request__c.Fields.Details__c.Label}"  />
                            <apex:inputField value="{!er.Details__c}" style="width: 350px; height: 75px;" />
                  </apex:pageBlockSectionItem>
             </apex:pageBlockSection>
                      
             <br/>
              
             <apex:pageBlockSection columns="1"> 
                    <apex:pageBlockSectionItem >
                            <apex:outputPanel layout="block" styleClass="instructions">
                                    <apex:outputLabel value="Indicate the email account to receive notifications regarding this request."  /><br/>
                            </apex:outputPanel>
                    </apex:pageBlockSectionItem>
             </apex:pageBlockSection>
               <!-- submitter details  -->
             <apex:pageBlockSection columns="1"> 
                    <apex:pageBlockSectionItem >
                            <apex:outputPanel layout="block" styleClass="label">
                                    <apex:outputLabel value="Submitter Email"/>
                            </apex:outputPanel>
                            <apex:outputPanel layout="block" style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;">
                                    <apex:inputField value="{!er.Email__c}" style="width: 350px;" />
                            <br/>
                            </apex:outputPanel>
                    </apex:pageBlockSectionItem>
               </apex:pageBlockSection>
                 
                 
            <!-- buttons section -->    
            <apex:pageBlockSection columns="1" collapsible="false" showHeader="false">
                    <apex:pageBlockSectionItem >
                            <apex:outputPanel layout="block" style="margin: 10px; width: 100%; text-align: center; margin-left: auto; margin-right: auto;">
                                    <apex:commandButton action="{!submitRequest}" value="Submit Request" />
                                    <apex:commandButton value="Clear" onclick="window.location.href=window.location.href; return false;"/>
                            </apex:outputPanel>
                    </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
      </apex:pageBlock>
    
      <!-- confirmation message, only renders when request is submitted -->
      <apex:pageBlock mode="edit" rendered="{!showConfirmation}" id="pb_conf" >
                <apex:pageBlockSection columns="1" title="Enhancement Request">
                    <apex:outputPanel layout="block" style="margin-bottom: 5px;">
                        Your request has been submitted and is being processed. You should receive an email confirmation regarding your submission.  
                    </apex:outputPanel>
                </apex:pageBlockSection>
      </apex:pageBlock>
    
    </apex:form>
    </div>
</apex:page> 
------------------------------------------------------------------------------------------------------------------------------------------------------------------

Here is the controller, though it is not used for much:


public with sharing class EnhancementRequestControllerv2 {

    /*Constructors*/
    public EnhancementRequestControllerv2(){
    } 
    
    /*VF Page block render variable*/
    public Boolean showConfirmation { 
    set;
    get {
      if (showConfirmation == null)
          showConfirmation = false;
      return showConfirmation;
          }
    }

    
    /*  New Request */
    public Enhancement_Request__c er {
      get {
          if (er == null)
              er = new Enhancement_Request__c();
          return er;          
      }
      set;
    }
    
    /*Submission Logic*/
    public PageReference submitRequest() {
        
            /*General Field Validations*/
            //if (Util.isBlank(er.Email__c)) Util.addPageError('Please provide an email address.');
            
           /*Get submitter info through email address entered*/
           list<User> currentUserLst = new List<User>(); 
           currentUserLst = [Select id, firstname, lastName, email from User Where email =: er.Email__c limit 1];   
        
          
        IF(!currentUserLst.isEmpty()){
            /*If email matches  User*/
            try{
                /*Add user to practitioner field */
                er.Practitioner__c = currentUserLst[0].id;
                er.Email__c = currentUserLst[0].email;
                /*Indicate intake channel*/
                er.Form_Channel__c = TRUE;
                /*Hide submission page; show confirmation page*/
                showConfirmation = true;
                insert er;
                /* updated for automate approval */
                Approval.ProcessSubmitRequest sApprovalProcess = new Approval.ProcessSubmitRequest();
                sApprovalProcess.setComments('Submitted for Approval');
                sApprovalProcess.setObjectId(er.Id);
                Approval.ProcessResult result;
                result = Approval.process(sApprovalProcess);                
             }
            catch(DmlException ex){
                ApexPages.addMessages(ex);
             }
         
        }  
        /*If email does not match a user */
        ELSE{ 
            Util.addPageError('Your email address does not match a  account on file.  Please reverify or reach out to an admin.');
        }
        return null;
      
    }
   
}
sandeep madhavsandeep madhav
Hi,

Hope this helps,

Get the selected picklist value in controller and render the page,

Example: 
Page:

<apex:outputpanel id="newaccount" rendered="{!newaccountSection}">
   have your pageblock
</apex:outputpanel>


<apex:outputpanel id="accountdetails" rendered="{!accountdetaiilsSection}">
   have your pageblock
</apex:outputpanel>

Apex:

Based on picklist value sent the boolean value.
Public boolean newaccountSection{set;get;}

Public boolean accountdetaiilsSection{set;get;}

If(picklist value is new user request)
 newaccountSection = true;
 accountdetaiilsSection = false;
else{
 newaccountSection = false;

 accountdetaiilsSection = true;
}
sandeep madhavsandeep madhav
Hope this helps, Mark to help other users.
dlCamelotdlCamelot
Some of the fields share a picklist value - for example value A shows fields 1 & 2, value B shows fields 2 & 3.  Is it possible to do this in the JS?