1

We are trying to implement field dependency in custom picklist field type with LWC. For this I created one LWC component to define custom lightning datatable. And I am using custom picklist fileds which are dependent. Dependent fields are country and state. When changing country , automatically depended state need to load in custom picklist.

For this , From custom picklist onchange method, I am generating and sending one custom event to my main component by passing changed country value. But getting [NoErrorObjectAvailable] Script error with showing This page has an error. You might just need to refresh it. messsage while loading component,

Error Message

[NoErrorObjectAvailable] Script error. newErrorHandler()@https://static.lightning.force.com/ap24/auraFW/javascript/wyQWsVjjDIx-Xsqekbsbwg/aura_proddebug.js:67451:14 errorHandlerWrapper()@https://static.lightning.force.com/ap24/auraFW/javascript/wyQWsVjjDIx-Xsqekbsbwg/aura_proddebug.js:67467:25 dispatchEvent()@https://static.lightning.force.com/ap24/auraFW/javascript/wyQWsVjjDIx-Xsqekbsbwg/aura_proddebug.js:12804:25 LightningCombobox.dispatchEvent()@https://static.lightning.force.com/ap24/auraFW/javascript/wyQWsVjjDIx-Xsqekbsbwg/aura_proddebug.js:6928:18 LightningCombobox.value [as dispatchEvent]()@https://static.lightning.force.com/ap24/auraFW/javascript/wyQWsVjjDIx-Xsqekbsbwg/aura_proddebug.js:6172:48 LightningCombobox.handleSelect()@https://milletechdatasoftsystempvtl-

Error screen

enter image description here

My added .js code for sending controlling field format like the following,

 @wire(getObjectInfo, { objectApiName: myRegObject })
objectInfo;

  @wire(getPicklistValues, 
    {recordTypeId: "$objectInfo.data.defaultRecordTypeId",fieldApiName: countryField})
wireCountryPickList({ error, data }) 
    {
      if (data) {
          this.countryOptions = data.values;
      } 
      else if (error) {
          console.log(error);
      }
  }

  @wire(getPicklistValues, 
    {
      recordTypeId: "$objectInfo.data.defaultRecordTypeId",
      fieldApiName: stateField,
      controllingFieldValue: '$data.country__c'
    })
wireStatePickList({ error, data }) 
    {
      if (data) {
          this.allStateOptions = data.values;
         
      } 
      else if (error) {
          console.log(error);
      }
  }

@wire(getRegDetails, { pickList: '$countryOptions' })
result(result){
  
  let sRObj = JSON.parse(JSON.stringify(result));
  this.sDetails = sRObj.data;    
    try
      {
        this.sDetails.forEach(ele => {
          ele.countryOptionsList = this.countryOptions;
          ele.stateOptionsList = this.allStateOptions;
          })
      }
    catch(err) {
        console.log(err.message);
    }
} 


 handleControllingChange(event) {

     const selectedCountry = event.detail.value;
     console.log(selectedCountry);     
     this.stateOptions = this.allStateOptions
                        .filter(option => option.validFor.includes(selectedCountry));

     this.sDetails.forEach(ele => {
      ele.stateOptionsList = this.stateOptions;
      })
  
  }

And I am defining custom field in same .js file like the fllowing,

const COLUMNS = [
{ 
  label : 'Country',
  fieldName: 'country__c',
  name : 'Country' ,
  placeholder : 'Choose Country',
  type: 'countryPicklist',
  typeAttributes: {
    value: { fieldName: 'country__c' },
    options: { fieldName: 'countryOptionsList' },
    },
  editable: true,
  context: { fieldName: 'Id' }
},
{ 
  label : 'State',
  fieldName: 'state__c',
  name : 'State' ,
  placeholder : 'Choose State',
  type: 'statePicklist',
  typeAttributes: {
    value: { fieldName: 'state__c' },
    options: { fieldName: 'stateOptionsList' },
    },
  editable: true,
  context: { fieldName: 'Id' }
},
{
    type: 'button',
    typeAttributes: { label: 'Delete', name: 'delete' }
}
]

And My custom picklist field created by extending LightningDatatable like the following,

import LightningDatatable from 'lightning/datatable';

import countryPicklist from './countryPicklist.html';
import countryPicklistEdit from './countryPicklistEdit.html';
import statePicklist from './statePicklist.html';
import statePicklistEdit from './statePicklistEdit.html';


