Thursday, February 14, 2019

How to disable Lightning button after click the button

This post explains how to disable the lightning button in Lightning component.

Demo:

DisableButtonComponent
<aura:component controller="LightningRelatedExamples" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="objAcc" type="Account"  default="{'sobjectType':'Account', 
                                                           'Name': '',
                                                           'Phone': '',
                                                           'Industry': '', 
                                                           'Type': ''}"/>
    <aura:attribute name="isHide" type="Boolean" default="false" />
    
    <!-- Notification library to show notifications-->
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <div class="slds-theme_default">
        <div class="slds-form-element">
            <center>
                <label class="slds-form-element__label slds-text-heading_medium slds-m-bottom_medium" for="form-element-01">Create Account Form</label>
            </center>
            <div class="slds-form-element__control">
                <lightning:input name="name" type="text" required="true" label="Account Name" value="{!v.objAcc.Name}" />
                <lightning:input name="phone" type="text" label="Phone" value="{!v.objAcc.Phone}" />
                <lightning:input name="industry" type="text" label="Industry" value="{!v.objAcc.Industry}" />
                <lightning:input name="type" type="text" label="Account Type" value="{!v.objAcc.Type}" /> <br/>
                <center>
                    <lightning:button variant="brand" disabled="{!v.isHide}" label="{!v.isHide == true ? 'Account Created' : 'Create Account'}" onclick="{!c.saveAccount}" /> 
                </center>
            </div>
        </div>
    </div>
</aura:component>

DisableButtonComponentController.js
({
    saveAccount : function(component, event, helper) {
        var objAccount = component.get("v.objAcc");
        var action = component.get('c.insertAccount');
        action.setParams({
            objAcc:objAccount
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS") {
                component.find('notifLib').showToast({
                    "variant": "success",
                    "title": objAccount.Name,
                    "message": "The record has created successfully."
                });
                component.set('v.isHide', true);  
            }
        });
        $A.enqueueAction(action);
    }
})

Apex Controller
public inherited Sharing class LightningRelatedExamples {
    
    @AuraEnabled
    public static void insertAccount(Account objAcc) {
        if(objAcc != null) {
            try {
                insert objAcc;
            }
            catch(Exception ex) {
                 throw new AuraHandledException(ex.getMessage());
            }
        }
    }
}

Result

1 comment: