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

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.