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
Michael Hedrick 2Michael Hedrick 2 

hide panelGrid until commandbutton click

Hello,
I am trying to perform the following
  • Hide commandbutton unless a picklist value has been selected
  • Hide panelgrid until commandbutton has been clicked.
Here is my VF page: 
<apex:page standardStylesheets="true"  showHeader="True" sidebar="true" Controller="AccountDealerController" >
  <apex:form >
       <apex:pageBlock title="Select an Account">
        
        <apex:outputpanel id="Outputtext">
        <apex:outputtext value="{!fieldValue}"/>
        </apex:outputpanel>
        
            <apex:selectList value="{!selectedFields}" size="1">
                <apex:selectOptions value="{!AccountNames}" />
                <apex:actionSupport event="onchange"  reRender="values" action="{!passValueToController}"/>              
           </apex:selectList><br/><br/>  
        <apex:outputText value="{!fieldValue}" label="You have selected:" id="values" /> <!--  used to verify Id -->           
       </apex:pageBlock>  
      
      <apex:commandButton value="See Charts" reRender="chart"/><br/>

        <apex:outputPanel id="chart">
        <apex:outputPanel rendered="{!fieldValue}">

                <apex:panelGrid columns="3" id="theGrid">
                    <analytics:reportChart showRefreshButton="false"  reportId="AAAAAA" filter="[{column:'ACCOUNT_ID',operator:'equals',value:'{!fieldValue}'}]" size="small"> </analytics:reportChart>
                    <analytics:reportChart showRefreshButton="false"  reportId="AAAAAA" filter="[{column:'ACCOUNT_ID',operator:'equals',value:'{!fieldValue}'}]" size="small"> </analytics:reportChart>
                    <analytics:reportChart showRefreshButton="false"  reportId="AAAAA" filter="[{column:'ACCOUNT_ID',operator:'equals',value:'{!fieldValue}'}]" size="small"> </analytics:reportChart>
                    <analytics:reportChart showRefreshButton="false"  reportId="AAAAAA" filter="[{column:'ACCOUNT_ID',operator:'equals',value:'{!fieldValue}'}]" size="small"> </analytics:reportChart>
                    <analytics:reportChart showRefreshButton="false"  reportId="AAAAAAA" filter="[{column:'ACCOUNT_ID',operator:'equals',value:'{!fieldValue}'}]" size="small"> </analytics:reportChart>
                    <analytics:reportChart showRefreshButton="false"  reportId="AAAAAA" filter="[{column:'ACCOUNT_ID',operator:'equals',value:'{!fieldValue}'}]" size="small"> </analytics:reportChart>
               </apex:panelGrid>
           </apex:outputPanel>
      </apex:outputPanel>  
    </apex:form>
</apex:page>
Suggestions are greatly appreiated.
M
 
Best Answer chosen by Michael Hedrick 2
Amit GhadageAmit Ghadage
Hi Michael,
I am using your Controller.
To see where I am hiding buttons and graphs please go through the comments in code.

Controller : 
Public with sharing class AccountDealerController {
    public Id selectedAccId{get;set;} 

    public String fieldValue {get; set;}
    public String selectedFields{get;set;}
	public boolean showPanel { get; set; } //to show and hide graph
	public boolean showButton { get; set; } //to show and hide button
	
	public AccountDealerController()
    {
        showButton = false; // onload don't display button and panelGrid
        showPanel = false;
    }

	public void commandButtonClick() {
        showPanel = true; //on click of button show panel
    }
	
	public void valueSelectedShowButton() {
        showButton = true;// after selecting value f
    }



    public List<SelectOption> getAccountNames() {
        List<SelectOption> accOptions= new List<SelectOption>();
        system.debug(selectedAccId);
        accOptions.add( new SelectOption('','--Select--'));
        for(Account acc : [select Id,name from Account Where Partner_Type__c='Dealer' AND YTD_Indirect_Sales_Totals__c > 10000 AND OwnerId =:UserInfo.getUserid() ] ) {
            accOptions.add(new SelectOption(acc.Id,acc.name));
        }
        return accOptions;
    }
  
  public void passValueToController(){
    fieldValue = selectedFields;
}
  
  }

