Sunday, December 22, 2019

How To Select And Update Multiple Records Using LWC

If you have a requirement like to display the list of records related to particular record and then selection option to select one or many records from the display list and update the selected records.

And this entire functionality if you want to do using the LWC please follow the below steps and code.

Example :I'm building a component to display list of cases under a particular account and then I'm providing a button to user to make a call out to check which cases can be closed now.

As soon as I got a response from the api i will display all the cases which can be closed now with check box for selection and other cases with non selection option.

For generic demo purpose I'm assuming by default alternative cases are non-closable. So,to test this feature please select account with at least minimum 3 case records.



Apex Class- CaseFilterinLWCCntrl.cls

/**
 * (c) 2019 - srinivas4sfdc.com 
 *
 * Name           : CaseFilterinLWCCntrl
 * Created Date   : 22 Dec 2019
 * Created By     : Sreenivas M
 * Purpose        : Controller class for CaseFilterLWC component.
 *
 **/

global class CaseFilterinLWCCntrl
{
    
    public static List<Case> listCases{get;set;}  
    public static Id recId{get;set;}
    
    public CaseFilterinLWCCntrl(ApexPages.StandardController controller)
    {
        recId = controller.getId();
    }

    @AuraEnabled(cacheable=true)
    public static List<Case> fetchAllCases(String accntId)
    {
        listCases = new List<Case>();
        listCases = [Select id,casenumber,status,Origin,Subject,Type,ContactMobile FROM Case WHERE AccountId=:accntId limit 20];
        return listCases;
    }
 
 @AuraEnabled
    public static List<CasesWrapper> checkIsCloseableCases(List<Case> listAllCases)
    {
        
        System.debug('listAllCases...'+listAllCases);
        String errMsg ='';
        List<String> listCaseNum =new List<String>();
        List<String> listCloseableCaseNum =new List<String>();
        String respString = '{"cases":["';
        
        for(Integer i=0;i<listAllCases.size();i++)
        {
            listCaseNum.add(listAllCases[i].casenumber);
            if(Math.mod((i+1),2) == 0)
                listCloseableCaseNum.add(listAllCases[i].casenumber);
        
        }
        
        String finalCaseClose = String.join(listCloseableCaseNum,'","');
        respString = respString+finalCaseClose +'"]}';
       
        String jsonBody = '{"Country":"IND","casenumber":["'+finalCaseClose+'"]}';
        
        System.debug('respString ...'+respString +'...'+jsonBody);
        Http http = new Http();
        HttpResponse res = new HttpResponse();
        HttpRequest req = new HttpRequest();
        req.setEndpoint('endPoint details..');
        req.setMethod('POST');
        req.setBody(jsonBody);
        req.setHeader('Content-Type', 'application/json');
        req.setHeader('Currency', 'INR');
       
        try
        {
          //  res = http.send(req);                      
            string responseValue;// = res.getBody();           
         //   system.debug('responseValue-->>'+responseValue+''+res.getbody());
            responseValue = respString;           
         
                
            if(String.isNotBlank(responseValue)) //   if(res.getStatus()=='OK' && res.getStatusCode()==200 && String.isNotBlank(responseValue))
            {
                 map<string,object> IsCan = (map<string,object>)JSON.deserializeUntyped(responseValue);
                 List<CasesWrapper> listcaseWrap = new List<CasesWrapper>();
                 System.debug('responseValue...'+responseValue);
                 if(IsCan!=null && IsCan.containsKey('cases'))
                 {
                   List<String> closeableCsNum =new List<String>();
                   for(Object obj: (List<Object>)IsCan.get('cases'))
                       closeableCsNum.add((String)obj);
                   
                     System.debug('closeableCsNum...'+closeableCsNum);
                   for(Case cs : listAllCases)
                   {
                       if(closeableCsNum.contains(cs.casenumber))
                           listcaseWrap.add(new CasesWrapper(cs,true));
                       else
                            listcaseWrap.add(new CasesWrapper(cs,false));
                   }
                   
                   System.debug('listcaseWrap....'+listcaseWrap);
                   return listcaseWrap;
                 }
                 
                 else
                 {
                    errMsg ='Received invalid response';
                    throw new AuraHandledException(errMsg); 
                 }
            }
            else
            {
                    errMsg ='Oops something went wrong';
                    throw new AuraHandledException(errMsg); 
            }
        }
        
        Catch(Exception e)
        {
            System.debug('Exception ---'+errMsg);
            AuraHandledException ex = new AuraHandledException(errMsg);
            ex.setMessage(errMsg);
            throw ex;          
        }
    }
    
    @AuraEnabled
    public static string closeSelCases(List<String> listSelCasesToUpdate)
    {
        List<Case> listCasesToUpdate = new List<Case>();
        for(Case cs : [Select id,Status From Case WHERE CaseNumber IN :listSelCasesToUpdate])
        {
        //  cs.Status = 'Closed';
          listCasesToUpdate.add(cs);
        }
        
        try
        {
            if(!listCasesToUpdate.isEmpty())
            {
                update listCasesToUpdate;
                return 'Selected Cases Has Been Closed Successfully';
             }
         }
         Catch(Exception e)
         {
            AuraHandledException ex = new AuraHandledException(String.valueOf(e));
            ex.setMessage('An Error Occured While Closing The Cases');
            throw ex; 
         }         
          
        return null;
    }
       
                    
    public class CasesWrapper
    {
        @AuraEnabled public Case cs{get;set;}
        @AuraEnabled public boolean isCloseable{get;set;}
        @AuraEnabled public Boolean isSelect{get;set;}
            
        public CasesWrapper(Case csObj,Boolean closeable)
        {
            this.cs = csObj;
            this.isCloseable = closeable;
            this.isSelect = false;
        }

    }
 }

