How to use afterRender event when there is init method with call to Server Side?

Question

I am trying to get some data from Apex controller and then change the styling of icons once component is rendered.

Here is the sample code:

HelloWorldApp.app

<aura:application extends="force:slds" controller="HelloWorldApexController">
    <aura:attribute name="accList" type="Account[]"></aura:attribute>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <table aura:id="table-aura-id">
        <thead>
            <tr>
                <th>Col Label</th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.accList}" var="accVar">
                <tr>
                    <td>
                        <lightning:buttonIcon iconName="utility:comments"
                                              size="medium"
                                              name="secondIcon"
                                              aura:id="iconInsideTable"
                                              alternativeText="Hello"
                                              iconClass=""/>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:application>

HelloWorldAppController.js:

({
    doInit : function(component,event,helper){
        var action = component.get("c.getAccounts");
        action.setParams({
        });
        action.setCallback(this, function(actionResult) {
            console.log('Server call inside doInit finished');
            component.set("v.accList",actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

HelloWorldApp.css:

.THIS .bgred{
    background-color:rgb(0,191,255);
}

HelloWorldAppRenderer.js:

({
    afterRender: function(component,helper){
        this.superAfterRender();
        console.log('afterRender event handler is running now');
        var iconCmpList = component.find('iconInsideTable')
        iconCmpList.forEach((iconCmp) => {
            iconCmp.set("v.iconClass","bgred");
        });
    }
})

HelloWorldApexController.cls:

public class HelloWorldApexController {

    @AuraEnabled
    public static List<Account> getAccounts() {
        return [SELECT Id,Name FROM Account LIMIT 2];
    }    

}

This is the error I am getting:

afterRender event handler is running before the doInit method is finished and it is not finding elements. Here is the browser console log:

What do I do to fix this? I want to change css of the elements(conditionally in js due to complex calculations) once the dom is constructed.

Answer 1

It would be loads easier to write your iconClass as an expression.

If the logic is fairly simple, then you could just write something like this:

iconClass="{!(accVar.SomeField == 'something' ? 'bgred' : 'bggreen')}"

Then the framework will re-run that expression as required and you don't have to handle render at all.

If the logic is a bit more complicated, you can just add a property to the Account object after you get it back from Apex:

({
    doInit : function(component,event,helper){
        var action = component.get("c.getAccounts");
        action.setParams({
        });
        action.setCallback(this, function(actionResult) {
            console.log('Server call inside doInit finished');
            var accList = actionResult.getReturnValue();
            accList.forEach(function(thisAcc) {
              thisAcc.displayClass = /* whatever complex logic */;
            };
            component.set("v.accList",accList);
        });
        $A.enqueueAction(action);
    }
})

Then,

iconClass="{!accVar.displayClass}"

Answer 2

Obviously iconCmpList has no forEach function. Hence the error.

console.log( iconCmpList ) to verify.

Maybe component.find() just isn't matching the elements or it's a timing issue and the DOM is really not there at a certain moment in time. Both happened to me and I wasn't able to clearify it completely.

I had several issues using afterRerendet and component.find. My current workaround is using jquery instead of component.find (maybe not necessary) and additionaly I'm doing any DOM manipulation in the callback defined in action.setCallback

in the callback I put any DOM tweaks after the last component.set(). The rerendering of the component itself seams to happen synchronously. Caveat emptor: not sure, if this always true. One exception I'm aware of are subcomponents having callbacks on their own. but I doubt that any render function will give you a super late hook after the entire chain of subcompos has finished asynchroniosly their renderes with the last and slowest subcompo, though.

First a was afraid that the rendering might generally happen asynchroniosly. Also working with any render event or with a dedicated renderer sounded way more reasonable than tweaking the DOM in the callback.

But in the callback it works surprisingly well for me.

Using jquery to find elements i had another issue querying for the id attribute. It turned out that salesforce had redered a second invisible version of the dom. Therefore I always use the class attribute to identify my elements. That never faild me.

Answer 3

I started going through the documentation again and found this Handle the render Event

Added the below tag in the component

<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>

And added this function to the controller.js file:

onRender : function(component,event,helper){
        var iconCmpList = component.find('iconInsideTable')
            iconCmpList.forEach((iconCmp) => {
            iconCmp.set("v.iconClass","bgred");
        });
    }

Deleted the Rerender file completely.

With the above changes, it is working fine now.