Validation in lightning-datatable in Salesforce LWC

Validation in lightning-datatable in Salesforce LWC

Sample Code:

HTML:

<template> 
     
    <lightning-card title = "Accounts" icon-name = "custom:custom63"> 
 
        <div class = "slds-m-around_medium"> 
 
            <template if:true = {accounts}> 
                 
                <div> 
 
                    <lightning-datatable key-field = "Id" 
                                         data = {accounts} 
                                         columns = {columns} 
                                         hide-checkbox-column = "true" 
                                         show-row-number-column = "true"
                                         onsave = {handleSave}> 
                    </lightning-datatable> 
 
                </div>                  
     
            </template> 
     
            <template if:true = {error}> 
 
                {error}> 
                 
            </template> 
 
        </div> 
 
    </lightning-card> 
 
</template>

JavaScript:

import { LightningElement, track, wire } from 'lwc'; 
import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';
import updateAccounts from '@salesforce/apex/AccountController.updateAccounts';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 
const columns = [   
    { label: 'Name', fieldName: 'Name', editable : true }, 
    { label: 'Industry', fieldName: 'Industry' },
];

export default class LightningDataTableLWC extends NavigationMixin( LightningElement ) {
     
    @track accounts; 
    @track error; 
    @track columns = columns; 
 
    @wire( fetchAccounts )
    wiredFetchAccounts( value ) {
       
        if ( value.data ) {
           
            this.accounts = value.data;
         } else if ( value.error ) {
           
            this.error = value.error;

        }
       
    }

    handleSave(event) {

        var saveDraftValues = event.detail.draftValues;
        var checkBool = true;

        for ( var i = 0; i < saveDraftValues.length; i++ ) {
        
            if ( saveDraftValues[i].Name == 'Test' ) {

                const evt = new ShowToastEvent({
                    message: 'Account Name cannot be Test',
                    variant: 'error',
                });
                this.dispatchEvent( evt );
                checkBool = false;
                break;

            }
           
        }

        if ( checkBool == true ) {

            updateAccounts( { 'accList' : saveDraftValues } )   
            .then(result => { 
 
                console.log( 'Result is ' + result );
                if ( result === 'Successfully Updated') {

                    const evt = new ShowToastEvent({
                        message: 'Account(s) updated Successfully',
                        variant: 'success',
                    });
                    this.dispatchEvent( evt );

                } else {
                   
                    const evt = new ShowToastEvent({
                        message: 'Account(s) update failed due to ' + result,
                        variant: 'error',
                    });
                    this.dispatchEvent( evt );

                }
 
            }) 
            .catch(error => { 
 
                const evt = new ShowToastEvent({
                    message: 'Account(s) update failed',
                    variant: 'error',
                });
                this.dispatchEvent( evt );
 
            }); 
            location.reload();

        }

    }

}

Apex Class:

public with sharing class AccountController { 
 
    @AuraEnabled( cacheable = true ) 
    public static List< Account > fetchAccounts() { 
     
        return [ SELECT Id, Name, Industry FROM Account LIMIT 10 ]; 
         
    } 

    @auraEnabled
    public static String updateAccounts( List < Account > accList ){

        try {

            update accList;
            return 'Successfully Updated';

        } catch( DmlException e ) {

            return e.getMessage();

        }

    }
     
}

Output:

Leave a Reply