updateListOfCases.js (Java script controller of LWC):


/* eslint-disable no-script-url */
/* eslint-disable no-undef */
/* eslint-disable vars-on-top */
/* eslint-disable no-console */
/* eslint-disable no-unused-vars */
import { LightningElement, api, track, wire } from "lwc";
import fetchCases from "@salesforce/apex/CaseFilterinLWCCntrl.fetchAllCases";
import checkIsCloseableStatus from "@salesforce/apex/CaseFilterinLWCCntrl.checkIsCloseableCases";
import closelSelected from "@salesforce/apex/CaseFilterinLWCCntrl.closeSelCases";

const allCasescolumns = [
    {
        label: 'Case Number', fieldName: 'nameUrl', type: 'url',
        typeAttributes: {
            label: { fieldName: 'CaseNumber' },
            target: '_top'
        }
    },
    { label: 'Status', fieldName: 'Status' },
    { label: 'Origin', fieldName: 'Origin' },
    { label: 'Subject', fieldName: 'Subject' },
    { label: 'Type', fieldName: 'Type' },
    { label: 'ContactMobile', fieldName: 'ContactMobile', type: 'text' }

];

export default class UpdateListOfCases extends LightningElement {
    @api recordId;
    @track listAllCases;
    @track listAllCloseableCasesData;
    @track listcancelSeltedCases = [];
    @track columns = allCasescolumns;
    @track showDefTable;
    @track showIsCloseableBtn;
    @track showConfirmClosebtn;
    @track totalNoOfCases;
    @track showErrMsg;
    @track notifType;
    @track notifMsg;
    @track isLoading;

    @wire(fetchCases, { accntId: '$recordId'})
    wiredFetchCasesList({ error, data }) {
        if (data) {
            this.showIsCloseableBtn = true;
            this.listAllCases = data.map(record => Object.assign(
                { "nameUrl": '/console#%2F' + record.Id },
                record));

            this.totalNoOfCases = this.listAllCases.length;
            this.showDefTable = true;
        }
        else if (error) {
            this.error = error;
            this.listAllCases = undefined;
            this.showIsCloseableBtn = false;
        }
    }

    checkIsCloseableCasesJs(event) {
        this.isLoading = true;
        this.showDefTable = false;
        this.showIsCloseableBtn = true;
        this.showErrMsg = false;
        console.log('this.listAllCases....' + this.listAllCases);
        checkIsCloseableStatus({ listAllCases: this.listAllCases })
            .then(result => {
                this.listAllCloseableCasesData = result;
                this.showIsCloseableBtn = false;
                this.showConfirmClosebtn = false;
                this.isLoading = false;

            })
            .catch(error => {

                var errorMsg;
                if (Array.isArray(error.body)) {
                    this.errorMsg = error.body.map(e => e.message).join(', ');
                } else if (typeof error.body.message === 'string') {
                    this.errorMsg = error.body.message;
                }
                console.log('proper error--->' + this.errorMsg);
                this.isLoading = false;
                this.showErrMsg = true;
                this.notifType = 'error'; 
                this.notifMsg = this.errorMsg;
            });

    }

    rowSelChangeEvent(event) {
        this.showConfirmClosebtn = false;
        this.listAllCloseableCasesData.forEach(element => {
            if (element.cs.CaseNumber === event.currentTarget.dataset.id) {
                element.isSelect = event.target.checked;
            }

        });

        for (let i = 0; i < this.listAllCloseableCasesData.length; i++) {

            if (this.listAllCloseableCasesData[i].isSelect) {
                this.listcancelSeltedCases.push(this.listAllCloseableCasesData[i].cs.CaseNumber);
                this.showConfirmClosebtn = true;
            }

        }

    }

    selectDeselectAll(event) {
        if (event.target.checked) {
            this.listAllCloseableCasesData.forEach(element => {
                if (element.isCloseable) {
                    element.isSelect = true;
                    this.showConfirmClosebtn = true;
                }

            });
        }
        else {
            this.listAllCloseableCasesData.forEach(element => {
                if (element.isCloseable) {
                    element.isSelect = false;
                }
                this.showConfirmClosebtn = false;
            });
        }

    }

