Hello friends, today I am going to discuss How to Create Reusable Dependent Picklist in LWC without using Apex Class. In this article, I describe an interesting feature provided by LWC.
Also check this: Navigation Service in Lightning Web Component (LWC) Salesforce
The getPicklistValuesByRecordType module of LWC fetches the picklist values from an object for a given record type.
First of all, you need to create a controlling Picklist in my case I have an Industry field on account Level and the dependent picklist is CustomerPriority__c.
The UI contains a Combobox that displays the controlling picklist, Industry, and when the value changes, it calls the fetchDependentValue method, which retrieves the dependent picklist values for the value selected in the controlling field, as shown in the figure, and displays them as dependent picklists.
Code :
First we create child dependent picklist component so we can send dynamic values from the parent component.
DependedPickListLWC.Html :
<template>
<template if:true={showpicklist}>
<lightning-combobox label={controllerFieldLabel}
name={controllerFieldLabel}
options={controllingPicklist}
value={selectedControlling}
onchange={fetchDependentValue}
>
</lightning-combobox>
<lightning-combobox label={dependentFieldLabel}
name={dependentFieldLabel}
options={finalDependentVal}
value={selectedControlling}
disabled={dependentDisabled}
onchange={handleDependentPicklist}
>
</lightning-combobox>
</template>
</template>
DependedPickListLWC.JS :
import { LightningElement, wire, track , api } from 'lwc';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
export default class DependedPickListLWC extends LightningElement {
@api objectApiName;
@api objectRecordTypeId;
@api controllerFieldApiName;
@api controllerFieldLabel;
@api dependentFieldApiName;
@api dependentFieldLabel;
@track controllerValue;
@track dependentValue;
controllingPicklist=[];
dependentPicklist;
@track finalDependentVal=[];
@track selectedControlling="--None--";
showpicklist = false;
dependentDisabled=true;
showdependent = false;
@wire(getPicklistValuesByRecordType, { objectApiName: '$objectApiName', recordTypeId: '$objectRecordTypeId' })
fetchPicklist({error,data}){
if(data && data.picklistFieldValues){
let optionsValue = {}
optionsValue["label"] = "--None--";
optionsValue["value"] = "";
this.controllingPicklist.push(optionsValue);
data.picklistFieldValues[this.controllerFieldApiName].values.forEach(optionData => {
this.controllingPicklist.push({label : optionData.label, value : optionData.value});
});
this.dependentPicklist = data.picklistFieldValues[this.dependentFieldApiName];
this.showpicklist = true;
} else if(error){
console.log(error);
}
}
fetchDependentValue(event){
console.log(event.target.value);
this.dependentDisabled = true;
this.finalDependentVal=[];
this.showdependent = false;
const selectedVal = event.target.value;
this.controllerValue = selectedVal;
this.finalDependentVal.push({label : "--None--", value : ""})
let controllerValues = this.dependentPicklist.controllerValues;
this.dependentPicklist.values.forEach(depVal => {
depVal.validFor.forEach(depKey =>{
if(depKey === controllerValues[selectedVal]){
this.dependentDisabled = false;
this.showdependent = true;
this.finalDependentVal.push({label : depVal.label, value : depVal.value});
}
});
});
}
handleDependentPicklist(event){
this.dependentValue = event.target.value;
// send this to parent
let paramData = {controllerValue : this.controllerValue, dependentValue : this.dependentValue};
let ev = new CustomEvent('childmethod',
{detail : paramData}
);
this.dispatchEvent(ev);
}
}
GlobalPickListLWC.Html :
<template>
<lightning-card variant="Narrow" title="Dependent PickList LWC">
<div class="slds-var-p-around_small">
<c-depended-pick-list-l-w-c onchildmethod={callFromChild}
object-api-name="Account"
object-record-type-id = '0126F0000013TwBQAU'
controller-field-api-name = 'Industry'
controller-field-label = 'Industry'
dependent-field-api-name = 'CustomerPriority__c'
dependent-field-label = 'Customer Priority'
>
</c-depended-pick-list-l-w-c>
</div>
</lightning-card>
</template>
GlobalPickListLWC.JS :
import { LightningElement } from 'lwc';
export default class GlobalPickListLWC extends LightningElement {
controllerValue;
dependentValue;
callFromChild(event){
this.controllerValue = event.detail.controllerValue;
this.dependentValue = event.detail.dependentValue
alert(this.controllerValue + '----' + this.dependentValue);
console.log(JSON.stringify(event.detail));
}
}
Output :
Total views : 1113310