+ Start a Discussion
tgk1tgk1 

Show page block sections based on field value

Hi everyone - I'm writing up a VisualForce page and I could use some help.  The page I'm trying to setup has three main values:  Product Line, Type, and Order Type.  These three fields are required, and the values of the Product Line field will be used to determine what pageblocksection to display.

 

<apex:page standardController="Opportunity" tabStyle="opportunity" sidebar="false" showHeader="false">
  <apex:form >
    <apex:pageblock title="{!Opportunity.Account.Name} Product List">
      <apex:pageblockButtons location="bottom">
        <apex:commandButton value="Save" action="{!save}"/>
      </apex:pageblockButtons>
      <apex:pageblocksection columns="1">
        <apex:inputfield value="{!Opportunity.Product_Line__c}" required="true"/>
        <apex:inputfield value="{!Opportunity.Type}" required="true"/>
        <apex:inputField value="{!Opportunity.OrderType__c}" required="true"/>
        
        <!-- Page Block Sections-->
        <apex:pageblocksection title="Value 1 Required Fields" columns="1" collapsible="true" id="value1">
        </apex:pageblocksection>
       
        <apex:pageblocksection title="Value 2 Required Fields" columns="2" collapsible="true" id="value2">
        </apex:pageblocksection>
        
        <apex:pageblocksection title="Value 3 Required Fields" columns="2" collapsible="true" id="value3">
        </apex:pageblocksection>
        
        <apex:pageblockSection title="Value 4 Required Fields" columns="2" collapsible="true" id="value4">
        </apex:pageblockSection>
       
      </apex:pageblocksection>
      <!--End Page Block Sections-->
    </apex:pageblock>
  </apex:form>
</apex:page>

 

I'm new to javascript and visualforce, so I could really use some help here.  I don't want any of the pageblocksections to display until the Product Line field is filled out.  For example, if a person selects "Value 1" in the Product Line field, I want the Value 1 page block section to display.  There are four values total.  Any help would be greatly appreciated! 

Edwin VijayEdwin Vijay
<apex:inputfield value="{!Opportunity.Product_Line__c}" required="true">
<apex:actionsupport event="onchange" rerender="sec1"/>
</apex:inputfield>

<apex:outputpanel id="sec1">
<apex:pageblocksection rendered="{!IF(Opportunity.Product_Line__c == 'Value 1',TRUE,FALSE)}" columns="1" collapsible="true" id="value1">
</apex:pageblocksection>
</apex:outputpanel>

 You will need something like the above

tgk1tgk1

Thanks Edwin.  I tried to use the code that you described and the page doesn't rerender the Value 1 section, it just gets rid of it from the UI.


Essentially what I'm looking to do is take the Product_Line__c and Type fields and use the values that are selected by the user to determine what appropriate page block section to show. 

 

For example, if Product_Line__c was "Value 2" and Type was "Type 3", I would want the Value 2 pageblocksection to appear, and the Type 3 pageblocksection would appear inside of Value 2 (nested pageblocksections).  Any help would be greatly appreciated :)