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
Rakesh ImsaniRakesh Imsani 

how to get one component's attribute in another component in lightning component

Hi Friends

I am facing a issue with how can to get  one components attribute value to another component

 
 I have Two components 1) FormComponent and 2) PrintComponent
 
 I need FormComponent's OppId attribute in PrintForm's Java script controller.
 
 How can i get the attribute?
 
 Below is the code skeleton
 
 FormComponent.cmp
 ----------------
 
 <aura:component controller="FormController">
 <aura:attribute name="oppId" type="String" default=""/> 
    <lightning:layout>
 
 <lightning:layoutItem padding="horizontal-small" largeDeviceSize="3" mediumDeviceSize="3" smallDeviceSize="12" size="12">
                    <lightning:button variant="brand" label="Print Forms" title="Print Loan Agreement" onclick="{!c.printForms}" />
                     
                   </lightning:layoutItem>
                   
                   </lightning:layout>
  
    
</aura:component>


FormComponentcontroller.js
------------------------------

({
    doInit: function(component, event, helper){
},

 printForms : function(component, event, helper){
 
 // need to send oppId to another component PrintForm
 
 }
})


PrintForm.cmp
-------------
<aura:component implements="force:appHostable,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global"
                controller="PrintController">
    
     <aura:attribute name="oppId" type="String" default=""/>
     
     <!--  logic to implement the datatable to view the data -->
     
</aura:component>

PrintFormController.js
-----------------------

