0

I have a custom LWC Component, Where I have two lightning-combobox which are used to display Record type and Sub type which is picklist.

Now based on the record type I selected, I want respective picklist values to be displayed in second drop down.

I tried multiple things, but it seems to be not working.

LWC.html:

<template>
   <lightning-combobox name="recordTypes"
                                                label="Case Types"
                                                value={selectedValue}
                                                placeholder="-Select-"
                                                options={options}
                                                onchange={handleChange} ></lightning-combobox>

<lightning-combobox name="progress" label="Lead Source" value={selectedSubType}
                                                    options={leadSourceValues.data.values} onchange={handleChange}>
                                </lightning-combobox>
</template

LWC.js:

import { LightningElement, wire, track, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

// importing to get the object info 
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
// importing Account shcema
import CASE_OBJECT from '@salesforce/schema/Case';
import SUB_TYPE from '@salesforce/schema/Case.Sub_Type__c';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';

export default class CaseRecordType extends NavigationMixin(LightningElement)  {
     
     @track selectedValue = '012Hv0000004SHl';
    @track options = [];
   // @api recordTypeId;
    @track selectedRecordTypeName;
    @track selectedSubType;
    @track subTypeOptions = [];

    // object info using wire service
    @wire(getObjectInfo, { objectApiName: CASE_OBJECT })
    accObjectInfo({data, error}) {
        if(data) {
            let optionsValues = [];
            // map of record type Info
            const rtInfos = data.recordTypeInfos;

            // getting map values
            let rtValues = Object.values(rtInfos);
            console.log('>>> rtValues... '+JSON.stringify(rtValues));

            for(let i = 0; i < rtValues.length; i++) {
                if(rtValues[i].name !== 'Master') {
                    optionsValues.push({
                        label: rtValues[i].name,
                        value: rtValues[i].recordTypeId
                    })
                }
            }

            this.options = optionsValues;
        }
        else if(error) {
            window.console.log('Error ===> '+JSON.stringify(error));
        }
    }

    
    @wire(getPicklistValues, {recordTypeId: '$this.selectedValue',fieldApiName: SUB_TYPE})
    leadSourceValues
    ({data, error}){
        if(data){
            //subTypeOptions
            console.log('>>> data.... '+JSON.stringify(data));
        }else if(error){
            console.log('>>> data.... '+JSON.stringify(error));
        }
    }
    
     
    // Handling on change value
    handleChange(event) {
        this.selectedValue = event.detail.value;
        this.selectedRecordTypeName = event.target.options.find(opt => opt.value === event.detail.value).label;
        console.log('>>> this.selectedRecordTypeName... '+this.selectedRecordTypeName);
        
        
    }
}
1
  • 2
    Hi, quick advice: --- @track selectedValue = '012Hv0000004SHl'; --- Do not hard code IDs! Nov 29, 2022 at 19:43

1 Answer 1

1

There are multiple issues with your current implementation. you are using wire function.as wire function is async in nature.please always use a boolean to check if your required data is loaded or not.

to make wire reactive you dont need to put $this.variable name. you only need to put $variablename.

picklistvlue json from wire is not returning data in this format.leadSourceValues.data.values. i would recomment you to see console logs for json format.

on recordtype change, you should reset the second picklist data and selected value.

if you are using same change function for multiple elements, it is recommented to check which source triggered it.you can check event.target.name for this.

<template>
    <lightning-combobox name="recordTypes"
                                                 label="Case Types"
                                                 value={selectedValue}
                                                 placeholder="-Select-"
                                                 options={options}
                                                 onchange={handleChange} ></lightning-combobox>

                                                 <!-- only show secondary combobox if data is loaded from wire function-->
 <template if:true= {isdataLoaded}>
 <lightning-combobox name="progress" label="Lead Source" value={selectedSubType}
                                                     options={leadSourceValues} onchange={handleChange}>
                                 </lightning-combobox>
                                 </template>
                                </template>

JS

import { LightningElement, wire, track, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

// importing to get the object info 
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
// importing Account shcema
import CASE_OBJECT from '@salesforce/schema/Case';
import SUB_TYPE from '@salesforce/schema/Case.Sub_Type__c';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';

export default class CaseRecordType extends NavigationMixin(LightningElement)  {
     
     @track selectedValue = '012Hv0000004SHl';
    @track options = [];
   // @api recordTypeId;
    @track selectedRecordTypeName;
    @track selectedSubType;
    @track subTypeOptions = [];
    //boolean to check if data  is loaded from wire function
    isdataLoaded= false;
    //variable to store su type picklist values
    leadSourceValues=[];

    // object info using wire service
    @wire(getObjectInfo, { objectApiName: CASE_OBJECT })
    accObjectInfo({data, error}) {
        if(data) {
            let optionsValues = [];
            // map of record type Info
            const rtInfos = data.recordTypeInfos;

            // getting map values
            let rtValues = Object.values(rtInfos);
            console.log('>>> rtValues... '+JSON.stringify(rtValues));

            for(let i = 0; i < rtValues.length; i++) {
                if(rtValues[i].name !== 'Master') {
                    optionsValues.push({
                        label: rtValues[i].name,
                        value: rtValues[i].recordTypeId
                    })
                }
            }

            this.options = optionsValues;
        }
        else if(error) {
            window.console.log('Error ===> '+JSON.stringify(error));
        }
    }

    
    @wire(getPicklistValues, {recordTypeId: '$selectedValue',fieldApiName: SUB_TYPE})
    getLeadSourceValues
    ({data, error}){
        if(data){
            //subTypeOptions
            console.log('>>> data.... '+JSON.stringify(data));
            //populate subtype piclist value option
            data.values.forEach(item => this.leadSourceValues.push({label: item.label,value:item.value}) );
            this.isdataLoaded = true;

        }else if(error){
            console.log('>>> data.... '+JSON.stringify(error));
        }
    }
    
     
    // Handling on change value
    handleChange(event) {
        //if you want to use same handler function plae check from which combobox it is fired
        //if recordtype is changed
        if(event.target.name == "recordTypes"){
        //reset sub type selected value and picklist option and make isdataloaded false
        this.leadSourceValues = [];
        this.selectedSubType = null;
        this.isdataLoaded=false;
        this.selectedValue = event.detail.value;
        this.selectedRecordTypeName = event.target.options.find(opt => opt.value === event.detail.value).label;
        console.log('>>> this.selectedRecordTypeName... '+this.selectedRecordTypeName);
        }
       //handle subtype change
        if(event.target.name == "progress"){
            this.selectedSubType= event.target.value;
            console.log('selected sub type' + this.selectedSubType );

        }

        
        
    }
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .