Component Helper Async Issue?

Question

I have a component that is using aura:iteration to loop through some data and output a table of results. One column in this table is a link to the record. I created a clickevent handler and a helper to generate this navigation link for me.

Component:

<lightning:navigation aura:id="navService"/>
<a data-id="{!v.rec.CreatedById__r.Id}" onclick="{!c.handleRecordClick}">Link</a>

Controller:

({
  handleRecordClick: function(component, event, helper) {
    var currentRecordId = event.currentTarget.dataset.id;
    var url = helper.createRecordUrl(
      component,
      currentRecordId,
      "EntUser__x",
      "view"
    );
    console.log(url); // undefined
  }
});

Helper:

({
  createRecordUrl: function(component, clickedRecordId, objectApiName, action) {
    var navService = component.find("navService");

    var pageReference = {
      type: "standard__recordPage",
      attributes: {
        recordId: clickedRecordId,
        objectApiName: objectApiName,
        actionName: action
      }
    };
    // Set the URL on the link or use the default if there's an error
    var defaultUrl = "#";
    navService.generateUrl(pageReference).then(
      $A.getCallback(function(url) {
        console.log(url); // /r/EntUser__x/x000x00000BSaH7AAL/view
        return url ? url : defaultUrl;
      }),
      $A.getCallback(function(error) {
        return defaultUrl;
      })
    );
  }
});

My controller is getting undefined when I try and return the generated URL. If I try and console.log() within the getCallback in the helper, the URl is generated fine.

I am thinking this could be an issue with timing where my controller is requesting the URL before the helper callback has completed?

How should I approach the controller to wait for this returned value and prevent this issue?

I think to solve this issue , you can return promise from your helper instead of returning the url and then handle it in controller. This would ensure that your promise is resolved in controller and you would get its value there itself. — Rohit
– Rohit, Commented Dec 2, 2019 at 3:29

Kiran Machhewar · Accepted Answer · 2019-12-02 05:21:25Z

In this code if you see the function generateUrl gives you callback that means results are not immediately available. So createRecordUrl is running without any callbacks and its return value is undefined and then after a moment callbacks are firing that is the reason your console log shows values but console log of return shows undefined.

Here there are 2 approaches you can follow:

Approach 1: You can create a callback function and pass it to helper and helper would call once the results are available.

Approach 2: You can use the promise as suggested by @Rohit. Here is code snippet to help you get started with promise and use it in lightning.

Sample Controller code:

({
    doInit : function(component, event, helper) {
        let resultAfter3SecondsPromise = helper.getMeParamter(component,event,helper,'Custom Param');
        resultAfter3SecondsPromise.then(result=>{
            console.log('Result from resultAfter3SecondsPromise-->'+result);
        }); 
    }  
})

Sample Helper code:

    getMeParamter : function(component,event,helper,paramter) {
            return new Promise((resolve,reject)=>{
                if(true){//forcefully passing it
                    setTimeout(function(){ resolve('Data After 3 seconds-->'+paramter)}, 3000);
                }else{
                    reject(new Error('Test Error'));           
                }                        
            });     
        }  
    })

Hope this helps.

Stack Exchange Network

Component Helper Async Issue?

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Component Helper Async Issue?

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions