[SalesForce] Dynamically created component with aura:id, set as a Facet inside a parent component, is not found when calling find() and passing in aura:id

I would have expected that when a dynamically created lightning component is assigned as another component's attribute of type Aura.Component[], also referencing it in the parent component's markup by including something like {!v.attributeName}, then the parent component's JavaScript would be able to find that Facet by calling component.find() and passing in the aura:id value of the dynamically created component.

I have attempted this, but the result of the find() call is undefined. Code samples are below.

The parent component with the "stepData" facet… (created to test the stepData component during the development process)

<aura:component >
<aura:attribute name="stepData" type="Aura.Component[]"/>

<aura:handler name="completedActionFired" event="c:actionComplete" action="{!c.captureDataResult}" />
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

{!v.stepData}

<!-- Include the SLDS static resource (adjust to match package version) -->
<ltng:require styles="{!$Resource.SLDS202 + '/assets/styles/salesforce-lightning-design-system.css'}"/>

<lightning:layout horizontalAlign="space">
    <lightning:layoutItem flexibility="grow" padding="horizontal-medium">
        <lightning:button variant="brand" label="Get Object Data" onclick="{! c.getObjectData }" />
        <br/><br/>
        <lightning:button variant="brand" label="Find Component and Get Object Data" onclick="{! c.findObjectData }" />
        <br/><br/>
    </lightning:layoutItem>
</lightning:layout>
</aura:component>

The parent component controller, where findObjectData() cannot find the Facet component by its aura:id, but getObjectData() can get it by using the attribute name…

({
doInit : function(component, event, helper) {
    var dataMap = {
        "testString" : "test value",
        "testMap" : {"key1":"value1", "key2":"value2"}
    };

    var attributes = {
        "aura:id" : "stepData",
        "dataMap": dataMap
    };

    $A.createComponents(
        [[ "c:stepData", attributes ]],
        function(results) {
            component.set("v.stepData", results[0]);
        }
    );
},
findObjectData : function(component, event, helper) {
    // try finding component by aura:id
    var stepData = component.find("stepData");
    if(stepData == null) {
        console.log('stepData is not found');
        return;
    }

    // try calling aura:method on stepData
    var result = stepData.getObject("testString");
    console.log(result);
},
getObjectData : function(component, event, helper) {
    // get stepData by accessing attribute
    var stepData = component.get("v.stepData")[0];
    console.log(JSON.stringify(stepData.get("v.dataMap")));

    // able to get dataMap attribute from stepData component
    var dataMap = stepData.get("v.dataMap");
    console.log(dataMap.testString);

    // able to call aura:method, but does not return any value to caller
    var result = stepData.getObject("testString");
    console.log(result);
}
})

Lightning Component Tree shows the aura:id included on the stepData component reference…

console log shows the "get" button clicked, then the "find" button clicked, where "stepData is not found" indicates find() and aura:id did not successfully locate the dynamically created Facet component.

Best Answer

This is a bug inside the framework where dynamically created components are not getting properly indexed to their parents. Doesn't look like anyone is actively working on it right now. If you'd like to put some pressure on the devs who own this you can file a case and tell them to link the case to internal bug W-2529066.

Related Solutions

[SalesForce] component.get(v.body) not working as expected

@Praveen, yes, this is totally normal. Here is what is happening:

When we say that the body attribute is defined on all components we mean that it's defined on the base <aura:component/> from which all components inherit. Here is a simplified version.

<aura:component/>
   <aura:attribute name="body" type="Aura.Component[]"/>
   {!v.body}
</aura:component>

As you can see, the base component outputs the body tag that it receives in its own body, otherwise, nothing would be rendered. Angular calls that process "transclusion", the inclusion of content from another context.

When you write this:

<aura:component>
    <div>Body part</div>
    <ui:button label="Push Me" press="{!c.printCmpBody}"/>
</aura:component>

You are setting the body tag of the parent component. Everything defined in your component is the "lexical definition", and it's passed to its parent. If you want to read it, you could use cmp.getSuper().get("v.body") but it's a deprecated API, and it will probably not work. However, that's the idea behind it.

Why is it working like this? Let's call your component c:myComponent and use it inside an app:

<c:myComponent>
   <i>Instance Part</i>
</c:myComponent>

This is equivalent to this format:

<c:myComponent>
    <aura:set attribute="body>
       <i>Hello</i>
    </aura:set>
<c:myComponent>

As you see, every component needs to receive an attribute body independently of what it defines internally. You can try this format, it does work, but it's unnecessary except to illustrate how to set the body of a component.

Now, your component can ignore its body attribute as in your original code, or it can use it like this:

