Picklist field Dependency LWC Working

PHOTO EMBED

Wed Apr 23 2025 11:05:22 GMT+0000 (Coordinated Universal Time)

Saved by @mdfaizi

// ts_AfterCallNotesLWC.js
import { LightningElement, api, track, wire } from 'lwc';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import createFollowupActivity from '@salesforce/apex/TS_AfterCallNotesController.createFollowupActivity';

import LEAD_OBJECT from '@salesforce/schema/Lead';
import LEAD_STATUS_FIELD from '@salesforce/schema/Lead.Status';
import CONTACT_RESULT_FIELD from '@salesforce/schema/Lead.TS_Contact_Result__c';

export default class ts_AfterCallNotesLWC extends LightningElement {
    @api recordId;

    @track formData = {
        leadStatus: '',
        contactResult: '',
        followupDateTime: null,
        followupNotes: '',
        callNotes: ''
    };

    @track showFollowupFields = false;
    @track isLoading = false;

    @track contactResultDependencyMap = {};
    @track filteredContactResultOptions = [];

    @wire(getObjectInfo, { objectApiName: LEAD_OBJECT })
    leadObjectInfo;

    @wire(getPicklistValues, { recordTypeId: '$leadObjectInfo.data.defaultRecordTypeId', fieldApiName: LEAD_STATUS_FIELD })
    leadStatusPicklistValues;

    @wire(getPicklistValues, { recordTypeId: '$leadObjectInfo.data.defaultRecordTypeId', fieldApiName: CONTACT_RESULT_FIELD })
    wiredContactResultPicklistValues({ data, error }) {
        if (data) {
            console.log('Raw Contact Result Picklist Data:', data);
            this.contactResultDependencyMap = {};
            data.values.forEach(option => {
                option.validFor.forEach(index => {
                    const controllingValue = Object.keys(data.controllerValues)
                        .find(key => data.controllerValues[key] === index);
                    if (!this.contactResultDependencyMap[controllingValue]) {
                        this.contactResultDependencyMap[controllingValue] = [];
                    }
                    this.contactResultDependencyMap[controllingValue].push({
                        label: option.label,
                        value: option.value
                    });
                });
            });
            console.log('Contact Result Dependency Map:', this.contactResultDependencyMap);
            this.filterDependentOptions(this.formData.leadStatus);
        } else if (error) {
            console.error('Error fetching Contact Result picklist:', error);
        }
    }

    handleStatusChange(event) {
        this.formData.leadStatus = event.detail.value;
        console.log('Lead Status changed to:', this.formData.leadStatus);
        this.showFollowupFields = this.formData.leadStatus === 'Follow Up';
        this.filterDependentOptions(this.formData.leadStatus);
    }

    filterDependentOptions(selectedStatus) {
        this.filteredContactResultOptions = this.contactResultDependencyMap[selectedStatus] || [];
        this.formData.contactResult = '';
        console.log('Filtered Contact Result Options:', this.filteredContactResultOptions);
    }

    handleContactResultChange(event) {
        this.formData.contactResult = event.detail.value;
    }

    handleFollowupDateTimeChange(event) {
        this.formData.followupDateTime = event.detail.value;
    }

    handleFollowupNotesChange(event) {
        this.formData.followupNotes = event.detail.value;
    }

    handleCallNotesChange(event) {
        this.formData.callNotes = event.detail.value;
    }

    get leadStatusOptions() {
        return this.leadStatusPicklistValues?.data?.values || [];
    }

    get contactResultOptions() {
        return this.filteredContactResultOptions;
    }

    validateForm() {
        const allValid = [...this.template.querySelectorAll('lightning-input, lightning-textarea, lightning-combobox, lightning-input-field')]
            .reduce((validSoFar, inputField) => {
                if (!this.showFollowupFields &&
                    (inputField.name === 'followupDateTime' || inputField.name === 'followupNotes')) {
                    return validSoFar;
                }
                inputField.reportValidity();
                return validSoFar && inputField.checkValidity();
            }, true);

        return allValid;
    }

    handleSave() {
        if (!this.validateForm()) {
            return;
        }

        this.isLoading = true;

        const afterCallData = {
            leadId: this.recordId,
            leadStatus: this.formData.leadStatus,
            contactResult: this.formData.contactResult,
            followupDateTime: this.formData.followupDateTime,
            followupNotes: this.formData.followupNotes,
            callNotes: this.formData.callNotes
        };

        console.log('After Call Data:', afterCallData);

        createFollowupActivity({ afterCallData: afterCallData })
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'After call notes saved successfully',
                        variant: 'success'
                    })
                );
                this.resetForm();
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error',
                        message: error.body.message || 'An error occurred while saving the data',
                        variant: 'error'
                    })
                );
            })
            .finally(() => {
                this.isLoading = false;
            });
    }

    resetForm() {
        this.formData = {
            leadStatus: '',
            contactResult: '',
            followupDateTime: null,
            followupNotes: '',
            callNotes: ''
        };
        this.filteredContactResultOptions = [];
        this.showFollowupFields = false;
    }

    handleCancel() {
        this.resetForm();
    }
}
content_copyCOPY

focus over here: @wire(getPicklistValues, { recordTypeId: '$leadObjectInfo.data.defaultRecordTypeId', fieldApiName: CONTACT_RESULT_FIELD }) wiredContactResultPicklistValues({ data, error }) { if (data) { console.log('Raw Contact Result Picklist Data:', data); this.contactResultDependencyMap = {}; data.values.forEach(option => { option.validFor.forEach(index => { const controllingValue = Object.keys(data.controllerValues) .find(key => data.controllerValues[key] === index); if (!this.contactResultDependencyMap[controllingValue]) { this.contactResultDependencyMap[controllingValue] = []; } this.contactResultDependencyMap[controllingValue].push({ label: option.label, value: option.value }); }); }); console.log('Contact Result Dependency Map:', this.contactResultDependencyMap); this.filterDependentOptions(this.formData.leadStatus); } else if (error) { console.error('Error fetching Contact Result picklist:', error); }

https://www.innovalleyworks.com/salesforce-picklist-dependencies-in-lwc-without-apex/