How to display the records based on selected picklist value with event in LWC
Apex class
==========
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;
}
}
childComponent.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>
</template>
childComponent.js
=================
import { LightningElement,wire,api } from 'lwc';
import { getPicklistValues,getObjectInfo} from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class ChildComponent extends LightningElement {
@api selectedIndustry;
@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
objectInfo;
@wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: INDUSTRY_FIELD})
IndustryPicklistValues;
handleChange(event){
this.selectedIndustry=event.detail.value;
const picklistcarryevent=new CustomEvent('picklistcarryevent',{
detail:this.selectedIndustry
});
this.dispatchEvent(picklistcarryevent);
}
}
parentComponent.html
====================
<template>
<c-child-component onpicklistcarryevent={handlechange}>
</c-child-component>
<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>{selectedval}</td>
</tr>
</template>
</table>
</template>
</template>
parentComponent.js
==================
/* eslint-disable no-console */
import { LightningElement,wire,api } from 'lwc';
import displayAccountRecords from '@salesforce/apex/AccountSearchController.displayAccountRecords';
export default class ParentComponent extends LightningElement {
@api selectedval;
@api records;
@api errors;
@wire(displayAccountRecords, {searchKey:'$selectedval'})
wiredAccount({ error, data }) {
if (data) {
this.records = data;
this.errors = undefined;
} else {
this.errors = error;
this.records = undefined;
}
}
handlechange(event){
this.selectedval=event.detail;
console.log('selected industry'+this.selectedval);
}
}
Comments
Post a Comment