2

JS:

@wire(getPicklistValues, {
        recordTypeId: '$objectInfo.data.defaultRecordTypeId', 
        fieldApiName : COUNTRY_FIELD})  picklistValuescon;
@wire(getPicklistValues, {
        recordTypeId: '$objectInfo.data.defaultRecordTypeId', 
        fieldApiName : CITY_FIELD})  picklistValuescity;

HTML:

<template if:true={picklistValuescon.data}>
                    <lightning-combobox
                        style="width: 200px;"
                        value={picklistValuescon.data.values}
                        options={picklistValuescon.data.values}
                        placeholder="Select an Option"
                        label="Country"
                        onchange={handlecountryChange}
                    ></lightning-combobox>
                    <lightning-combobox
                        style="width: 200px;"
                        value={picklistValuescity.data.values}
                        options={picklistValuescity.data.values}
                        placeholder="Select an Option"
                        label="City"
                        onchange={handlecityChange}
                    ></lightning-combobox>
                </template>
  • Pls use {} to format code after pasting and before pasting pls indent the code properly. – salesforce-sas Aug 21 at 5:34
  • ok please help me out to make dependent picklist in LWC – areeb Aug 21 at 6:16
  • Given answer. +1 – salesforce-sas Aug 21 at 6:24
3

Option 1: (RECOMMENDED) When both the controlling and dependent picklist fields are present in record-edit-form, dependent picklist options are updated automatically when you select an option in controlling field

<lightning-record-edit-form object-api-name="Account">
    <lightning-messages>
    </lightning-messages>
    <lightning-input-field field-name="Name">
    </lightning-input-field>
    <lightning-input-field field-name="UpsellOpportunity__c">
    </lightning-input-field>
    <lightning-input-field field-name="SLA__c">
    </lightning-input-field>
    <lightning-button class="slds-m-top_small"
                      variant="brand"
                      type="submit"
                      name="update"
                      label="Update">
    </lightning-button>
</lightning-record-edit-form>

Here SLA__c is dependent on UpsellOpportunity__c.


Option-2: Get the picklist values from getPicklistValues and implement custom logic using combobox

You will get the data about controllerValues and validFor in dependent picklist field. You can use the change handler of controlling field to set the options for dependent field. Below is the example:

HTML:

<template>
    <lightning-combobox name="Upsell"
                        label="Upsell"
                        placeholder="Select Upsell"
                        options={upsellOptions}
                        onchange={handleUpsellChange}>
    </lightning-combobox>
    <lightning-combobox name="Sla"
                        label="Sla"
                        placeholder="Select Sla"
                        options={slaOptions}>
    </lightning-combobox>
</template>

JS:

import { LightningElement, wire, api, track } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import SLA_FIELD from '@salesforce/schema/Account.SLA__c';
import UPSELL_FIELD from '@salesforce/schema/Account.UpsellOpportunity__c';

export default class Poc extends LightningElement {
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    accountInfo;

    @track slaOptions;
    @track upsellOptions;

    @wire(getPicklistValues, { recordTypeId: '$accountInfo.data.defaultRecordTypeId', fieldApiName: SLA_FIELD })
    slaFieldInfo({ data, error }) {
        if (data) this.slaFieldData = data;
    }

    @wire(getPicklistValues, { recordTypeId: '$accountInfo.data.defaultRecordTypeId', fieldApiName: UPSELL_FIELD })
    upsellFieldInfo({ data, error }) {
        if (data) this.upsellOptions = data.values;
    }

    handleUpsellChange(event) {
        let key = this.slaFieldData.controllerValues[event.target.value];
        this.slaOptions = this.slaFieldData.values.filter(opt => opt.validFor.includes(key));
    }
}
  • yeah thanks, I have used option 1 it is working but it is now saved in my field in the object when I will something in this – areeb Aug 21 at 7:05
  • can you pls clarify what you commented above? – salesforce-sas Aug 21 at 7:07
  • I have used option 1 and it is working but when I fill these picklist value and click on save button it is not saved in the object – areeb Aug 21 at 7:10
  • you need to use button type="submit" as shown here: developer.salesforce.com/docs/component-library/bundle/… – salesforce-sas Aug 21 at 7:14
  • modified in answer with button – salesforce-sas Aug 21 at 7:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.