How do I pass a parameter from component to a Visualforce page?

Question

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:component>
    <apex:image value="{!$Resource.Logo}"> </apex:image>
</apex:component>

Is it possible to pass variable to a visualforce page?

Thanks.

Answer 1

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:component>
    <apex:attribute name="ctrl" description="My controller" type="MyControllerClassName" required="true"/>
    <apex:image value="{!URLFOR(ctrl.ImageUrlGetter)}"> </apex:image>
</apex:component>

Answer 2

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." />
</apex:component>

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;
}

Answer 3

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}"/>
    </apex:inputText>
</apex:outputPanel>
</apex:component>

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.

Answer 4

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" 
                                                                    divId="finalQueryId"/>

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