Dynamic Picklist using lightning combobox in Lightning Web Component in Salesforce
Salesforce reference link ComboBox
DynamicPickListWithComboBox.html
<template>
<lightning-card>
<div style="width:200px; padding:0.5rem;">
<lightning-combobox
name="filter"
label="Industry"
value={selectedValue}
options={options}
onchange={handlePicklistChange}
placeholder="Select Industry">
</lightning-combobox>
</div>
</lightning-card>
</template>
DynamicPickListWithComboBox.js
import { LightningElement, wire } from 'lwc';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
export default class DynamicPickListWithComboBox extends LightningElement {
options = [];
selectedValue;
@wire( getObjectInfo, { objectApiName: ACCOUNT_OBJECT } )
objectInfo;
@wire( getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: INDUSTRY_FIELD } )
wiredData( { error, data } ) {
if ( data ) {
console.log( 'Data received from Picklist Field ' + JSON.stringify( data.values ) );
this.options = data.values.map( objPL => {
return {
label: `${objPL.label}`,
value: `${objPL.value}`
};
});
console.log( 'Options are ' + JSON.stringify( this.options ) );
} else if ( error ) {
console.error( JSON.stringify( error ) );
}
}
handlePicklistChange( event ) {
console.log( 'Picklist selected value is ' + JSON.stringify( event.detail.value ) );
}
}
DynamicPickListWithComboBox.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>