export default class CustomDataTable extends LightningDatatable {

static customTypes = {
    
     countryPicklist: {
        template: countryPicklistEdit,
        editTemplate: countryPicklist,
        standardCellLayout: true,
        typeAttributes: ['options', 'value']
    },
    statePicklist: {
        template: statePicklistEdit,
        editTemplate: statePicklist,
        standardCellLayout: true,
        typeAttributes: ['options', 'value']
    }
};
handleCountryChange(event) {
   
     const selectedCountry = event.detail.value;
console.log(selectedCountry);
this.dispatchEvent(new CustomEvent('countrychange', {detail: selectedCountry}));
}
}

Field Templates I am using for picklist custom type like the following, countryPicklistEdit.html,

   <template>
    <span class="slds-truncate" title={value}>{value}</span>
   </template>

countryPicklist.html,

  <template>
    <lightning-combobox 
    name='picklist' 
    label='Country'
    placeholder='Choose Country' 
    value={typeAttributes.value}
    options={typeAttributes.options}
    onchange={handleCountryChange}
    data-inputable="true"
    dropdown-alignment="auto"
    variant='label-hidden'>
   </lightning-combobox>
 </template>

And I am displaying data in my main html file like the following,

<template>
  <c-custom-data-table
     key-field="Id" 
     data={sDetails} 
     show-row-number-column 
     onsave={handleSave}
     oncountrychange={handleControllingChange}
     hide-checkbox-column 
     columns={columns}
     onrowaction={handleRowAction}>
   </c-custom-data-table>
</template>

Custom Object Definition already added field dependencies for Country to State fields. Problem here because of custom picklist.

Troubleshooted Way -

  1. At custom component .js file, to cross check whether event.detail has any problem or not by keeping one constant value to selectedCountry and passed by creating custom event. But not working.

  2. Cross checked the naming convention while creating and sending custom events from child to parent.

  1. Tested whether simple test messages using console.log statement. Even nothing printing. When changes country value to different value, immediately shows the error screen.

Problem I felt here with the onchange method defined for custom datatable , while changing country value to different value. Error page shows immediately after I changes country value.

So can anyone suggest or guide to fix this current code for implementing field dependency or please refer any another documentation to follow.

2
  • Can you please add some more input on this requirement. I have few questions to clarify. Here are those : 1. Do you have custom Controlling picklist Field and Dependent picklist field in object? 2. Do you have data on those two picklist field? Please share those two details. SO that I can try to add my solution.. Thanks. Commented Jun 2, 2023 at 12:07
  • Thank you for your response. Yes I have controlling field and dependant field in my object. and I have data . And properly added field dependencies.
    – Mr.DevEng
    Commented Jun 2, 2023 at 12:16

1 Answer 1

0

Here is some code snippet you can try to display Controlled field and related dependent picklist in LWC

@wire(getPicklistValuesByRecordType, {objectApiName:OBJECTAPINAME, recordTypeId:'$recordTypeId'})
    leadPicklistHandler({data,error}){
        if(data){
            this.optionsIdType = this.dependantFieldsHandler(data.picklistFieldValues.Controlled_field_name__c, controlling_field_data);
        }else if(error){
            console.log(error)
        }
    }

    dependantFieldsHandler(data, selectedValue){
      let key = data.controllerValues[selectedValue];
      let dependantFields = data.values.filter(opt => opt.validFor.includes(key));
      return dependantFields.map(item=>({ label: item.label, value: item.value}));
    }

Please let me know if you need any more help

4
  • I tried the same functionality using country and state dependencies. Can you go through updated code and please suggest how I need to manage state while country value changing to different.
    – Mr.DevEng
    Commented Jun 6, 2023 at 10:24
  • You have to created a separate component for Edittemplate and then invoke that component in your customdatatable PicklistEdit.html markup. Then you can handle the event in Parent component where you are using custom datatable component. If you need any help please ping me. It is working as expected Commented Jun 12, 2023 at 10:52
  • Thank you for your response sir. I did not properly understood your statement. Now my countryPicklistEdit.html having code for template which holds the span with defined value for combobox. So If I need to create separate component means, Do I need to create separate separate components for each edit? Can you give little bit more info please ?
    – Mr.DevEng
    Commented Jun 12, 2023 at 11:07
  • Yes, you have to create separate components for the same. beacuse you have dispachted the event from Combobox. and handle it to you main component Commented Jun 13, 2023 at 12:38

You must log in to answer this question.

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