<aura:component>
    <div>Body part</div>
    {!v.body}
    <ui:button label="Push Me" press="{!c.printCmpBody}"/>
</aura:component>

You can place the expression {!v.body} anywhere you want.

The rendered content will then be equal to the instance's v.body plus the component-defined lexical definition:

v.body = <i>Instance Part</i>
+
lexical scope = <div>Body part</div>{!v.body}...
=
Rendered: <div>Body part</div><i>Instance Part</i>...

You can get more information on how the attribute body works by looking at slides 24, 25, and 27:

Mastering the Lightning Framework - Part 1

And the explications are at around 15:00 minute here:

Mastering the Lightning Framework - Part 1

[SalesForce] Problems “find”ing a dynamically created child component

To attach the component(child) under a component(parent), you are doing following:

1.Create the component using $A.createComponent

2.Finding the parent component to attach the dynamic child using component.find(parentId) which returns the component instance(Aura.Component)

3.Then getting the body of the above, then adding dynamic child to the body and setting the body.

So, child component(dynamic) needs to be inside the body of the parent component to be rendered in the view.

Also remember, you are attaching the dynamically created component to the body of the <div aura:id="divDynamicChild"></div> not to the actualy body of the component <c:testFindDynamic_Parent>.

So, you need to go deeper to get the actual instance of the dynamic child components that was created.

What you need to do is:

1.First, find the parent component instance using component.find("parentId").

2.Get the parent cmp body because that's where the child cmp resides using parentCmp.get("v.body").

2.Since the child component resides in the 0th index of the parent component's body attribute. You need to do this: parentBody[0].find("dynChildId").

var parentCmp = component.find("parentId");
var parentBody = parentCmp.get("v.body");
var childcmp = parentBody[0].find("dynChildId"); // returns the child component instance.

Now, your method buttonCallDynamicChildMethodPressed method will look like this:

buttonCallDynamicChildMethodPressed : function(component, event, helper) {
    console.log("DEBUG: (testFindDynamic_ParentController.buttonCallDynamicChildMethodPressed) Called.");

    if (component.get("v.dynamicChildCreated") == true) {
        console.log("DEBUG: (testFindDynamic_ParentController.buttonCallDynamicChildMethodPressed) ===== Try to find dynamic child inside the parent =====");
        var divDynamicChild = component.find("divDynamicChild");
        var divDynamicChildBody = divDynamicChild.get("v.body");
        var dynamicChild = divDynamicChildBody[0].find("dynamicChild");
        console.log("DEBUG: (testFindDynamic_ParentController.buttonCallDynamicChildMethodPressed) dynamicChild = " + dynamicChild);

        console.log("DEBUG: (testFindDynamic_ParentController.buttonCallDynamicChildMethodPressed) ===== Try to find dynamic child inside dynamic div =====");
        console.log("DEBUG: (testFindDynamic_ParentController.buttonCallDynamicChildMethodPressed) divDynamicChild = " + divDynamicChild);
        console.log("DEBUG: (testFindDynamic_ParentController.buttonCallDynamicChildMethodPressed) dynamicChild = "    + dynamicChild);
    }
},

Here's an sample app:

child.cmp

<aura:component access="global">
    <aura:attribute name="message" type="String"/>
    <div>{!v.message}</div>
</aura:component>

parent.app

<aura:application >
    <aura:dependency resource="markup://c:child" />

            <ui:button label="greetings" 
                       class="slds-button slds-button--neutral"
                       labelClass="label"
                       press="{!c.greetings}"/>


    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <p>Dynamically created button</p>
    <div aura:id="test"></div>
</aura:application>

parentcontroller.js

({

    doInit : function(cmp) {
        $A.createComponent(
            "c:child",
            {
                "aura:id":"test1",
                "message":"Good morning"
            },
            function(newChild){
                if (cmp.isValid()) {
                    var parent = cmp.find("test");
                    var body = parent.get("v.body");
                    body.push(newChild);
                    parent.set("v.body", body);
                }
            }
        );

        $A.createComponent(
            "c:child",
            {
                "aura:id":"test2",
                "message":"Have a nice day"
            },
            function(newChild){
                if (cmp.isValid()) {
                    var parent = cmp.find("test");
                    var body = parent.get("v.body");
                    body.push(newChild);
                    parent.set("v.body", body);
                }
            }
        );
    },

    greetings : function(cmp) {
        var d = cmp.find("test").get("v.body");
        console.log("child 1",d[0].find("test1").get("v.message"));
        console.log("child 2",d[1].find("test2").get("v.message"));
    }

})

Best Answer

Related Solutions

[SalesForce] component.get(v.body) not working as expected

[SalesForce] Problems “find”ing a dynamically created child component

Related Topic