0

I have a visualforce page with a SelectList (with 3 select options) and a Command Button. Based on the selectList value chosen, I want to rerender few outputPanels below. Below are the complete details with code.

Here is the Visualforce Page code

<apex:page controller="SupplierSnapshotChartSelection" title="Chart Selection Page" sidebar="false" >
<apex:messages />

<apex:form >
<apex:panelGrid columns="2">
<apex:selectList value="{!ChartNames}" required="True">
    <apex:selectOptions value="{!ChartItems}" />
</apex:selectList> 
<br/> 
<apex:commandButton value="Generate Chart" reRender="Results" action="{!ChartGenerate}"/>
</apex:panelGrid>

<apex:outputPanel id="Results" >
<apex:outputPanel rendered="{!ChartNames=='Pie Chart'}">
    <apex:pageblock title="Suppliers" ><!-- DETAILS --></apex:pageblock> 
<apex:outputPanel>
</apex:outputPanel>
</apex:form>
</apex:page>

Apex Class

public String[] ChartNames = new String[]{};    
public String[] getChartNames() {return ChartNames;}

public void setChartNames(String[] ChartNames) {
    this.ChartNames = ChartNames;
}

public  List<SelectOption> getChartItems() {
     List<SelectOption> ChartOptions = new List<SelectOption>();
     ChartOptions.add(new SelectOption('Line Chart','Line Chart'));
     ChartOptions.add(new SelectOption('Bar Chart Vertical','Bar Chart Vertical')); 
     ChartOptions.add(new SelectOption('Pie Chart','Pie Chart'));  
     return ChartOptions;                       
}

What could be error? Please let me know. Thanks much

  • Are you seeing an error message? What is currently happening? What do you expect to happen? – Daniel Hoechst Jan 8 '14 at 5:17
  • Currently nothing is rendered. If i remove the condition rendered="{!ChartNames=='Pie Chart'}"> then the ouput panel renders correctly. But I want to render only if the above condition satisfies. – sfdcFanBoy Jan 8 '14 at 5:27
  • Your page markup is missing closing tags for the apex:outputPanel. Can you update it so it is valid? – Daniel Hoechst Jan 8 '14 at 5:33
  • Im now getting an error message when i added <apex:pageMessages> in the VF page Unknownproperty 'SupplierSnapshotChartSelection.ChartNames' – sfdcFanBoy Jan 8 '14 at 7:20
  • Add a getChartNames property – Daniel Hoechst Jan 8 '14 at 15:00
1

The issue here is that {!ChartNames=='Pie Chart'} will never be true because you've declared it not as a String but as an array of type String. Here I've changed it to just be a public String property and I also added the missing ChartGenerate action:

public with sharing class SupplierSnapshotChartSelection {

    public String ChartNames {get; set;}    

    public  List<SelectOption> getChartItems() {
         List<SelectOption> ChartOptions = new List<SelectOption>();
         ChartOptions.add(new SelectOption('Line Chart','Line Chart'));
         ChartOptions.add(new SelectOption('Bar Chart Vertical','Bar Chart Vertical')); 
         ChartOptions.add(new SelectOption('Pie Chart','Pie Chart'));  
         return ChartOptions;                       
    }

    public PageReference ChartGenerate() {
        return null;
    }

}

Now it works fine with this VF (note you didn't have a valid closing of your outputPanel at the bottom)

<apex:page controller="SupplierSnapshotChartSelection" title="Chart Selection Page" sidebar="false" >
    <apex:messages />

    <apex:form >
        <apex:panelGrid columns="2">
        <apex:selectList value="{!ChartNames}" required="True">
            <apex:selectOptions value="{!ChartItems}" />
        </apex:selectList> 
        <br/> 
        <apex:commandButton value="Generate Chart" reRender="Results" action="{!ChartGenerate}"/>
        </apex:panelGrid>

        <apex:outputPanel id="Results" >
            <apex:outputPanel rendered="{!ChartNames=='Pie Chart'}">
                <apex:pageblock title="Suppliers" ><!-- DETAILS --></apex:pageblock> 
            </apex:outputPanel>
        </apex:outputPanel>
    </apex:form>
</apex:page>

You could eliminate the chartGenerate action and the commandButton by utilizing actionSupport with an onChange Event. That can simplify things down to this:

Controller:

public with sharing class SupplierSnapshotChartSelection {

    public String ChartNames {get; set;}    

    public  List<SelectOption> getChartItems() {
         List<SelectOption> ChartOptions = new List<SelectOption>();
         ChartOptions.add(new SelectOption('','-- Select One --'));
         ChartOptions.add(new SelectOption('Line Chart','Line Chart'));
         ChartOptions.add(new SelectOption('Bar Chart Vertical','Bar Chart Vertical')); 
         ChartOptions.add(new SelectOption('Pie Chart','Pie Chart'));  
         return ChartOptions;                       
    }
}

VF

<apex:page controller="SupplierSnapshotChartSelection" title="Chart Selection Page" sidebar="false" >
    <apex:form >
        <apex:panelGrid columns="2">
        <apex:selectList value="{!ChartNames}" required="True" size="1">
            <apex:selectOptions value="{!ChartItems}" />
            <apex:actionSupport event="onchange" reRender="Results"/>
        </apex:selectList> 
        </apex:panelGrid>

        <apex:outputPanel id="Results" >
            <apex:outputPanel rendered="{!ChartNames=='Pie Chart'}">
                <apex:pageblock title="Suppliers" ><!-- DETAILS --></apex:pageblock> 
            </apex:outputPanel>
        </apex:outputPanel>
    </apex:form>
</apex:page>
  • 1
    Yes, changing the array of string to just a string worked well. Thanks much. – sfdcFanBoy Jan 9 '14 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.