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
jldenningjldenning 

Passing attribute of one custom component to another custom component

I have 2 custom components that each include a select box.  I would like to have the first pass its value to the second so that it can change the choices based on the value it is passed.  How would I go about passing the value to the second component?

Best Answer chosen by Admin (Salesforce Developers) 
Neeraj_ChauriyaNeeraj_Chauriya

Hi,

 

What I understand from your requirement is that, you have two separate components and the one component is dependent on the updated value from the other component.

 

So, let me know if the below provided solution works for you:

 

Extension: SharedClass

public SharedClass{
	public String fieldA{get;set;}
	public String fieldB{get;set;}
	public SharedClass sharedInstance
	{
		get{
			return this;
		}
		set;
	}
}

 

VF Page

<apex:page controller="PageController" extensions="SharedClass">
    <!-- Include both the components and share same instance of SharedClass with both components-->
    <c:componentA sharedObj="{!sharedInstance}"/>
    <c:componentB sharedObj="{!sharedInstance}"/>
</apex:page>

 

ComponentA

<apex:component>
    <apex:attribute name="sharedObj" type="SharedClass"/>
    <!--
        Put code for your component and the select box you want to use, whose value will be used in ComponentB.(for example: fieldA)
        After changing the value of say a picklist, rerender the panel in the parent page which included componentB.
        Both the components willl share same instance of SharedClass.
    -->
</apex:component>

 

ComponentB

<apex:component>
    <apex:attribute name="sharedObj" type="SharedClass"/>
    <!--
        Use the updated value of fields from SharedClass instance {!sharedObj.fieldName}
        (for example: fieldB is dependent on fieldA)
    -->
</apex:component>

 

All Answers

Neeraj_ChauriyaNeeraj_Chauriya

Hi,

 

Create an extension class which will be included in the page in which you are using 2 custom components. Bind the field values for both the components with this class and then share the instance of extension using the component attribute, by this way you can access the field values of both the components from each other.

 

Make sure that you rerender the other component after changing value from one component.

 

 

I hope this solution helps!

 

Important :
Hit Kudos if this provides you with useful information and if this is what you where looking for then please mark it as a solution for other's benefit.

 

Thanks,

Neeraj

 

 
jldenningjldenning

Thanks Neeraj.

 

I tried something similar using the page's controller to do the variable passing, but it didn't work. Below is the snippet for the page and its controller.  fieldName and searchFor are attributes of the SearchLookup controller. Where am I going wrong?

<apex:page controller="autoLookUp">
    <apex:form >
         <c:SearchLookup object="Product2"  value="{!ProductId}" mxHeight="20" width="250px" style="float: left"/> 
         <apex:actionsupport event="onchange" rerender="LotTraceLookup" /> 
         <c:SearchLookup id="LotTraceLookup" object="Lot_Trace__c" fieldName="Product__c" searchFor="{!ProductId}"  value="{!LotTraceId}" mxHeight="1" width="250px" style="float: left"/> 
    </apex:form>
</apex:page>


public class autoLookUp {
    public Id LotTraceId {get; set;}
    public Id ProductId {get; set;}
}

 
Neeraj_ChauriyaNeeraj_Chauriya

Hi,

 

What I understand from your requirement is that, you have two separate components and the one component is dependent on the updated value from the other component.

 

So, let me know if the below provided solution works for you:

 

Extension: SharedClass

public SharedClass{
	public String fieldA{get;set;}
	public String fieldB{get;set;}
	public SharedClass sharedInstance
	{
		get{
			return this;
		}
		set;
	}
}

 

VF Page

<apex:page controller="PageController" extensions="SharedClass">
    <!-- Include both the components and share same instance of SharedClass with both components-->
    <c:componentA sharedObj="{!sharedInstance}"/>
    <c:componentB sharedObj="{!sharedInstance}"/>
</apex:page>

 

ComponentA

<apex:component>
    <apex:attribute name="sharedObj" type="SharedClass"/>
    <!--
        Put code for your component and the select box you want to use, whose value will be used in ComponentB.(for example: fieldA)
        After changing the value of say a picklist, rerender the panel in the parent page which included componentB.
        Both the components willl share same instance of SharedClass.
    -->
</apex:component>

 

ComponentB

<apex:component>
    <apex:attribute name="sharedObj" type="SharedClass"/>
    <!--
        Use the updated value of fields from SharedClass instance {!sharedObj.fieldName}
        (for example: fieldB is dependent on fieldA)
    -->
</apex:component>

 

This was selected as the best answer
jldenningjldenning

Worked great.  Thanks so much.