Using a Custom Metadata Type to store relationships between text fields, I'm trying to create an LWC to surface data as dependent picklists. However, when I add the LWC to a record page, I get this error upon loading:
Message: [Cannot read properties of undefined (reading 'description')]
Component Descriptor: markup://lightning:combobox
Function: eval
Here is the code for my LWC, can anyone help me understand what is missing?
FieldMappings.js
import { LightningElement, wire } from 'lwc';
import getMetadataRecords from '@salesforce/apex/FieldMappingsController.getPicklistMetadata';
export default class FieldMappings extends LightningElement {
supportProductCategoryOptions = [];
supportIssueTypeOptions = [];
supportProductGroupOptions = [];
resolutionActionTakenOptions = [];
issueGroupOptions = [];
issueSubGroupOptions = [];
selectedSupportProductCategory = '';
selectedSupportIssueType = '';
selectedSupportProductGroup = '';
selectedResolutionActionTaken = '';
selectedIssueGroup = '';
selectedIssueSubGroup = '';
@wire(getMetadataRecords)
metadataRecords({ error, data }) {
if (data) {
console.log(data)
this.supportProductCategoryOptions = Array.from(data).reduce((options, record) => {
console.log(options, record.supportProductCategory);
if (options.indexOf(record.supportProductCategory) === -1) {
options.push(record.supportProductCategory);
}
return options;
}, []);
console.log(this.supportProductCategoryOptions);
} else if (error) {
console.error(error);
}
}
handlesupportProductCategoryChange(event) {
this.selectedSupportProductCategory = event.target.value || '';
if (this.metadataRecords.data) {
this.supportIssueTypeOptions = this.metadataRecords.data.reduce((options, record) => {
if (record.supportProductCategory === this.selectedSupportProductCategory && options.indexOf(record.supportIssueType) === -1) {
options.push(record.supportIssueType);
}
return options;
}, []);
}
this.selectedSupportIssueType = '';
this.supportProductGroupOptions = [];
this.resolutionActionTakenOptions = [];
this.issueGroupOptions = [];
this.issueSubGroupOptions = [];
}
handlesupportIssueTypeChange(event) {
this.selectedSupportIssueType = event.target.value || '';
this.supportProductGroupOptions = [];
this.resolutionActionTakenOptions = [];
this.issueGroupOptions = [];
this.issueSubGroupOptions = [];
if (this.metadataRecords.data) {
this.supportProductGroupOptions = this.metadataRecords.data.reduce((options, record) => {
if (record.supportIssueType === this.selectedSupportIssueType && options.indexOf(record.supportProductGroup) === -1) {
options.push(record.supportProductGroup);
}
return options;
}, []);
}
this.selectedSupportProductGroup = '';
}
handlesupportProductGroupChange(event) {
this.selectedSupportProductGroup = event.target.value || '';
if (this.metadataRecords.data) {
this.resolutionActionTakenOptions = this.metadataRecords.data.reduce((options, record) => {
if (record.supportProductGroup === this.selectedSupportProductGroup && options.indexOf(record.resolutionActionTaken) === -1) {
options.push(record.resolutionActionTaken);
}
return options;
}, []);
}
this.selectedResolutionActionTaken = '';
this.issueGroupOptions = [];
this.issueSubGroupOptions = [];
}
handleresolutionActionTakenChange(event) {
this.selectedResolutionActionTaken = event.target.value || '';
if (this.metadataRecords.data) {
this.issueGroupOptions = this.metadataRecords.data.reduce((options, record) => {
if (record.resolutionActionTaken === this.selectedResolutionActionTaken && options.indexOf(record.issueGroup) === -1) {
options.push(record.issueGroup);
}
return options;
}, []);
}
this.issueGroupOptions = [];
this.issueSubGroupOptions = [];
}
handleissueGroupChange(event) {
this.selectedIssueGroup = event.target.value || '';
if (this.metadataRecords.data) {
this.issueSubGroupOptions = this.metadataRecords.data.reduce((options, record) => {
if (record.issueGroup === this.selectedIssueGroup && options.indexOf(record.issueSubGroup) === -1) {
options.push(record.issueSubGroup);
}
return options;
}, []);
}
this.issueSubGroupOptions = [];
}
}
FieldMappings.html
<template>
<lightning-combobox
label="Support Product Category"
value={selectedSupportProductCategory}
options={supportProductCategoryOptions}
onchange={handlesupportProductCategoryChange}
description="Select a category from the list">
</lightning-combobox>
<lightning-combobox
label="Support Issue Type"
value={selectedSupportIssueType}
options={supportIssueTypeOptions}
onchange={handlesupportIssueTypeChange}
description="Select a category from the list">
</lightning-combobox>
<lightning-combobox
label="Support Product Group"
value={selectedSupportProductGroup}
options={supportProductGroupOptions}
onchange={handlesupportProductGroupChange}
description="Select a category from the list">
</lightning-combobox>
<lightning-combobox
label="Resolution/Action Taken"
value={selectedResolutionActionTaken}
options={resolutionActionTakenOptions}
onchange={handleresolutionActionTakenChange}
description="Select a category from the list">
</lightning-combobox>
<lightning-combobox
label="Issue Group"
value={selectedIssueGroup}
options={issueGroupOptions}
onchange={handleissueGroupChange}
description="Select a category from the list">
</lightning-combobox>
<lightning-combobox
label="Issue Sub-Group"
value={selectedIssueSubGroup}
options={issueSubGroupOptions}
onchange={handleissueSubGroupChange}
description="Select a category from the list">
</lightning-combobox>
FieldMappingsController.cls
public with sharing class FieldMappingsController {
@AuraEnabled(cacheable=true)
public static List<Field_Mapping__mdt> getPicklistMetadata() {
return [SELECT Support_Product_Category__c, Support_Issue_Type__c, Support_Product_Group__c, Resolution_Action_Taken__c, Issue_Group__c, Issue_Sub_Group__c FROM Field_Mapping__mdt];
}
}
Update I was able to resolve the error by updating this piece of the JavaScript file to use the API name of the property that would form the unique array:
@wire(getMetadataRecords)
metadataRecords({ error, data }) {
if (data) {
console.log(data)
this.supportProductCategoryOptions = Array.from(data).reduce((options, record) => {
// console.log(options, record.Support_Product_Category__c);
if (options.indexOf(record.Support_Product_Category__c) === -1) {
options.push(record.Support_Product_Category__c);
}
return options;
}, []);
console.log(this.supportProductCategoryOptions);
} else if (error) {
console.error(error);
}
}
However, now, I'm not seeing the unique values that are part of the supportProductCategorOptions array populating the options in the combobox - any thoughts around this?
Second Note
handlesupportProductCategoryChange(event) {
this.selectedSupportProductCategory = event.target.value || '';
console.log(this.selectedSupportProductCategory);
console.log(this.metadataRecords.data);
if (this.metadataRecords.data) {
this.supportIssueTypeOptions = [...new Set(data.map((record)=>record.Support_Issue_Type__c))].map((category)=>({label:category, value:category}));
console.log(this.supportIssueTypeOptions);
}
this.selectedSupportIssueType = '';
this.supportProductGroupOptions = [];
this.resolutionActionTakenOptions = [];
this.issueGroupOptions = [];
this.issueSubGroupOptions = [];
}
I'm noticing the 'console.log(this.metadataRecords.data);' is returning undefined in the log, but not sure why that would be the case since on the @wire call, for the console log I have for data, I'm seeing values for Support_Issue_Type__c
{
"Id": "m0i3J000000CdbaQAC",
"MasterLabel": "SD_8",
"DeveloperName": "SD_8",
"Support_Product_Category__c": "Environmental Sensor",
"Support_Issue_Type__c": "ES2 Data Not Updating",
"Support_Product_Group__c": "ES-2",
"Resolution_Action_Taken__c": "Transfer to Asset Tracking POD",
"Issue_Group__c": "Cell Modem",
"Issue_Sub_Group__c": "LTE Coverage"
}