    closelselectedCaseJs(event) {
        this.isLoading = true;
        this.showErrMsg = false;
        this.listcancelSeltedCases = [];

        for (let i = 0; i < this.listAllCloseableCasesData.length; i++) {
            if (this.listAllCloseableCasesData[i].isSelect) {
                this.listcancelSeltedCases.push(this.listAllCloseableCasesData[i].cs.CaseNumber);
            }
        }


        closelSelected({ listSelCasesToUpdate: this.listcancelSeltedCases })
            .then(result => {
                console.log('cases--->' + result);
                this.showConfirmClosebtn = false;
                this.showErrMsg = true;
                this.notifType = 'success';
                this.notifMsg = result;
                this.isLoading = false;

            })
            .catch(error => {

                var errorMsg;
                if (Array.isArray(error.body)) {
                    this.errorMsg = error.body.map(e => e.message).join(', ');
                } else if (typeof error.body.message === 'string') {
                    this.errorMsg = error.body.message;
                }

                this.showConfirmClosebtn = true;
                this.showErrMsg = true;
                this.notifType = 'error';
                this.notifMsg = this.errorMsg;
                this.isLoading = false;

            });

    }

}

updateListOfCases.html

<template>
   <!-- To show the toast message in vf pages/classic enviornment-->
    <template if:true={showErrMsg}>
        <c-generic-toast-messages notificationtype={notifType} notificationmessage={notifMsg}></c-generic-toast-messages>
        <div class="slds-m-bottom_x-small"></div>
    </template>



    <template if:true={showDefTable}>
        <lightning-datatable data={listAllCases} columns={columns} key-field="id" hide-checkbox-column="true"></lightning-datatable>
    </template>


    <template if:true={listAllCloseableCasesData}>

        <div>
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <thead>
                    <tr>
                        <th>
                            <lightning-input type="checkbox" label="" onchange={selectDeselectAll} value={selAllChe}>
                            </lightning-input>
                        </th>
                        <th>Case Number</th>
                        <th>Status</th>
                        <th>Origin</th>
                        <th>Type</th>
                        <th>Subject</th>
                        <th>ContactMobile</th>
                        <th>Can Close?</th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={listAllCloseableCasesData} for:item="aItem">
                        <tr key={aItem.cs.CaseNumber}>
                            <td>
                                <template if:true={aItem.isCloseable} class="slds-text-align--left">
                                    <lightning-input type="checkbox" data-id={aItem.cs.CaseNumber} label="" value={aItem.isSelect} checked={aItem.isSelect} onchange={rowSelChangeEvent} ></lightning-input>
                                    <span class="slds-checkbox--faux"></span>
                                    <span class="slds-form-element__label text"></span>
                                </template>
                                <template if:false={aItem.isCloseable}>
                                    <lightning-icon icon-name="utility:error" alternative-text="Can't Close" variant="error" size="x-small" style="padding:0.1rem !important;"></lightning-icon></span>
                                </template>

                            </td>
                            <td >{aItem.cs.CaseNumber}-{aItem.isCloseable}</td>
                            <td >{aItem.cs.Status}</td>
                            <td>{aItem.cs.Origin}</td>
                            <td>{aItem.cs.Type}</td>
                            <td>{aItem.cs.Subject}</td>
                            <td>{aItem.cs.ContactMobile}</td>                          
                            <td class="slds-text-align--center">
                                <template if:true={aItem.isCloseable}>
                                    <lightning-icon icon-name="action:approval" alternative-text="Closeable" size="xx-small" style="padding:0.1rem !important;"></lightning-icon>
                                </template>
                                <template if:false={aItem.isCloseable}>
                                    <lightning-icon icon-name="utility:error" alternative-text="Non-Cancellable" variant="error" size="small" style="padding:0.1rem !important;"></lightning-icon>
                                </template>
                            </td>
                          
                        </tr>
                    </template>

                </tbody>

            </table>
        </div>
    </template>
    <template if:true={showIsCloseableBtn} class="slds-is-relative">
        <lightning-button label="Check Closeable Cases" title="Check Closeable Cases" variant="success" onclick={checkIsCloseableCasesJs} class="slds-align_absolute-center slds-m-top_medium slds-size_small"></lightning-button>

        <div if:true={isLoading}>
            <lightning-spinner alternative-text="Loading..." variant="brand" size="large" class="slds-is-absolute"></lightning-spinner>
        </div>
    </template>


    <template if:true={showConfirmClosebtn} class="slds-is-relative">
        <lightning-button label="Close Selected" title="Close Selected" variant="success" onclick={closelselectedCaseJs} class="slds-align_absolute-center slds-m-top_medium"></lightning-button>
        <div if:true={isLoading}>
            <lightning-spinner alternative-text="Loading..." variant="brand" size="large" class="slds-is-absolute"></lightning-spinner>
        </div>
    </template>

    <template if:false={listAllCases}>
        No Cases Found For This Account.
    </template>
</template>

updateListOfCases.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="updateListOfCases">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
     <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

After deploying all these changes we are ready to go demo and below is the sample demo how this code works.


Please keep below points as notes while developing the same.
  • { "nameUrl": '/console#%2F' + record.Id } - This is to open a record in classic console using lightning out
  • <c-generic-toast-messages> - Custom component used to show toast messages in classic environment,in case of lightning we can directly use toast messages.
For more update please like/follow this page on

Hope this helps you..Enjoy..!

No comments:

Post a Comment