0

I am trying to build a lighting web component which uses lightning datatable with Server side search capabilities.

here is the code: I am not sure what I am doing wrong.

.HTML

    <template>  

    <div class="slds-m-around_medium"> 
        <lightning-input type = "search" value={searchKey} onchange={handleKeywordChange}>
        </lightning-input>
    </div>

    <template if:false={Acc} >
                <lightning-datatable 
                                data={Acc}
                                columns={columns}
                                hide-checkbox-column="true"
                                hide-row-number-column="true"
                                key-field="id" >
                </lightning-datatable>
    </template>

.JS


import { LightningElement, wire, track, api } from 'lwc';

import Id from '@salesforce/user/Id';
import fetchAccounts from '@salesforce/apex/ManageAccounts.fetchAccounts'

const columns = [
    {
        label: 'Account ID',
        fieldName: 'ID',
        editable: true
    }, {
        label: 'Account Name',
        fieldName: 'Name',
        editable: true

    }, {
        label: 'Account Number',
        fieldName: 'AccountNumber',
        editable: true

    }, {
        label: 'Account Type',
        fieldName: 'Type',
        editable: true
    }
];

export default class ManageAccount extends LightningElement {

userId = Id;
@track searchKey;
@track columns = columns;
@track Acc;
@track error;

    renderedCallback(){
        if(this.isSearchChangeExecuted){
            return;
        }
            fetchAccounts({
                userId: this.userId,
                searchKey: this.searchKey
            })
            .then( response => {
                this.Acc = response;
                this.error = undefined;
            })
            .catch (e => {
                this.error = e;
                this.Acc = undefined;
            })
    }

    handleKeywordChange(event){
        this.isSearchChangeExecuted = false;  
        this.searchKey = event.target.value; 
    }
}

.controller

public with sharing class ManageAccounts {
    @AuraEnabled (cacheable=true)
    public static List<Account> fetchAccounts( string userId, string searchKey){

        List <Account> acclist = new List<Account>();
        string strgkeyword = '%'+searchKey+'%';
        string query = 'SELECT Id, Name, AccountNumber, Type  FROM Account WHERE OwnerId=: userId' ; 
        if(!String.isEmpty(searchKey)){
            query += ' AND Name LIKE \'%'+searchKey+'%\';
        }
        acclist = Database.query(query);
        return acclist;
    }
}
  • Updated the dynamic query on the controller file based on input from @sfdcfox which was one of the issue.
1
  • Please edit this post to clearly state the problem and ask a question, including only the code that is relevant to the problem you're seeing help with. See How to Ask. – David Reed Apr 15 '20 at 0:02
0

Onchange might not be fired until the input is blurred (lost focus). This is really browser-dependent behavior. You might want to just use onkeyup with a small delay:

<lightning-input ... onkeyup={startSearchTimer} ...

timerId;

startSearchTimer(event) {
  clearTimeout(this.timerId);
  this.timerId = setTimeout(this.doSearch.bind(this),500);
}
doSearch() {
  fetchAccounts({userId:this.userId,searchKey:this.searchKey})
  .then(data => {
    this.Acc = data;
    this.error = null;
  })
  .catch(error => {
    this.Acc = null;
    this.error = error;
  });
}
3
  • HI @sfdcfox, I tried with onkeyup, still I don't get the data on the datatable. Maybe there is issue with my SOQL? – mubs Apr 15 '20 at 4:44
  • 1
    @MubeenQawi Oh, yeah, you're missing quotes. – sfdcfox Apr 15 '20 at 5:26
  • thanks @sfdcfox, once i fixed the query, i was able to render the data. But the table load and search experience overall is not ideal (due to the delay). But this has helped me test out and convey a message. I might go for client side search for better UX. – mubs Apr 15 '20 at 19:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.