Convert custom JavaScript button in lightning

Question

I need to convert my javascript button to lightning. What I did is, I go to the classic environment, go to setup and I click on get started for 'Lightning Experience Transition Assistant'. After a few steps, they automatically convert my button(partially). Since it's only a partial convert, so I need to continue by myself, but I got an error when I click to yes button.

This is the error.

Uncaught Action failed: c:LCC_App_rej_Return_Shipment_c$controller$afterQuery [Cannot read property 'Id' of undefined]

But, for example when I click on a button, then the dialog box(as attachment) will come out, if I wait like 3 second before click the 'Yes' button it will not show any error. If I immediately click the yes button, it will show the error.

Here is my code for Lightning Component Controller:

({
    apexQuery : function(component, event, helper) {
        var myQuery = 'SELECT Id FROM ProcessInstanceWorkitem WHERE processInstance.TargetObjectId=\''+component.get('v.sObjectInfo.Id')+'\'';
        helper.executeQuery(component, event, helper, myQuery);
    },
    
    afterQuery: function(component, event, helper) {
        //after code
        var approvals = component.get('v.queryResult');
        helper.gotoURL(component, '/p/process/ProcessInstanceWorkitemWizardStageManager?id=' + approvals[0].Id, '_self');
    }

})

Lightning Component code

<aura:component controller="LCC_App_rej_Return_shipment_cApex" extends="c:LCC_GenericLightningComponent" >
    <aura:set attribute="partially" value="false"></aura:set>
    <aura:attribute name="queryResult" type="SObject[]" />
    <aura:set attribute="isAdditionalObject" value="false"></aura:set>
    <aura:handler event="c:LCC_GenericApplicationEvent" action="{!c.apexQuery}"/>
   
    <div>
        <div class="slds-scrollable slds-p-around_medium slds-text-heading_small" id="modal-content-id-1">
            <p>Please confirm if this is FINAL APPROVAL?</p>
            <br/>
        </div>
        <footer class="slds-modal__footer">
            <lightning:button class="slds-button_brand" onclick="{!c.afterQuery}" label="Yes"/>
            <lightning:button class="slds-button_brand" onclick="{!c.afterQuery}" label="No"/>
        </footer>
    </div>
    
    
</aura:component>

Answer 1

What you need to do is make sure that you don't attempt to access the approvals list (queryResult) before you actually have it.

approvals[0].Id will cause an error, because there is no approvals[0] - so when you attempt to access the Id property of nothing, it causes an error.

You will always need to wait for the result, but while you are waiting, you should disable the buttons on the popup.

Do something like this:

<lightning:button class="slds-button_brand" variant="brand" 
      disabled="{! empty(v.queryResult)}"label="Yes" /> 

You could also put some loading... text in the label if you wanted, hiding it using the same technique.