1

I have two components and I am looking to pass an attribute from one component to the other.

I followed this link about passing a attribute but for some reason I can not get the value to be defined as what I set it as in Component 1's Controller.

Component 1

Component

<aura:attribute name="object" type="String" default="Offers__c" access="public"></aura:attribute>
<aura:attribute name="lookupField" type="String" default="Opportunity__c" access="public"></aura:attribute>
<aura:attribute name="selectedRecordId" type="String" access="public"></aura:attribute>
<aura:attribute name="pHold" type="String" access="public"></aura:attribute>
<c:flowFooter childAttribute="{!v.pHold}"/>

<lightning:recordEditForm objectApiName="{! v.object }">
    <lightning:inputField fieldName="{! v.lookupField }" aura:id="field" onchange="{! c.handleOnChange }"/>
</lightning:recordEditForm>

Controller

({
    handleOnChange : function(component, event, helper) {
        component.set( "v.selectedRecordId", event.getParams( "fields" ).value );
        var ally = component.find("field").get("v.value");
        component.set("v.pHold",ally);    
    }
})

pHold attribute is set with a value. The issue comes when I try to pass it to the second component. For some reason it is not defined and the value I set in Component 1 does not get passed

Component 2

Component

<aura:component access="global" implements="lightning:availableForFlowScreens">
<!-- Determine which actions are available -->
<aura:attribute name="canPause" type="Boolean" />
<aura:attribute name="canBack" type="Boolean" />
<aura:attribute name="canNext" type="Boolean" />
<aura:attribute name="canFinish" type="Boolean" />
<aura:attribute name="childAttribute" type="String" access="public" />
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<div aura:id="actionButtonBar" class="slds-clearfix slds-p-top_medium">
  <!-- If Previous is available, display to the left -->
  <div class="slds-float_left">
     <aura:if isTrue="{!v.canBack}">
        <lightning:button aura:id="BACK" label="Previous"
           variant="neutral" onclick="{!c.onButtonPressed}" />
     </aura:if>
  </div>
  <div class="slds-float_right">
     <!-- If Pause, Next, or Finish are available, display to the right -->
     <aura:if isTrue="{!v.canPause}">
        <lightning:button aura:id="PAUSE" label="Pause"
           variant="neutral" onclick="{!c.onButtonPressed}" />
     </aura:if>
     <aura:if isTrue="{!v.canNext}">
        <lightning:button aura:id="NEXT" label="Next" 
           variant="brand" onclick="{!c.onButtonPressed}" />
     </aura:if>
     <aura:if isTrue="{!v.canFinish}">
        <lightning:button aura:id="FINISH" label="Done"
           variant="brand" onclick="{!c.onButtonPressed}" />
     </aura:if>
   </div>
</div>
</aura:component>

Controller

({
init : function(cmp, event, helper) {
  // Figure out which buttons to display
  var availableActions = cmp.get('v.availableActions');
  for (var i = 0; i < availableActions.length; i++) {
     if (availableActions[i] == "PAUSE") {
        cmp.set("v.canPause", true);
     } else if (availableActions[i] == "BACK") {
        cmp.set("v.canBack", true);
     } else if (availableActions[i] == "NEXT") {
        cmp.set("v.canNext", true);
     } else if (availableActions[i] == "FINISH") {
        cmp.set("v.canFinish", true);
     }
  }
},

onButtonPressed: function(cmp, event, helper) {
   var label = cmp.get("v.childAttribute");

   var isDefined = !$A.util.isUndefined(cmp.get("v.childAttribute"));
   console.log(isDefined);



     if (label) {
         // Figure out which action was called
         var actionClicked = event.getSource().getLocalId();
         // Fire that action
         var navigate = cmp.get('v.navigateFlow');
         navigate(actionClicked);
     } else {
         alert('Last One 40');
     }
 }
 })

enter image description here

  • What does console.log(label) in onButtonPressed print? – Jayant Das Feb 12 at 0:43
  • Undefined and var isDefined prints false – Bobbygllh Feb 12 at 1:06
  • My earlier attempt to reproduce the issue was incorrect, I was using an app and a component to pass the values and thus had ended up requiring a change handler. When I tried reproducing this issue with the exact code as you have in here (except for few attributes related to the object and lookup field), it works fine. Even without a change handler, the values are passed from component 1 to component 2. I had forcefully rendered the buttons in component 2 to test this out and could see the values onButtonPressed function in component 2. – Jayant Das Feb 12 at 4:35
  • @JayantDas Interesting, this is driving me nuts. I really do appreciate the help. Added a screenshot showing the console.logs in which pHold is defined in Component 1 but undefined in Component 2. Is there anything that needs to be done to set up a Parent / child component relationship other than the code i have? Either way i'm going to continue to pare down the code to see if if i can make this work at all – Bobbygllh Feb 12 at 13:52
  • Can you confirm, how is the component 2 being invoked? Is it from a flow? In my attempt to reproduce, I had included component 1 on home page and then had surfaced one of the buttons on component 2 and on click of that could see the values. As for parent child relationship, what you have is absolutely correct. – Jayant Das Feb 12 at 13:55

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.