0

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:

enter image description here

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?

enter image description here

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"
}

1 Answer 1

0

If you look at the documentation, you'll see that description is not a valid attribute for lightning-combobox. The description attribute is a property you can add to an individual element in the list of options:

statusOptions = [
    { value: 'new', label: 'New', description: 'A new item' },
    {
        value: 'in-progress',
        label: 'In Progress',
        description: 'Currently working on this item',
    },
    {
        value: 'finished',
        label: 'Finished',
        description: 'Done working on this item',
    },
];
10
  • So, then does this description attribute need to be removed from the .html file, or do I need to add the code you've provided somewhere? @sfdcfox Mar 17 at 13:56
  • @AlysonCarralez The description needs to be removed from the template; that is what throws the error here. The LWC framework validates all of the attributes on a component, and providing an attribute that doesn't exist causes the error.
    – sfdcfox
    Mar 17 at 14:10
  • Do you know why I would still be getting the same error even when removing the 'description' from the template @sfdcfox? Mar 17 at 14:45
  • @AlysonCarralez Check your data. My best guess is that you have a null/undefined option in your list of options that's causing the render function to fail.
    – sfdcfox
    Mar 17 at 16:05
  • I was able to resolve the component error (see Update note in question body) but I'm noticing the unique values aren't visible in the options for the combobox. I can select the drop-down, but don't see the values. I have set 'supportProductCategoryOptions' in the .js file and defined the options attribute in the .html as the same - @sfdcfox Mar 17 at 16:43

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.