Site icon WedgeCommerce

Exception Handling In Lightning Component

In this blog we will learn about Exception Handling In Lightning Component.

What is Exception and Exception Handling?

Exception is an event which occur during execution of  program instruction and disrupts the normal flow of program instructions. Exception handling is a mechanism to handle exception so that normal flow of program should be maintained.

Steps to perform the Exception Handling is mentioned below.

Steps:

1). Create the lightning component to show the exception.

<-- errorComponent -->
<aura:component>
<!-- 
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */
 -->	
    <aura:attribute name="errorMsg" type="String"></aura:attribute>
    <aura:attribute name="title" type="String"></aura:attribute>
    <div class="wk_model_bg"></div>
    <section role="dialog"  aria-labelledby="header" aria-describedby="errMsg" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container " aura:id="ErrorBox" >
            <div class="slds-modal__header" aura:id ="errHeader">
                <lightning:buttonIcon aura:id="clsBtn" iconName="utility:close" alternativeText="Close" class="slds-button slds-button--neutral slds-p-horizontal--xx-small slds-m-right--x-small slds-float--right" onclick="{!c.myAction}">     
                </lightning:buttonIcon> 
                <h2 id="header" class="slds-text-heading--medium wk_text">{!v.title}</h2>
            </div>
            <div class="myAction slds-p-around--large" aura:id ="errMsg" style="background:#f4f6f9">
                {!v.errorMsg}
            </div>
        </div>
    </section>
    
</aura:component>

2). Create a client site controller for errorComponent.

({
   /**
    * Webkul Software.
    *
    * @category  Webkul
    * @author    Webkul
    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
    * @license   https://store.webkul.com/license.html
    */
	myAction : function(component, event, helper) {
        component.destroy();
    }
})

3). Here is code for button which action is to delete Account record which can not be deleted because it is associated with the case.

<!-- deleteAccount -->
<!-- 
/**
* Webkul Software.
*
* @category  Webkul
* @author    Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license   https://store.webkul.com/license.html
*/
-->

<aura:component controller = "accListJsClass">
      <div aura:id="errorDialogPlaceholder" >
    	{!v.body}
      </div>
        <div class="slds-col slds-size_1-of-8 allBtn">
            <lightning:button label="Delete Account"
                                     iconName="utility:delete"
                                     iconPosition="left"
                                     variant="destructive"
                                     onclick="{!c.deleteSlctd}">
            </lightning:button>
        </div>
</aura:component>

4).Create a client site controller for deleteAccount.

({
        /**
         * Webkul Software.
         *
         * @category  Webkul
         * @author    Webkul
         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
         * @license   https://store.webkul.com/license.html
         */
        deleteSlctd : function(component,event,helper) {
        var getCheckAllId = component.find("cboxRow");
        var selctedRec = [];
        for (var i = 0; i < getCheckAllId.length; i++) {
            
            if(getCheckAllId[i].get("v.value") == true )
            {
                selctedRec.push(getCheckAllId[i].get("v.text")); 
            }
        }
        helper.deleteSelected(component,selctedRec);
    }
})

5). Create a Helper for deleteAccount.

({
   /**
    * Webkul Software.
    *
    * @category  Webkul
    * @author    Webkul
    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
    * @license   https://store.webkul.com/license.html
    */
    deleteSelected : function(component,selctedRec){
        var action = component.get("c.delSlctRec");
        action.setParams({
            "slctRec": selctedRec
        });
        action.setCallback(this, function(response){
            var state =  response.getState();
            if(state == "SUCCESS")
            {
                var errorMsg = "Successfully Deleted";
                var error = "Success";
                $A.createComponent(
                    "c:errorComponent",
                    {
                      "errorMsg": errorMsg,
                        "title" : error
                     },
                    function(errComponent){
                        if (component.isValid()) {
                            var targetComp = component.find("errorDialogPlaceholder");
                            var body = component.get("v.body");
                            body.push(errComponent);
                            component.set("v.body", body);             
                        }
                    }            
                );
            } else if (state=="ERROR") {
                var errorMsg = action.getError()[0].message;
                console.log(errorMsg);
                var error = "Error";
                $A.createComponent(
                    "c:errorComponent",
                    {
                      "errorMsg": errorMsg,
                        "title" : error
                     },
                    function(errComponent){
                        if (component.isValid()) {
                            var targetComp = component.find("errorDialogPlaceholder");
                            var body = component.get("v.body");
                            body.push(errComponent);
                            component.set("v.body", body);             
                        }
                    }            
                );
            }
        });
        $A.enqueueAction(action);
    }
})

6). Create apex class to perform the delete operation.

public class accListJsClass{
    /**
    * Webkul Software.
    *
    * @category  Webkul
    * @author    Webkul
    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
    * @license   https://store.webkul.com/license.html
    */

    @AuraEnabled 
    public List<Account> delRec = new List<Account>();
    
    @AuraEnabled 
    public static List<Account> delSlctRec(List<String> slctRec)
    {
        accListJsClass alc = new accListJsClass();
        // Id is for demo purpose only 
        alc.delRec = [SELECT Id FROM Account WHERE Id = '0017F000006PUEaQAO' ]; 
        try{
           delete alc.delRec;
        } catch(Exception ex)
        {
            throw new AuraHandledException(ex.getMessage());
        }
       
    }
}

Output:

For pagination in lightning component Click Here.

For mass delete in lightning component Click Here.

To create Dynamic Component on button click Click Here.

 

Support

That’s all for implementation of Exception Handling in lightning component, still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to contact us, we will be happy to help you . https://wedgecommerce.com/contact-us/

 

Exit mobile version