Custom picklist field in Salesforce LWC not able to Save and not able to access updated value (Default Save button not appearing)

Question

I successfully implemented Custom Picklist field functionality using Salesforce LWC. All values from picklist are loading properly in drop down. But when trying to save records after drop down change, deafult Save button not appearing. And If I am trying to change other field and clicking Save , then only updated value from standard field is accessing through event.detail.draftValues.

Any of modification to custom picklist field not gives the Save button to appear and also not able to retrieve in event.detail.draftValues.

LWC main component html file for displaying data like the following,

<template>
  <c-custom-nationality-pick-list 
  key-field="Id" 
  data={data} 
  show-row-number-column 
  onsave={handleSave}
  hide-checkbox-column 
  columns={columns}
  onrowaction={handleRowAction}
  >
  </c-custom-nationality-pick-list >
</template>

And my .js file function code which handling on save like the following,

  handleSave(event){
  //gives values for all standard fields  , but not custom field changed value
  const updateFields  = event.detail.draftValues; 
  console.log(updateFields);
  }

Here updateFields not gives the updating value of custom picklist field. Its only giving the standard field values. Even while changing to new value , default save button also not appearing.

And custom picklist field defined in my main .js file like the following,

const COLUMNS = [

{ 
  name : 'Nationality' ,
  label : 'Nationality',
  fieldName: 'nationality__c',
  type: 'nationalityPicklist',
  placeholder : 'Choose Nationality',
  typeAttributes: {
    
    value: { fieldName: 'nationality__c' },
    options: { fieldName: 'nationalityOptionsList' },
    
    },
    wrapText: true,
    editable:true
},

{ 
  label: 'Age', fieldName: 'age__c',editable:true
},

{
    type: 'button',
    typeAttributes: { label: 'Delete', name: 'delete' }
}
]

Here , while accessing rest of fields giving the values. But changed value from custom picklist filed is not reflecting in event.detail.draftValues

My custom picklist field defined in the template nationalityPicklist.html ,

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

My custom component CustomNationalityPickList.js extends Datatable is like the following

export default class CustomNationalityPickList extends LightningDatatable {
static customTypes = {
    nationalityPicklist: {
        template: nationalityPicklist,
        standardCellLayout: true,
        typeAttributes: ['value', 'options']
    }
 };
}

NB: When I am changing the nationality value, default cancel/Save buttons are not appearing . But When I changes any other standard fields I am able to edit and save also.

While editing custom picklist filed , why Save button not appears?
Why Custom picklist field not able to save?

Can anyone guide me to resolve the issue and to understand where I went with wrong implementation here. Please suggest any documentation to refer ?

score 0 · Answer 1 · answered May 25 '23 at 06:53

Create one lightning web component for creating custom picklist by extedning LightningDatatable. And will get CustomNationalityPickList as component and inside that will get .js file, .html file and one -meta.xml file.

Now additionally to define custom component field type , additionally create 2 html files called nationalityPicklist.html and nationalityPicklistEdit.html.

nationalityPicklistEdit.html

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

nationalityPicklist.html

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

Custom component auto generated html file while creating lwc component keep like that only without adding any code. Now modify your custom component .js file like the following,

import LightningDatatable from 'lightning/datatable';
import nationalityPicklist from './nationalityPicklist.html';
import nationalityPicklistEdit from './nationalityPicklistEdit.html';

export default class CustomNationalityPickList extends LightningDatatable {
 static customTypes = {
    nationalityPicklist: {
       template: nationalityPicklist,
       editTemplate: nationalityPicklistEdit,
       standardCellLayout: true,
       typeAttributes: ['value', 'options']
     }
  };
  }

Define your main component .js file with type of picklist field by using the following structure,

const COLUMNS = [
  { 
    name : 'Nationality' ,
    label : 'Nationality',
    fieldName: 'nationality__c',
    type: 'nationalityPicklist',
    placeholder : 'Choose Nationality',
    typeAttributes: {
       value: { fieldName: 'nationality__c' },
       options: { fieldName: 'nationalityOptionsList' },
     },
     wrapText: true,
     editable:true
     },
     { 
       label: 'Age', fieldName: 'age__c',editable:true
      },
      {
       type: 'button',
       typeAttributes: { label: 'Delete', name: 'delete' }
      }
 ]

And Loop in your main component with defining tag as the same name with the custom component name,

<template>
<c-custom-nationality-pick-list 
  key-field="Id" 
  data={data} 
  show-row-number-column 
  onsave={handleSave}
  hide-checkbox-column 
  columns={columns}
  onrowaction={handleRowAction}>
</c-custom-nationality-pick-list>

Custom picklist field in Salesforce LWC not able to Save and not able to access updated value (Default Save button not appearing)

1 Answers1