I am facing problem passing value between visual force component to visual force page.

<apex:page  sidebar="false" showHeader="false" standardStylesheets="false"  docType="html-5.0">

    <c:MenuComponent />  // this contain list of menu 

    <c:component1 />  // this sub page 1

     <c:component2 />  // this sub page 2

      <c:component3 />  // this sub page 3 


i have requirement that when i press or select first menu in MenuComponent , Then i have render only <c:component1 />, if i select second menu in MenuComponent , Then i have render only <c:component2 />

how can achieve this one, its like passing value from component to visual force page and again visual force page to component again. Please any help .

  • Could you post some snippet so that we can look further?
    – Raul
    Oct 9, 2017 at 11:53
  • @RahulSharma you can take NileshBorse answer as question . same thing i wanted to .achieve.
    Oct 9, 2017 at 12:00

1 Answer 1


Yes, you can do that, you can't pass value from component to page directly but using apex controller you can check and render the components according to that.

e.g: Suppose following is my menuComponent

<apex:component controller="listController">
     <apex:selectList id="complainType" value="{!selMenu}" size="1" styleClass="slds-select" label="Complain Type" onchange="callMe()">
       <apex:selectOptions value="{!Menus}" />

    function callMe{
        callCtrl();//this will call action function in VF page

<apex:page  sidebar="false" **controller="menuController"** showHeader="false" standardStylesheets="false"  docType="html-5.0">
<apex:form id="frm">
<!--controller checkSelMenu method will be called from here-->    
        <apex:actionFunction action="{!checkSelMenu}" name="callCtrl" id="callCtrl" rerender="frm"/>

    <c:MenuComponent />  // this contain list of menu 

    <apex:outputPanel rendered="{!if(isMenuSel1,true,false)}">
        <c:component1 />  // this sub page 1

    <apex:outputPanel rendered="{!if(isMenuSel2,true,false)}">
     <c:component2 />  // this sub page 2

 <apex:outputPanel rendered="{!if(isMenuSel3,true,false)}">
     <c:component3 />  // this sub page 3 

apex Class

public class listController{    
    public String selMenu{get;set;}
    public boolean isMenuSel1{get;set;}
    public boolean isMenuSel2{get;set;}
    public boolean isMenuSel3{get;set;}

    public listController(){
    public List<SelectOption> getMenus(){    

        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('','--None--'));
        options.add(new SelectOption('Menu1','Menu 1'));
        options.add(new SelectOption('Menu2','Menu 2'));
        options.add(new SelectOption('Menu3','Menu 3'));
        options.add(new SelectOption('Menu4','Menu 4'));
        return options;

    public void checkSelMenu(){
        if(selMenu == 'Menu1')
          isMenuSel1= true;
        else if(selMenu == 'Menu2')
          isMenuSel2= true;
  • Defeats the purpose of using Visualforce components as it relies on having JavaScript, it would work but not the best option.
    – Raul
    Oct 9, 2017 at 11:35
  • @NileshBorse Yes , I know its easy on component, But my project is fully based on classic, no option to include lightning part here .
    Oct 9, 2017 at 11:45
  • @RahulSharma Any alternative solution from your side ?
    Oct 9, 2017 at 11:46
  • @NITHESHK, What nilesh mentioned, would work on classic and does not contain any lightning related functionality?
    – Raul
    Oct 9, 2017 at 12:02
  • 1
    thanks @NileshBorse Worked, Did some change based on my requirement .
    Oct 10, 2017 at 9:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .