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 agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.