Can I pass a email value from a visualforce component to a Visualforce page? I have used components for reusing Company's logo and few images...

    <apex:image value="{!$Resource.Logo}"> </apex:image>

Is it possible to pass variable to a visualforce page?



The easiest way is to pass in the controller of your visualforce page. This means you'll need either a custom controller or an extension. When you pass in the controller, you can then call getters or setters on the controller given they are publicly accessible.

For example:

    <apex:attribute name="ctrl" description="My controller" type="MyControllerClassName" required="true"/>
    <apex:image value="{!URLFOR(ctrl.ImageUrlGetter)}"> </apex:image>
| improve this answer | |

There is an extensive blog post on the Developerforce website here regarding this matter to help you out.

As a summary - you should pass in the controller of your page as an apex attribute of your component (just as James mentions). You will have your component look like

<apex:component controller="MyComponentController" >
    <apex:attribute name="pageController" type="PageControllerBase" assignTo="{!pageController}" required="true" description="The controller for the page." />

Which on your page you will use as

<c:myComponent pageController="{!pageCont}" />

This will then assign the page controller returned in the "getPageCont" method on your page controller to the "pageController" parameter/property in your component. A method in your page's controller to return itself is needed for the "getPageCont" call.

public PageControllerBase getPageCont()
    return this;
| improve this answer | |
  • 2
    Can you summarise here? – Keith C Apr 8 '14 at 13:14
  • 1
    Done :-) Uses snippets from the link. – pbattisson Apr 8 '14 at 13:29
  • What is pageCont in the component? – MnZ Apr 8 '14 at 13:35
  • 1
    Should be a bit clearer now hopefully - you are assigning the pageControllerBase instance used as the controller of your page to the pageController parameter in the component using an intermediary getPageCont method. – pbattisson Apr 8 '14 at 13:38
  • This is impossible to maintain, the view state of the page will be duplicated with each injection. – flor Oct 28 '15 at 1:08

If you feel passing the entire controller of your visualforce page is a bit too heavy-weighted, or if you need a generic component that can be reused across pages, you can also use a dedicated class to carry the data that you need to transport back and forth between page and component.

I.e. create a 'data' class like this:

public with sharing class ComponentData {
    public String theInput {get;set;}
    public String theOutput {get;set;}

In your page controller, instantiate the class:

public ComponentData theData {get;set;}

On your component, use the class as an attribute:

<apex:component controller="CompController">
<apex:attribute type="ComponentData" name="compData" required="true" description="The data going in and out" assignTo="{!cData}"/>

<apex:outputPanel id="banManagerPanel">
    <apex:inputText value="{!cData.input}">
        <apex:actionSupport event="onchange" action="{!updateData}"/>

On the component controller you can perform whatever logic that needs to be done:

public with sharing class ComponentController {
public ComponentData cData {get;set;}
public void updateData(){
    cData.theOutput = cData.theInput + ' with something extra';

And finally, on the VF page pass the instantiated data-class to the component:

<c:theComponent compData="{!theData}"/>
<apex:outputText value="{!theData.theOutput}" />

The theData on the VF page will get the updated value that was modified by the component controller, after the button inside the component is pressed.

| improve this answer | |
  • I have a button on the page and not on the Component. I mean that I want to capture Component data as well as page data and save it. I'm not able to figure out how to do this... – Tasnim Oct 1 '14 at 17:16
  • Hi @helpSFDC, please post a new question on stackexchange, possibly referring this one and we will try helping you. – Guy Clairbois Oct 2 '14 at 10:50
  • 1
    Thanks for the great answer @guy ! Thats a great way to work with components. – MnZ Dec 9 '14 at 12:29
  • 1
    Unfortunately, it looks like the apex:attribute's type attribute doesn't recognize internal classes (which I would normally use for a small class that is essentially a struct), but this is still a much cleaner model than passing around controller refs. – Jason Clark Apr 2 '15 at 13:46

Simple, Create a div on page and assign value to that div from component after execution of component and its controller. Fetch value from that div mentioned in the page.

Let me know if you need example.

Example :-

Here, Assign value to the div with id --> "finalQueryId". You can access this div value on page.

<c:FilterComponent objectName="Contact" fieldsSeparatedByComma="Id,Name,Email" 

<div id="finalQueryId" style="display:none"/>

| improve this answer | |
  • Interesting! Can you show the code for assigning the value to the div from component after execution of component and its controller? – Guy Clairbois Apr 15 '16 at 7:38
  • If the component is referred in the page then you can assign the value to that div directly from component. Lemme add a snippet – Soury Apr 16 '16 at 6:41
  • ------- Page code ------ <apex:page> <c:component/> <div id="finalDivId"/> </apex:page> ------- Component code ------ <apex:component> <script> $('#finalDivId').html('Post value you want to -->' + {!controllerVariable}); </script> </apex:component> – Soury Apr 16 '16 at 6:45
  • has anyone tried the above approach? it does not work for me unless it needs to add more logic to it. – Nick Kahn Dec 7 '16 at 16:53

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.