[SalesForce] Is a synchronous method call possible in Lightning Components

A Lightning Component – lets call it component B – can define a method (that can have arguments) like this:

<aura:method name="doAbc" action="{!c.doAbc}"/>

that can be called from another component – lets call it component A – quite simply in the controller or helper JavaScript:

cmpB.doAbc();

But this is implemented inside the framework via an event:

var eventDef = $A.$eventService$.$getEventDef$("aura:methodCall");

and so is asynchronous. The JavaScript code immediately after the call can't rely on the side effects of the call and also there is no way such a method call can have a return value.

Is there a simple pattern that can be used to achieve (or simulate) a synchronous call between two components?

Best Answer

I believe those calls are synchronous. I have code like this:

var resultOfB;
cmpB.doAbc( param1, function(returnVal){ 
    resultOfB = returnVal; 
} );

if(resultOfB){ ...}

Your method def:

<aura:method name="doABC" action="{!c.doNext}" 
  description=""> 
    <aura:attribute name="param" type="Object" /> 
    <aura:attribute name="callback" type="Object" /> 
</aura:method>

Related Solutions

[SalesForce] Is it possible to call component method instantiated by $A.getComponent()

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.

[SalesForce] Calling aura:method and return value

Methods in Lightning components do not return a value, also came to the same outcome as yourself.

However, I did learn to use and love component events with dynamic event handlers. What you can do from the calling component is fire a component event from within the component you wish to call the method on currently and attach a dynamic event handler for the component finishes processing.

So for example, you can fire an event from where you want to fire the method now like so:

otherComponent.getEvent('provide').fire();

Then also attach a dynamic event handler to listen for a response:

otherComponent.addHandler('responseEvent', component, 'c.handlingControllerAction');

The approach has the benefit of decoupling your components and if you need your other component to do asynchronous work then you can as also the response event would be fired asynchronously. It also allows multiple components to listen out for this event and also react accordingly.

Find more information on the Salesforce help:

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

Hope this helps!

Best Answer

Related Solutions

[SalesForce] Is it possible to call component method instantiated by $A.getComponent()

[SalesForce] Calling aura:method and return value

Related Topic