1

I have a table with dynamic number of rows. But all of the has the same structure: summary row and details row. The details row implemented as separated lightning component. Also I have a "+" sign on the summary row that should expand details row and call a method of child component.

Currently I'm seeking for required details component by looping the array of details components returned by component.find('') method. But I assume it's not very efficient. I've checked the developer guide and found out that I can get a component by it's global id Finding component by Id
But when I try to call a method of that component I get an error (something like "there is no such method").

So do I need to do something more to convert aura$html to actual component or it's not possible at all?

Is it a bad practise to instantiate child components in the <aura:iteration> tag and it's better to create them dynamically using JS?

4
  • 2
    How do you know your component's global Id? This is generated at run time. I think the global Id you're passing to getComponent is not the correct one. All of the HTML that you see that has the property "data-aura-rendered-by" is actually from the aura:html component, which is not the component I think you want. You're not going to see your component's global Id in the DOM anywhere. To get the correct global Id, you'd need to call component.getGlobalId(); when your component is created. – frontendloader Feb 22 '16 at 20:25
  • Agreed, how are you retrieving the component using getComponent? If you do $A.getComponent(id) + ""; Does it show you the component you expected? – Kris Gray Feb 22 '16 at 22:10
  • @frontendloader, I use id from "data-aura-rendered-by" attribute. As mentioned in the Developer Guide in this example: developer.salesforce.com/docs/atlas.en-us.200.0.lightning.meta/… – steals Feb 22 '16 at 23:06
  • 1
    That is not going to link to your component, that will link to the Html Component. Is there a reason you don't already have a reference to the component since you created it via $A.createComponent() ? – Kris Gray Feb 25 '16 at 1:20
2

I'm working on this right now. It appears that aura:id can't take variables, so calling <c:MyComp aura:id="{!index}-childComp" /> will fail.

Instead I'm doing:

<aura:iteration items="{!v.insights}" var="insight" indexVar="indx">
   <c:MInsightCell aura:id="minsight-cell" insight="{!insight}" index="{!indx}" maxCount="{!v.insights.length}"/>
</aura:iteration>

(where index is an attribute on my child component).

To then access the component I do:

var next_index = swiper.activeIndex + 1;
var next_id = next_index+'-minsight-cell';
debugger;
var slides = component.find("minsight-cell");
var next_slide = slides[next_index];
next_slide.preload(next_id);

(I'm using the Swiper library which keeps of track of which index it's on...)

Moral: aura:id is limited, but required if you want to use methods on components.

1

Do you have an <aura:method/> in your component markup? You'll need to expose the method using this tag in order to call it.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cmp_methods.htm

Creating child components inside of <aura:iteration/> is fine. If you're going to modify any values in the collection that created those components you'll want to do it from the component that contains the collection. Don't allow the child components to modify themselves.

3
  • 1
    Yes, I have <aura:method> in the markup and I can successfully call it when I find component using component.find() method in controller. But I can't call the same method if I get component by $A.getComponent() method. – steals Feb 19 '16 at 8:52
  • @steals have you ever solved this? – zaitsman Nov 25 '19 at 5:45
  • yes, check the answer bellow it describes the approach – steals Nov 25 '19 at 19:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.