3

enter image description here

<template>
<lightning-card>

     <div class="slds-align_absolute-center" style="height: 3rem;">
       <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" label="Search" value={searchKey}></lightning-input>
     </div>
     <div class="slds-clearfix">
        &nbsp;&nbsp;&nbsp;
           <div class="slds-align_absolute-center" style="display: unset;">
                 <span class="slds-badge" style="background-color:#16dfbd;color:azure;">Selected Contacts:{selectedCount}</span>
            </div>
            &nbsp;
            <div class="slds-align_absolute-center" style="display: unset;">
                 <span class="slds-badge" style="background-color:#90cb31;color:azure;" >Total Contacts : {totalRecords}</span>
            </div>

             <div class="slds-float_right" style="height:1rem; margin-right: 2rem;">
                 <lightning-button variant="destructive" label="Delete" onclick={deleteSelected}> </lightning-button>
              </div>

            </div>
            <div class="slds-align_absolute-center" style="height: 2rem;">
               </div>
               <template if:true={contacts}>
               <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
                <thead>
                   <tr class="slds-text-title_caps">
                      <th style="width:3.25rem;" class="slds-text-align_right">
                         <div class="slds-form-element">
                            <div class="slds-form-element__control">
                               <label class="slds-checkbox">
                                  <!--header checkbox for select all-->
                                  <lightning-input type="checkbox" onchange={selectAll}></lightning-input>
                               </label>
                            </div>
                         </div>
                      </th>
                      <th>
                         <span class="slds-truncate" title="Name">First Name</span>      
                      </th>
                      <th>
                         <span class="slds-truncate" title="Last Name">Last Name</span>
                      </th>
                      <th>       
                         <span class="slds-truncate" title="Department">Department</span>
                      </th>
                      <th >
                         <div class="slds-truncate" title="MobilePhone">Mobile Phone</div>
                      </th>
                   </tr>
                </thead>
                <tbody>

                     <template for:each={contacts} for:item="con">
                      <tr key={con.Id}>
                         <td class="slds-text-align_right" style="width:3.25rem;">
                            <div class="slds-form-element">
                               <div class="slds-form-element__control">
                                  <label class="slds-checkbox">
                                    <lightning-input type="checkbox" text={con.Id} value={con} onchange={handleKeyChanges}></lightning-input>
                                  </label>
                               </div>
                            </div>
                         </td>
                         <td>
                            <div class="slds-truncate" title={con.Name}><a>{con.Name}</a></div>
                         </td>
                         <td>
                            <div class="slds-truncate" title={con.LastName}>{con.LastName}</div>
                         </td>
                         <td>
                            <div class="slds-truncate" title={con.Department}>{con.Department}</div>
                         </td>
                         <td >
                            <div class="slds-truncate" title={con.MobilePhone}>{con.MobilePhone}</div>
                         </td>
                      </tr>
                  </template>

                </tbody>
             </table>
           </template>

</lightning-card>

import { LightningElement, track,wire,api } from 'lwc';
import getContactList from 
'@salesforce/apex/ContactController.getContactList';
import deleteContacts from 
'@salesforce/apex/ContactController.deleteContacts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';


export default class GetContacts extends LightningElement {
    @track searchKeyWord = '';
    @track selectedCount = 0;
    @api contacts;
    @track selectedIds =[];
    @track error;
    @track totalRecords = 0;
    @api successMessage = 0;
    @track checkBoxArray = [];
    @track isAnyCheckBoxSelected = false;

    @wire(getContactList, { searchKeyWord: '$searchKeyWord' })
    wiredContacts({ error, data }) {
        if (data) {
            this.wiredContactResult = data;
            this.contacts = data;
            this.totalRecords = data.length;
            this.error = undefined;

        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }

    handleKeyChange(event) {
        const searchKey = event.target.value;
        this.searchKeyWord = searchKey;
    }

    handleKeyChanges(event) {
        const newValue = event.target.value; 
        if(event.target.checked) {
            this.selectedCount += 1;
            this.selectedIds.push(newValue) 
            this.isAnyCheckBoxSelected =true;
        }
        else {
            this.selectedCount -= 1;
            this.selectedIds = this.arrayRemove(this.selectedIds, newValue);
            if(this.selectedIds.length === 0){
                this.isAnyCheckBoxSelected = false;
            }
        }

    }
    arrayRemove(array, value) {
        return array.filter(function(ele){
            return ele !== value;
        });
    }

    deleteSelected(){
        deleteContacts({
            contactIds :this.selectedIds
        }) 
        .then(result => {
            this.contacts = null;
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: result,
                    variant: 'success',
                }),
            );
            return refreshApex(this.wiredContactResult);

        })
        .catch(error => {
            this.error = error;
        });
    }
    selectAll(event){
        for(let i =0; i<this.contacts.length;i++) {
            this.selectedIds.push(this.contacts[i].Id);
        }
        this.checkBoxArray = this.template.querySelectorAll('lightning-input');
        for (let i = 0; i <this.checkBoxArray.length; i++) {
            if (this.checkBoxArray[i].type === 'checkbox') {
                if(event.target.checked) {
                    this.checkBoxArray[i].checked = true;
                    this.isAnyCheckBoxSelected =true;
                    this.selectedCount += 1;
                }
                else {
                    this.checkBoxArray[i].checked = false;
                    this.isAnyCheckBoxSelected =false;
                    this.selectedCount = 0;
                }
            }
        }
    }
}
4
  • 1
    could you add the front end code for same ? Jan 19, 2019 at 16:15
  • 1
    My main question is which property is the list bound to? But like @MohithShrivastava states, if we could see the template markup, it will help find a solution.
    – pchittum
    Jan 25, 2019 at 9:22
  • I have added the front end code
    – keepler
    Jan 25, 2019 at 13:45
  • Can you add code of 'getContactList' apex method as well? Jan 25, 2019 at 14:06

2 Answers 2

2

An issue is at least the following: you declare @api contacts and then try to modify the value this.contacts = data. Properties decorated with @api are read-only to the component; the parent component controls the value. That makes your change to this.contacts a noop and thus you don't observe the change.

From https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.js_props_public

A component that declares a public reactive property can only set its default value. A parent component that uses the component in its markup can set the component’s public property value.

We recently enabled many LWC engine warnings when you enable Lightning Debug Mode. You can see these warnings in the browser's dev tools. You'll observe a message like this:

[LWC warning]: If property contacts decorated with @api in [object:vm undefined (68)] is used in the template, the value [Object object] set manually may be overridden by the template, consider binding the property only in the template.
0

Your 'this.contacts' isnt getting updated. I would say from UI perspective, add a Refresh button & call your apex on click of it. So you will get updated List everytime.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .