•  

    LWC Lead Duplicate

     
    This component is useful to see duplicates of Leads, this is dynamic and we can use it for other objects.
    Code: 
    HTML-
    <template>
    
            <lightning-card title="Duplicate Leads" icon-name="standard:lead">
    
                    <div class="slds-p-around_x-small">
    
                        <template if:true={leaddatalist}>
    
                        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
    
                            <thead>
    
                                <tr class="slds-line-height_reset">
    
                                    <th class="" scope="col">
    
                                        <div class="slds-truncate" title="Lead Name">Lead Name</div>
    
                                    </th>
    
                                    <th class="" scope="col">
    
                                        <div class="slds-truncate" title="Company">Company</div>
    
                                    </th>
    
                                    <th class="" scope="col">
    
                                        <div class="slds-truncate" title="Email">Email</div>
    
                                    </th>
    
                                    <th class="" scope="col">
    
                                            <div class="slds-truncate" title="Phone">Phone</div>
    
                                   </th>
    
                                    
    
                                </tr>
    
                            </thead>
    
                            <tbody>
    
                        
    
                                <template for:each={leaddatalist} for:item="lead"> 
    
                                    <tr key={lead.Id} class="slds-hint-parent">
    
                                        <td data-label="Prospecting">
    
                                            <div class="slds-truncate" title="Lead Name">{lead.Name}</div>
    
                                        </td>
    
                                        <td data-label="Confidence">
    
                                            <div class="slds-truncate" title="Company">{lead.Company}</div>
    
                                        </td>
    
                                        <td data-label="Confidence">
    
                                            <div class="slds-truncate" title="Email">{lead.Email}</div>
    
                                        </td>
    
                                        <td data-label="Confidence">
    
                                                <div class="slds-truncate" title="Phone">{lead.Phone}</div>
    
                                        </td>
    
                                     
    
                                    </tr>
    
                                    
    
                                </template>
    
                                
    
                            </tbody>
    
                        </table>
    
                    </template >                
    
                    </div>
    
                    <div class="slds-m-around_medium">
    
                        <template if:true= {toshowPagination}>
    
                            <p class="slds-m-vertical_medium content">
    
                                     Displaying {startingRecord} to {endingRecord} of {totalRecountCount} records.
    
                                     Page {page} of {totalPage}. </p>
    
                            <c-paginator onprevious={previousHandler} onnext={nextHandler}></c-paginator>
    
                        </template>
    
                        </div>
    
                </lightning-card>
    
    </template>
    
    
    JS Code:
    import { LightningElement ,wire,api,track} from 'lwc';
    
    import getLeads from '@salesforce/apex/LeadDuplicatesClass.getleads';
    
    export default class LeadDuplicates extends LightningElement {
    
        @api recordId;
    
        @track leaddatalist;
    
        @track toshowPagination =false;
    
        @track page = 1; //this is initialize for 1st page
    
        @track items = []; //it contains all the records.
    
        @track data = []; //data to be display in the table
    
        @track columns; //holds column info.
    
        @track startingRecord = 1; //start record position per page
    
        @track endingRecord = 0; //end record position per page
    
        @track pageSize = 5; //default value we are assigning
    
        @track totalRecountCount = 0; //total record count received from all retrieved records
    
        @track totalPage = 0; //total number of page is needed to display all records
    
        @wire(getLeads, { recId: '$recordId' })
    
        getLeadData({error,data})
    
        {
    
            // eslint-disable-next-line no-console
    
            console.log('testtest ' + JSON.stringify(data));
    
           if(data){
    
               // eslint-disable-next-line no-console
    
               console.log('testtest ' + JSON.stringify(data.length));
    
            this.items= data;
    
            this.totalRecountCount = data.length;
    
            this.totalPage = Math.ceil(this.totalRecountCount / this.pageSize);
    
            this.leaddatalist= this.items.slice(0,this.pageSize);
    
            this.endingRecord = this.pageSize;
    
            this.error = undefined;
    
            if(this.totalRecountCount > 5){
    
                this.toshowPagination= true;
    
            }
    
    
            // eslint-disable-next-line no-console
    
            console.log(data);
    
           }
    
           else{
    
               // eslint-disable-next-line no-console
    
               console.log('I am on error ');
    
               this.error = error;
    
                this.data = undefined;
    
           }
    
        }
    
        //clicking on previous button this method will be called
    
        previousHandler() {
    
            if (this.page > 1) {
    
                this.page = this.page - 1; //decrease page by 1
    
                this.displayRecordPerPage(this.page);
    
            }
    
        }
    
    
        //clicking on next button this method will be called
    
        nextHandler() {
    
            if((this.page<this.totalPage) && this.page !== this.totalPage){
    
                this.page = this.page + 1; //increase page by 1
    
                this.displayRecordPerPage(this.page);            
    
            }             
    
        }
    
    
        //this method displays records page by page
    
        displayRecordPerPage(page){
    
    
            /*let's say for 2nd page, it will be => "Displaying 6 to 10 of 23 records. Page 2 of 5"
    
            page = 2; pageSize = 5; startingRecord = 5, endingRecord = 10
    
            so, slice(5,10) will give 5th to 9th records.
    
            */
    
            this.startingRecord = ((page -1) * this.pageSize) ;
    
            this.endingRecord = (this.pageSize * page);
    
    
            this.endingRecord = (this.endingRecord > this.totalRecountCount) 
    
                                ? this.totalRecountCount : this.endingRecord; 
    
    
            this.leaddatalist = this.items.slice(this.startingRecord, this.endingRecord);
    
    
            //increment by 1 to display the startingRecord count, 
    
            //so for 2nd page, it will show "Displaying 6 to 10 of 23 records. Page 2 of 5"
    
            this.startingRecord = this.startingRecord + 1;
    
        }    
    
        
    
    }
     
    Metadata.xml
    <?xml version="1.0" encoding="UTF-8"?>
    
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LeadDuplicates">
    
        <apiVersion>45.0</apiVersion>
    
        <isExposed>true</isExposed>
    
        <targets>
    
            <target>lightning__AppPage</target>
    
            <target>lightning__RecordPage</target>
    
            <target>lightning__HomePage</target>
    
        </targets>
    
    </LightningComponentBundle>
     
    Paginator for Pagination:
    <template>
    
            <lightning-layout>
    
                <lightning-layout-item>
    
                    <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousHandler}></lightning-button>
    
                </lightning-layout-item>
    
                <lightning-layout-item flexibility="grow"></lightning-layout-item>
    
                <lightning-layout-item>
    
                    <lightning-button label="Next" icon-name="utility:chevronright" icon-position="right" onclick={nextHandler}></lightning-button>
    
                </lightning-layout-item>
    
            </lightning-layout>
    
        </template>
    
    
    import { LightningElement } from 'lwc';
    
    
    export default class Paginator extends LightningElement {
    
        previousHandler() {
    
            this.dispatchEvent(new CustomEvent('previous'));
    
        }
    
    
        nextHandler() {
    
            this.dispatchEvent(new CustomEvent('next'));
    
        }
    
    }
    
    <?xml version="1.0" encoding="UTF-8"?>
    
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="paginator">
    
        <apiVersion>45.0</apiVersion>
    
        <isExposed>true</isExposed>
    
        <targets>
    
            <target>lightning__RecordPage</target>
    
            <target>lightning__AppPage</target>
    
            <target>lightning__HomePage</target>
    
        </targets>
    
    </LightningComponentBundle>
    
    
    Apex class:
    public with sharing class LeadDuplicatesClass {
    
        @AuraEnabled(cacheable=true)
    
        public static List<Lead> getleads(Id recId){
    
            
    
            Lead currentLead =new Lead();
    
            currentLead =[Select id,email,company,name,Phone from Lead where id =: recId];
    
            List<Lead> leadDataList= new List<Lead>();
    
            leadDataList= [Select id, Name,Company,Email,Phone from Lead where (company =: currentLead.company or Email = :currentLead.email or Phone =:currentLead.Phone)];
    
    
           System.debug('leadDataList' + leadDataList);
    
            return leadDataList;
    
    
        }
    
    
    }
    
    
    Comment below for any Questions/Suggestions.

Comments

  • (no comments)

Post Comments