Hide button afterRender based on callback result

Question

I'm trying to hide buttons depending on some information that the callback function on "INIT" should give as result.

I'm trying to do it into a custom render "afterRender" as described in salesforce documentation. But when the afterRender function execute the callback has not arrived yet from the server and Attribute value aren't changed yet!

Do you know the best way to add class to "lightning:button" (for example) based on callback results?

Answer 1

You don't need afterRender to hide lightning:button. You can have an attribute and set its value based on the data returned from the callback.

<aura:component>
    <aura:attribute name="buttonVisiblity" type="Map" default="{'btn1':'slds-show','btn2':'slds-show','btn3':'slds-show'}" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <lightning:button variant="brand" label="Button1" class="{!v.buttonVisibility.btn1}" onclick="{! c.handleClick }" />
    <lightning:button variant="brand" label="Button2" class="{!v.buttonVisibility.btn2}" onclick="{! c.handleClick }" />
    <lightning:button variant="brand" label="Button3" class="{!v.buttonVisibility.btn3}" onclick="{! c.handleClick }" />

</aura:component>

callback:

action.setCallback(this, function(result) {
    var data = result.getReturnValue();
    var btnVisibility = component.get("v.buttonVisiblity");
    if(data != 'btn1') {
        btnVisibility.btn1 = 'slds-hide';
    }  

    if(data != 'btn2'){
        btnVisibility.btn2 = 'slds-hide';
    }

    if(data != 'btn3'){
        btnVisibility.btn3 = 'slds-hide';
    }
    component.set("v.buttonVisiblity",btnVisibility);
});