page : 
<apex:page standardStylesheets="true"  showHeader="True" sidebar="true" Controller="CommAccountDealerController" >
  <apex:form >
       <apex:pageBlock title="Select an Account">
        
        <apex:outputpanel id="Outputtext">
        <apex:outputtext value="{!fieldValue}"/>
        </apex:outputpanel>
        
            <apex:selectList value="{!selectedFields}" size="1">
            <apex:actionSupport event="onchange"  reRender="buttonId" action="{!valueSelectedShowButton}"/>     <!-- after selecting value in picklist set showButton to true. rerender pageBlock "buttonId" so button will be rerendered-->         
                <apex:selectOptions value="{!AccountNames}" />
           </apex:selectList><br/><br/>  
        <apex:outputText value="{!fieldValue}" label="You have selected:" id="values" /> <!--  used to verify Id -->           
       </apex:pageBlock>  
      <apex:pageBlock id ="buttonId">
      <apex:commandButton value="See Charts" rendered="{!showButton}" action = "{!commandButtonClick}" reRender = "chart"/><!--onclick button set  showPanel to true
and rerender outputPanel(chart) so panelGrid will be rerendered-->
      </apex:pageBlock>

        <apex:outputPanel id="chart">
        <apex:outputPanel rendered="{!fieldValue}">

                <apex:panelGrid columns="3" id="theGrid" rendered = "{!showPanel}">
                3 columns//your graphs
                    
               </apex:panelGrid>
           </apex:outputPanel>
      </apex:outputPanel>  
    </apex:form>
</apex:page>
Best Regards,
Amit.

 

All Answers

Amit GhadageAmit Ghadage
Hi Michael,
Declare two proprties in controller one for rendering parent tag of button  and other for rendering parent tag of panelGrid. Set default false in constructor.
1) on changing picklist update property declared for button to true in action.
2) on click button update property declared for panelGrid to true.

use rendered attribute to render parent tag of commandButton and panelGrid.

I have created a mockup from your vf page.

vf page: 
<apex:page standardStylesheets="true"  showHeader="True" sidebar="true" Controller="CommAccountDealerController" >
  <apex:form >
       <apex:pageBlock title="Select an Account">
        
        <apex:outputpanel id="Outputtext">
        <apex:outputtext value="{!fieldValue}"/>
        </apex:outputpanel>
        
            <apex:selectList value="{!selectedFields}" size="1">
            <apex:actionSupport event="onchange"  reRender="buttonId" action="{!passValueToController}"/>              
                <apex:selectOptions value="{!AccountNames}" />
           </apex:selectList><br/><br/>  
        <apex:outputText value="{!fieldValue}" label="You have selected:" id="values" /> <!--  used to verify Id -->           
       </apex:pageBlock>  
      <apex:pageBlock id ="buttonId">
      <apex:commandButton value="See Charts" rendered="{!selectedFields}" action = "{!commandButtonClick}" reRender = "chart"/>
      </apex:pageBlock>

        <apex:outputPanel id="chart">
        <apex:outputPanel rendered="{!fieldValue}">

                <apex:panelGrid columns="3" id="theGrid" rendered = "{!showPanel}">
                3 columns
                    
               </apex:panelGrid>
           </apex:outputPanel>
      </apex:outputPanel>  
    </apex:form>
</apex:page>

CommAccountDealerController : 
public with sharing class CommAccountDealerController {

    public boolean showPanel { get; set; }

    public void commandButtonClick() {
        showPanel = true;
    }

    
    public List<SelectOption> AccountNames { get; set; }

    public boolean selectedFields { get; set; }

    public String fieldValue { get; set; }
    
    public CommAccountDealerController()
    {
        AccountNames = new List<SelectOption>();
        AccountNames.add(new SelectOption('PickList1','pickLIst1'));
        AccountNames.add(new SelectOption('PickList2','pickLIst2'));
        selectedFields = false;
        showPanel = false;
    }
    public void passValueToController() {
        selectedFields = true;
    }


   
}
hope it helps.

Best Regards,
Amit.
 
Michael Hedrick 2Michael Hedrick 2
Amit,
Thank you for the fast reply.  I have attached my current class to help clarify for reference. 
Public with sharing class AccountDealerController {
    public Id selectedAccId{get;set;} 

    public String fieldValue {get; set;}
    public String selectedFields{get;set;}


    public List<SelectOption> getAccountNames() {
        List<SelectOption> accOptions= new List<SelectOption>();
        system.debug(selectedAccId);
        accOptions.add( new SelectOption('','--Select--'));
        for(Account acc : [select Id,name from Account Where Partner_Type__c='Dealer' AND YTD_Indirect_Sales_Totals__c > 10000 AND OwnerId =:UserInfo.getUserid() ] ) {
            accOptions.add(new SelectOption(acc.Id,acc.name));
        }
        return accOptions;
    }
  
  public void passValueToController(){
    fieldValue = selectedFields;
}
  
  }

