8

Below is my code to create the component dynamically - The component is "ui:inputselect"

$A.createComponent(
            RecoveryLineItem.Attributes[i].name,{
                "class" : "slds-input ",
                "aura:id" : 'ExampleId',
                "label" : RecoveryLineItem.Attributes[i].label,
                "multiple" : RecoveryLineItem.Attributes[i].multiple
            }, ....

..

console.log(component.find('ExampleId').get("v.value")) 

Or console.log(component.find('ExampleId')) is Giving as 'Undefined"

How to access the aura:id of the dynamically created components?

2
  • can you please provide more code, i think you are missing ui:inputselect in your code.
    – Raj_SFDC
    Commented Oct 5, 2016 at 7:10
  • Have you figure out the solutions? I tried Junaid's but it doesn't work for me. Cheers
    – user682217
    Commented Nov 12, 2016 at 22:35

5 Answers 5

9

Sorry can't comment yet.

But i have the same problem when using cmp.find() to get a dynamically created component the return value is always undefined.

I even tried it with the code provided in the documentation(https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_dynamic_cmp_async.htm).

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

    <p aura:id="test">Dynamically created button</p>
    {!v.body}
</aura:component>


/*createComponentController.js*/
({
    doInit : function(cmp) {
        $A.createComponent(
            "ui:button",
            {
                "aura:id": "findableAuraId",
                "label": "Press Me",
                "press": cmp.getReference("c.handlePress")
            },
            function(newButton, status, errorMessage){
                //Add the new button to the body array
                if (status === "SUCCESS") {
                    var body = cmp.get("v.body");
                    body.push(newButton);
                    cmp.set("v.body", body);
                }
                else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.")
                    // Show offline error
                }
                else if (status === "ERROR") {
                    console.log("Error: " + errorMessage);
                    // Show error message
                }
            }
        );
    },

    handlePress : function(cmp) {
        console.log("button pressed");
        console.log(cmp.find("findableAuraId"));
    }
})

The first console log works, the second one returns 'undefined'

A possible workaround : cmp.find({ instancesOf : "auradocs:sampleComponent" }) which returns an array of all "auradocs:sampleComponent"

handlePress : function(cmp) {
    var button = cmp.find({ instancesOf : "ui:button" })[0];
    button.set("v.label", "test");
}
2
  • 2
    I just tried that myself and can confirm cmp.find(”findableAuraId”) returns undefined on dynamically created cmp. cmp.find('myId') works without problems on a generically created component. Commented Nov 23, 2016 at 15:40
  • Just tried this, and the second log returned the component.
    – Kris Gray
    Commented Dec 11, 2017 at 5:27
7

I believe this issue is related to 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

Have a look at the answer from Trevor Bliss

1
  • 1
    Currently the answer provided in the above post is the easiest workaround - component.get("v.*attributeName*").get("v.value"); Commented Mar 16, 2017 at 15:34
3

YOu have to specify the type of component as "ui:inputselect"

$A.createComponent(
        "ui:inputselect",
        {
            "class" : "slds-input ",
            "aura:id" : 'ExampleId',
            "label" : RecoveryLineItem.Attributes[i].label,
            "multiple" : RecoveryLineItem.Attributes[i].multiple
        },
        function(status, errorMessage){
            //Add the new button to the body array
            if (status === "SUCCESS") {
                //some code.
            }
            else if (status === "INCOMPLETE") {
               //some code.
            }
            else if (status === "ERROR") {
                //some code.
            }
        }
 );
3

This Bug has been resolved with Spring 18 release: Release Notes

-1

Posting it again as the issue still persists..

To get the value from a dynamically created component, use :

var value = component.get("v.*attributeName*").get("v.value");// for type="Aura.Component"

OR

var value = component.get("v.*attributeName*")[0].get("v.value"); // for type="Aura.Component[]"

For more information, please do checkout this link

The above answer is based on one of techbisinessman's answers.All credits go to him.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .