Showing posts with label how disable button. Show all posts
Showing posts with label how disable button. Show all posts

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