What lines of code in your example actually hides the graphs and button?  Trying to make sure I understand the logic used.
Thanks.
 
Amit GhadageAmit Ghadage
Hi Michael,
I am using your Controller.
To see where I am hiding buttons and graphs please go through the comments in code.

Controller : 
Public with sharing class AccountDealerController {
    public Id selectedAccId{get;set;} 

    public String fieldValue {get; set;}
    public String selectedFields{get;set;}
	public boolean showPanel { get; set; } //to show and hide graph
	public boolean showButton { get; set; } //to show and hide button
	
	public AccountDealerController()
    {
        showButton = false; // onload don't display button and panelGrid
        showPanel = false;
    }

	public void commandButtonClick() {
        showPanel = true; //on click of button show panel
    }
	
	public void valueSelectedShowButton() {
        showButton = true;// after selecting value f
    }



    public List<SelectOption> getAccountNames() {
        List<SelectOption> accOptions= new List<SelectOption>();
        system.debug(selectedAccId);
        accOptions.add( new SelectOption('','--Select--'));
        for(Account acc : [select Id,name from Account Where Partner_Type__c='Dealer' AND YTD_Indirect_Sales_Totals__c > 10000 AND OwnerId =:UserInfo.getUserid() ] ) {
            accOptions.add(new SelectOption(acc.Id,acc.name));
        }
        return accOptions;
    }
  
  public void passValueToController(){
    fieldValue = selectedFields;
}
  
  }

page : 
<apex:page standardStylesheets="true"  showHeader="True" sidebar="true" Controller="CommAccountDealerController" >
  <apex:form >
       <apex:pageBlock title="Select an Account">
        
        <apex:outputpanel id="Outputtext">
        <apex:outputtext value="{!fieldValue}"/>
        </apex:outputpanel>
        
            <apex:selectList value="{!selectedFields}" size="1">
            <apex:actionSupport event="onchange"  reRender="buttonId" action="{!valueSelectedShowButton}"/>     <!-- after selecting value in picklist set showButton to true. rerender pageBlock "buttonId" so button will be rerendered-->         
                <apex:selectOptions value="{!AccountNames}" />
           </apex:selectList><br/><br/>  
        <apex:outputText value="{!fieldValue}" label="You have selected:" id="values" /> <!--  used to verify Id -->           
       </apex:pageBlock>  
      <apex:pageBlock id ="buttonId">
      <apex:commandButton value="See Charts" rendered="{!showButton}" action = "{!commandButtonClick}" reRender = "chart"/><!--onclick button set  showPanel to true
and rerender outputPanel(chart) so panelGrid will be rerendered-->
      </apex:pageBlock>

        <apex:outputPanel id="chart">
        <apex:outputPanel rendered="{!fieldValue}">

                <apex:panelGrid columns="3" id="theGrid" rendered = "{!showPanel}">
                3 columns//your graphs
                    
               </apex:panelGrid>
           </apex:outputPanel>
      </apex:outputPanel>  
    </apex:form>
</apex:page>
Best Regards,
Amit.

 
This was selected as the best answer
Michael Hedrick 2Michael Hedrick 2
Amit,
The functionality works as describe if I leave the value as '3 Columns' it works but if I replace it with my graphs it does not render anything. 
<analytics:reportChart showRefreshButton="false"  reportId="AAAAAAAA" filter="[{column:'ACCOUNT_ID',operator:'equals',value:'{!fieldValue}'}]" size="small"> </analytics:reportChart>

is it my analytic:reportchart syntax? 
Michael Hedrick 2Michael Hedrick 2
Amit,
I do not think the id is getting returned after the picklist value is selected/
This use to populate after the picklist field was selected 
<apex:outputText value="{!fieldValue}" label="You have selected:" id="values" />

Maybe this is why the graphs aren't showing?
Michael Hedrick 2Michael Hedrick 2
Amit--Would it be simplier to just disable the commandbutton until a value is selected?
Michael Hedrick 2Michael Hedrick 2
Hey Amit,
Let me know if you have any other thoughts on how to approach this.  I tried leveraging "oncomplete" thinking that woukld allow me to call 2 methods with an onchnage event but I am still unable toget both methods to fire.  Any additional suggestions would be appreciated.
Regards,
Michael