[SalesForce] Lightning Components – Are passed in attributes available to the init method

All,

This may be a basic question, but I've Googled around it and haven't found an explicit piece of documentation to back it up.

I have a Lightning component with a required attribute which is a list of Custom Object

<aura:attribute name="example" type="Custom_Object__c[]" required="true" default="[]"/>

This component has an init handler which takes the list of Custom objects and effectively turns them into a wrapper class (so I can add a tickbox to each record in the list).

I use this Component [CHILD] in the body of another component [PARENT] (and that component passes in the list of SObjects)

Weirdly, the init on the CHILD component doesn't seem to know about the passed in list of SObjects. It thinks it has an empty list, so it has nothing to iterate through. This surprised me as I had assumed that all of the passed in attributes would be available to the init method.

Is there documentation anywhere which explains the order in which the init handler and the passed in attributes, etc are initialised/kicked-off?

With thanks,
Andy

Best Answer

init event of the child component will called long before the parent's. Add aura:doneRendering event in the child component and access the list in in the child. Order in which init fired is mentioned in the developer guide and in this article too.

When the component tree is ready, the init event is fired for all the components, starting from the children component and finishing in the parent component.

Beware aura:doneRendering will be called multiple times as part of the component lifecycle, when the aura:attributes are dirty. So have a aura:attribute which serves as a flag to help, you decide whether to process the logic.

Related Solutions

[SalesForce] Lightning Components – SObject attribute change event only sent to descendants

Thanks Bob.

I can confirm the issue you are reporting: change handlers are not fired up the chain when members of attribute type "object" are modified. Here is a workaround:

Change:

component.set('v.acc.Name', 'Name from 3!');

To:

var acc = component.get('v.acc');
acc.Name = 'Name from 3!';
component.set('v.acc', acc);

And everything will work.

Here is why you are seeing this behavior, and why the workaround is working:

The rule to remember: all changes are propagated down, but only propagated up when they affect the root of the attribute.
About the workaround: because component.get('v.acc') is returning a pointer to the object (this is JavaScript after all), we are not not copying the data, and it is not less efficient than calling component.get('v.acc.Name'). Sure it is more verbose, but not less efficient!

[SalesForce] Lightning – Rerender child components in aura:iterable after parent attribute changed

I actually found a solution (or a workaround - still don't know). I will put it here in case somebody will come across same issue.

I had to dynamically recreate child component - therefore I used ChildComponentWrapper:

How it looks right now:

ParentComponent

<aura:component controller="PrdConfigCls">
  <aura:attribute name="paramProductId" type="String"/>
  <aura:attribute name="product" type="PrdConfigCls.Product"/>
  <aura:attribute name="attributes" type="PrdConfigCls.Attribute[]"/>
  <aura:handler name="change" value="{!v.paramProductId}" action="{!c.paramProductIdChangeEventHandler}"/>

 <div aura:id="container">     
 // in this place ChildComponentWrapper will instantiate after change event (helper)
 </div>

</aura:component>

ParentComponentHelper

({
    loadProductConfiguration : function(component) {

        var action = component.get("c.getProjectProductDefinition");
        action.setParams({  "projectProductId": component.get("v.paramProductId") });
        var self = this;

        action.setCallback(this, function(a) {

            var productResp = a.getReturnValue();
            var product = JSON.parse(productResp);
            component.set("v.product", product);
            component.set("v.attributes", product.attributes);

            //console.log(component.get("v.attributes"));

            var container = component.find("container");
            $A.createComponent("c:ChildComponentWrapper",
                           {attributeParam: product.attributes},
                           function(cmp) {
                               container.set("v.body", [cmp]);
                           });

        });
        $A.enqueueAction(action);

    }
})

ChildComponentWrapper

<aura:component controller="PrdConfigCls">
  <aura:attribute name="attributeParam" type="PrdConfigCls.Attribute[]"/>

  <aura:iteration items="{!v.attributes}" var="attr">
     <c:ChildComponent attributeParam="{!attr}"/>
  </aura:iteration>
</aura:component/>

Best Answer

Related Solutions

[SalesForce] Lightning Components – SObject attribute change event only sent to descendants

[SalesForce] Lightning – Rerender child components in aura:iterable after parent attribute changed

Related Topic