Hot answers tagged

17

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.


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:...


8

Regardless of performance, you should use component.find. Document query selectors aren't recommended in lightning, whereas component.find has explicit support: Valid DOM Access The following methods are valid DOM access because the elements are created by c:domLocker. cmp.getElements() Returns the elements in the DOM rendered by the component....


8

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 ...


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


7

get is faster than find and then get, simply because the latter requires calling two methods while the former only requires one method. In addition, find may return either no values (null), one value (a SecureComponent), or multiple values (an Array), so you might need to introduce additional logic depending on your component's design, while get will always ...


6

In order to bind to something dynamically, you need a reference. Here is a very basic, no-frills, slightly buggy implementation that demonstrates that this basically works. Notice how I use component.getReference to dynamically link to a field. Also notice how I can bind to the same field twice, which literally lets me modify the same field more than once ...


6

To get the value selected you need to target the lightning:select and get his value, because if you target the options they will all have the same aura:id as it does not support expressions (so there's no way to create dynamic ones).


5

aura:id can't be populated dynamically: aura:id doesn't support expressions. You can only assign literal string values to aura:id. Instead, give all of your <lightning:inputField> components a common aura:id so that you can find them, and then filter by the fieldName attribute: <aura:iteration items="{!v.fields}" var="f" > <lightning:...


4

as @techbusinessman stated, the only workaround (so far) to get the value from a dynamically created component is to 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[]" posting it again so that it would help ...


4

The equivalent of using aura:id and component.find() in LWC is to use a standard DOM query selector like this: const element = this.template.querySelector('selector'); element.doSomething(); We do have a restrictions to that standard behavior: you cannot use the id attribute as a selector as these are autogenerated by the framework. You are free to use any ...


4

Presuming that you're dynamically creating components (e.g. c1 and c2), you have total control over the aura:id. A component cannot define its own aura:id, only the aura:id for children within itself. From here, it follows that you're trying to figure out what type of component you're dealing with. For that, we use Component#getType. This tells you exactly ...


4

I have found the LWC docs to offload some of this to the MDN docs, so bringing this one layer higher (in the actual LWC docs would be nice) would have made it easier for us. In scenarios where there are two components of the same type on your template, the equivalent to aura:id is to use a data-id tag and select it like this: this.template.querySelector('[...


3

First of all, you can use slds-hide, the SLDS built-in for hiding an element: $A.util.addClass(component.find("toggle1"), "slds-hide"); Second, you could have simply wrapped everything in a single top-level div: <div aura:id="toggleArea"> <div class="chat-text" aura:id="toggle1"> <p>hi</p> </div> <div ...


3

You can specify aura:id in the createComponent call: $A.createComponent( "c:RPGFlowComponent", { "aura:id": "somevalue", // You can set whatever you like here flow: { Id: flowId } }, helper.setUpperRightComponent(component) ); In theory, you could probably set aura:id in the callback, but I wouldn't ...


3

When you're using normal HTML, you have a lot of flexibility in what you do with this. One solution not involving the use of id is to set a data attribute on the span: <aura:component> <aura:attribute name="numberList" type="Object[]" access="private"/> <aura:iteration items="{!v.numberList}" var="obj"> <span data-num="{!...


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, ...


3

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


3

Here's an alternative workaround which seems much neater to me (set as an answer because it gives space for the code)... First declare an attribute to store dictionary object of aura:id to component: <aura:attribute name="dynamicComponentsByAuraId" type="Object" /> Then, populate that object in the callback when you create your components: $A....


2

The id will let you get a reference to a specific DOM element. aura:id will let you get a reference to a Component via component.find("yourAuraId"). Once you have a reference to the Aura component, you can call .getElement() or .getElements() to get the DOM that that component will render. It's probably better to go through the framework APIs and use aura:...


2

Lightning aura:id attribute will not allow any dynamic/run time evaluated values, it just allows literal string. Alternate to this is include standard id attribute of html and access these in controller.js as below. var selectedItem = event.currentTarget; var dynamicallyGenId = electedItem.id;


2

As far as I could understand, you are trying to open the SubItems view when button is clicked. To do this, you don't need to access the regular id of the button. Each instance of the component(i.ec:Item) generated by aura:iteration, has its own space(i.e encapsulation) where it can access the DOM within its view. All you have to do is, add aura:id to the ...


2

As @Nordine Hammache said you need to to target the lightning:select. As per your code for getting value ,You need to create sub component. I have worked out similar example Component parent: <lightning:layout horizontalAlign="space"> <lightning:layoutItem flexibility="auto" padding="around-small" size="6"> <div ...


2

According to the Release Notes this will be fixed with Spring'18 in Jan/Feb 18. Find Dynamically Created Components You can now use cmp.find() to find a component that you create dynamically with $A.createComponent(). In prior releases, a bug prevented cmp.find(), the standard method for finding a component, from working with dynamically ...


2

I don't think this is appropriate way to do so in lightning. One way to do say by firing a event from inner component whenever the value changes in inner component. You can fire event with both value and index and store that information in outer component. Another way to do so is by using double binding principle of lightning. <aura:if isTrue="{!v....


2

Use aura:id, instead: <div aura:id="option" data-index="{!i}" data-id="{!item.Id}" onclick="{!c.jsFunction}"><text-under-div></div> var options = component.find("option"); options = options? []: options.length? options: [options]; ...


2

According to this documentation (page 110) this syntax should work: var checkboxes = component.find({ instancesOf : "ui:inputCheckbox" });


2

when you use component.find from Aura:iteration it gives array of components if that aura:iteration had more than one items, so you 'll to get list of distance values if aura:iteration had more than one item. you need to change the code to get list of distance values. try below code let me know if you get any issue. helper.js var lstdistanceval= [].concat(...


2

From documentation, If the local ID is unique, find() returns the component If there are multiple components with the same local ID, find() returns an array of the components If there is no matching local ID, find() returns undefined So, you should first check if its array, and if its array you can get length or else you can ...


1

Use {!globalId} instead of {!v.globalId}. Component: <aura:iteration items="{!v.List}" var="item" indexVar="i"> <div id="{!globalId + '_option'}" data-index="{!i}" data-id=" {!item.Id}" onclick="{!c.jsFunction}"><text-under-div></div </aura:iteration> Controller: var globalId = component.getGlobalId(); var divId ...


Only top voted, non community-wiki answers of a minimum length are eligible