You need to sign in to do that
Don't have an account?
Nandhini S 3
Help with lightning web component
Hi,
I'm building a lightning web component which should display result based on search result and display all the accounts when i clear the search box.
My component is displaying the search records correctly but when i clear the search box no records are displayed in the table.
JS
*********
import { LightningElement,wire } from 'lwc';
import getAccount from '@salesforce/apex/searchLWC.getAccount';
export default class AccountSearch extends LightningElement {
columns = [
{
label: 'Account Name',
fieldName: 'Name',
type: 'text',
},
{
label: 'Account Type',
fieldName: 'Type',
type: 'Text',
}
];
//error;
//accList;
@wire(getAccount)
wiredAccounts;
/*({
error,
data
}) {
if (data) {
this.accList = data;
} else if (error) {
this.error = error;
}
}*/
buttonLabel ='Show Table';
showTable;
handleClick(){
if(this.buttonLabel==='Show Table')
{
this.buttonLabel='Hide Table';
this.showTable=true;
}
else
{
this.showTable=false;
this.buttonLabel='Show Table';
}
}
//data= wiredAccounts.data;
searchWord;
handleKeyUp(event){
var keyWord=event.target.value;
var recs= this.wiredAccounts.data;
this.wiredAccounts.data=[];
if(keyWord !='')
{
for(let i=0;i<recs.length;i++)
{
if(recs[i].Name.toLowerCase().includes(keyWord.toLowerCase()))
{
this.wiredAccounts.data = [...this.wiredAccounts.data,recs[i]];
}
}
}
else
{
this.wiredAccounts.data=this.wiredAccounts.data;
}
}
}
HTML
**********
<template>
<div onkeyup={handleKeyUp}>
<lightning-input
name="enter-search"
label="Search using Name"
type="search"
></lightning-input>
</div>
<lightning-button variant="brand" label={buttonLabel} title="Show/Hide data" onclick={handleClick} class="slds-m-left_x-small">
</lightning-button>
<template if:true={showTable}>
<div style="height: 300px;">
<lightning-datatable
key-field="id"
data={wiredAccounts.data}
columns={columns}
hide-checkbox-column>
</lightning-datatable>
</div>
</template>
</template>
I'm building a lightning web component which should display result based on search result and display all the accounts when i clear the search box.
My component is displaying the search records correctly but when i clear the search box no records are displayed in the table.
JS
*********
import { LightningElement,wire } from 'lwc';
import getAccount from '@salesforce/apex/searchLWC.getAccount';
export default class AccountSearch extends LightningElement {
columns = [
{
label: 'Account Name',
fieldName: 'Name',
type: 'text',
},
{
label: 'Account Type',
fieldName: 'Type',
type: 'Text',
}
];
//error;
//accList;
@wire(getAccount)
wiredAccounts;
/*({
error,
data
}) {
if (data) {
this.accList = data;
} else if (error) {
this.error = error;
}
}*/
buttonLabel ='Show Table';
showTable;
handleClick(){
if(this.buttonLabel==='Show Table')
{
this.buttonLabel='Hide Table';
this.showTable=true;
}
else
{
this.showTable=false;
this.buttonLabel='Show Table';
}
}
//data= wiredAccounts.data;
searchWord;
handleKeyUp(event){
var keyWord=event.target.value;
var recs= this.wiredAccounts.data;
this.wiredAccounts.data=[];
if(keyWord !='')
{
for(let i=0;i<recs.length;i++)
{
if(recs[i].Name.toLowerCase().includes(keyWord.toLowerCase()))
{
this.wiredAccounts.data = [...this.wiredAccounts.data,recs[i]];
}
}
}
else
{
this.wiredAccounts.data=this.wiredAccounts.data;
}
}
}
HTML
**********
<template>
<div onkeyup={handleKeyUp}>
<lightning-input
name="enter-search"
label="Search using Name"
type="search"
></lightning-input>
</div>
<lightning-button variant="brand" label={buttonLabel} title="Show/Hide data" onclick={handleClick} class="slds-m-left_x-small">
</lightning-button>
<template if:true={showTable}>
<div style="height: 300px;">
<lightning-datatable
key-field="id"
data={wiredAccounts.data}
columns={columns}
hide-checkbox-column>
</lightning-datatable>
</div>
</template>
</template>
As mentioned in the link https://salesforce.stackexchange.com/questions/252323/how-do-you-change-the-value-of-a-lightning-input-field-in-javascript this seems to be the expected behaviour for further understanding you can try checking the best answer as it mentioned about the explanation of why this is not possible.
I am attaching the below text that is present in the link for quick reference:
If a user enters anything in an input field, you can no longer programmatically set the value of the field. The assumption is that there are unsaved changes that should not be overwritten. If you want to be able to overwrite user changes, you can use lightning-input instead.
Additionally, I would also suggest you to try checking the idea in the below link and upvote so that it may be considered in the future if it reaches the necessary threshold votes.
Let me know in case if there are any issues.
Regards,
Anutej
Thanks for replying.
In my component, when i give a text in the search box, it should display the accounts containing the same name. When i clear the searchbox, it should display all the account list.
But when i clear the searchbox, it doesn't display anything in the data table.
how can i display the intial list of data that was fetched from the apex class,when the searchbox = null?
Apex class: (missed to add it earlier)
public class searchLWC {
@auraenabled(cacheable=true)
public static List<account> getAccount()
{
List<account> acc = [select name,type from account limit 5];
return acc;
}
}
I tried a different code and I was able to get the results but to show the list of records when the search text is empty you need to click on search. Please try checking the below code:
I hope this helps and in case if this comes handy can you please choose this as best answer so that it can be useful for others in the future.
Regards,
Anutej
updateSeachKey(event) {
this.sVal = event.target.value;
if(this.sVal=='')
{
console.log(this.tempContacts);
this.contacts=this.tempContacts;
}
}
And I commented the above lines of code in handleSearch()