How to display the records based on selected picklist value in LWC
AccountSearchController
=======================
public class AccountSearchController
{
@AuraEnabled(cacheable=true)
public static List<Account> displayAccountRecords(String searchKey)
{
System.debug('searchKey'+searchKey);
List<Account> returnlist=new List<Account>();
for(Account acc:[select Name,Industry from Account where Industry=:searchKey])
{
returnlist.add(acc);
}
return returnlist;
}
}
displayAccounts.html
====================
<template>
<template if:true={IndustryPicklistValues.data}>
<lightning-combobox name="progress"
label="Industry"
value={value}
placeholder="-Select-"
options={IndustryPicklistValues.data.values}
onchange={handleChange} >
</lightning-combobox>
</template><br/><br/>
<template if:true={records}>
<table>
<tr>
<th>AccountName</th>
<th>Industry</th>
</tr>
<template for:each={records} for:item="acc">
<tr key={acc.Id}>
<td>{acc.Name}</td>
<td>{selectedIndustryVal}</td>
</tr>
</template>
</table>
</template>
</template>
controller
==========
import { LightningElement, track, wire} from 'lwc';
import { getPicklistValues,getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import displayAccountRecords from '@salesforce/apex/AccountSearchController.displayAccountRecords';
export default class DisplayAccounts extends LightningElement {
@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
objectInfo;
@wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: INDUSTRY_FIELD})
IndustryPicklistValues;
@track value;
@track records;
@track errors;
@track selectedIndustryVal;
@wire(displayAccountRecords, {searchKey: '$selectedIndustryVal' })
wiredAccount({ error, data }) {
if (data) {
this.records = data;
this.errors = undefined;
} else {
this.errors = error;
this.records = undefined;
}
}
handleChange(event) {
this.selectedIndustryVal = event.detail.value;
// eslint-disable-next-line no-console
console.log(this.selectedIndustryVal);
}
}
Comments
Post a Comment