{
    doInit: function(component, event, helper){
// how can i get the oppId value from Form component
},

 
Best Answer chosen by Rakesh Imsani
Maharajan CMaharajan C
Hi Rakesh,

Use the Application Event:
https://www.biswajeetsamal.com/blog/application-events-in-salesforce-lightning-framework/

1.  Create Application Event:   Name as passoppId

<!--passoppId.evt-->
<aura:event type="Application">
    <aura:attribute name="oppId" type="String" />
</aura:event>

2.  Fire the event from FormComponent
 FormComponent.cmp
 ----------------
 <aura:component controller="FormController">
 <aura:attribute name="oppId" type="String" default=""/> 
<aura:registerEvent name="passoppId" type="c:passoppId"/>
    <lightning:layout>
 <lightning:layoutItem padding="horizontal-small" largeDeviceSize="3" mediumDeviceSize="3" smallDeviceSize="12" size="12">
                    <lightning:button variant="brand" label="Print Forms" title="Print Loan Agreement" onclick="{!c.printForms}" />
                   </lightning:layoutItem>
                   </lightning:layout>
</aura:component>

FormComponentcontroller.js
------------------------------
({
    doInit: function(component, event, helper){
},

 printForms : function(component, event, helper){
 // need to send oppId to another component PrintForm
        var appEvent = $A.get("e.c:passoppId"); 
        appEvent.setParams({"oppId" : component.get('v.oppId')}); 
        appEvent.fire();
 }
})


3.  handle the event in PrintForm component
PrintForm.cmp
-------------
<aura:component implements="force:appHostable,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global"
                controller="PrintController">
    <aura:handler event="c:passoppId" action="{!c.doInit}"/>
     <aura:attribute name="oppId" type="String" default=""/>
     <!--  logic to implement the datatable to view the data -->
</aura:component>

PrintFormController.js
-----------------------

{
    doInit: function(component, event, helper){
// how can i get the oppId value from Form component
       var message = event.getParam("oppId"); 
        component.set("v.oppId", message);
},


Thanks,
Maharajan.C
 

All Answers

Boss CoffeeBoss Coffee
You can pass the oppId attribute if you reference the PrintComponent inside of the FormComponent. If you don't want to display the datatable until the button is clicked, then create a new attribute in the FormComponent to determine whether or not you display the PrintComponent. Then, in your button logic, you can set the attribute to true to display the contents of the PrintComponent. You can also hide the button after clicking on it. 
// --- FORM COMPONENT
<aura:component controller="FormController">
  <aura:attribute name="oppId" type="String" default=""/> 
  
  // --- NEW AURA ATTRIBUTE
  <aura:attribute name="displayPrint" type="Boolean" default="false"/>

  // --- AURA IF to decide whether or not to show button
  <aura:if isTrue="{!not(v.displayPrint)}">

    <lightning:layout>
 
      <lightning:layoutItem padding="horizontal-small" largeDeviceSize="3" mediumDeviceSize="3" smallDeviceSize="12" size="12">
        <lightning:button variant="brand" label="Print Forms" title="Print Loan Agreement" onclick="{!c.printForms}" />
                     
      </lightning:layoutItem>
                   
    </lightning:layout>

  </aura:if>
  
  // --- AURA IF to decide whether or not to show content
  <aura:if isTrue="{!v.displayPrint}">
    // --- PRINT FORM COMPONENT
    <c:PrintForm oppId="{!v.oppId}"/>
  </aura:if>

</aura:component>

// --- FORM COMPONENT JAVASCRIPT CONTROLLER
({
    doInit: function(component, event, helper){
},

 printForms : function(component, event, helper){
 
 // --- UPDATE THE BOOLEAN ATTRIBUTE
 // --- May want to do any type of validation checks before displaying the table
 component.set("v.displayPrint", true);

 // need to send oppId to another component PrintForm
 
 }
})
Rakesh ImsaniRakesh Imsani
Thanks for the response @Boss Coffee,

I need to send opportunity id from the Form Controller dynamically to the Print controller when button click..and get that same opp id in printcontroller.


 
Boss CoffeeBoss Coffee
As long as you link the parent (FormComponent) attribute to the child (PrintComponent) attribute like displayed above, then if oppId changes in FormComponent, the oppId will also change for the PrintComponent.
Maharajan CMaharajan C
Hi Rakesh,

Use the Application Event:
https://www.biswajeetsamal.com/blog/application-events-in-salesforce-lightning-framework/

1.  Create Application Event:   Name as passoppId

<!--passoppId.evt-->
<aura:event type="Application">
    <aura:attribute name="oppId" type="String" />
</aura:event>

2.  Fire the event from FormComponent
 FormComponent.cmp
 ----------------
 <aura:component controller="FormController">
 <aura:attribute name="oppId" type="String" default=""/> 
<aura:registerEvent name="passoppId" type="c:passoppId"/>
    <lightning:layout>
 <lightning:layoutItem padding="horizontal-small" largeDeviceSize="3" mediumDeviceSize="3" smallDeviceSize="12" size="12">
                    <lightning:button variant="brand" label="Print Forms" title="Print Loan Agreement" onclick="{!c.printForms}" />
                   </lightning:layoutItem>
                   </lightning:layout>
</aura:component>

FormComponentcontroller.js
------------------------------
({
    doInit: function(component, event, helper){
},

 printForms : function(component, event, helper){
 // need to send oppId to another component PrintForm
        var appEvent = $A.get("e.c:passoppId"); 
        appEvent.setParams({"oppId" : component.get('v.oppId')}); 
        appEvent.fire();
 }
})


3.  handle the event in PrintForm component
PrintForm.cmp
-------------
<aura:component implements="force:appHostable,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global"
                controller="PrintController">
    <aura:handler event="c:passoppId" action="{!c.doInit}"/>
     <aura:attribute name="oppId" type="String" default=""/>
     <!--  logic to implement the datatable to view the data -->
</aura:component>

PrintFormController.js
-----------------------

{
    doInit: function(component, event, helper){
// how can i get the oppId value from Form component
       var message = event.getParam("oppId"); 
        component.set("v.oppId", message);
},


Thanks,
Maharajan.C
 
This was selected as the best answer
nagendra kumar 21nagendra kumar 21
Hi Maharajan, would able to check this questions and give response please 
https://developer.salesforce.com/forums/ForumsMain?id=9062I000000INdeQAG
Deepali KulshresthaDeepali Kulshrestha
Hi Rakesh,

The communication between components is handled by events. There are two types of custom events in the Lightning Framework:

Component Events
Application Events

Component events are handled by the component itself or a component that instantiates or contains the component.
Application events are handled by all components that are listening to the event. These events are essentially a traditional publish-subscribe model.

I suggest to visit this link, there is a good description of how to use the event in component for passing attribute values

https://www.biswajeetsamal.com/blog/component-events-in-salesforce-lightning-framework/

Thanks and Regards,

Deepali Kulshrestha.
Rakesh ImsaniRakesh Imsani
HI Thanks Everyone,

@Maharajan, i have tried this also but unfortunately it does not suits for my requirement. finally i have achived with standard salesforce action $A.get('e.lightning:openFiles');.