When working with editable records in Lightning Web Components (LWC), you may run into situations where you want to display fields in a table-like structure, iterate over them using for:each, and allow users to edit certain fields. For text or number fields, the lightning-input component works fine, but for a picklist field you need to use lightning-combobox. The main challenge here is twofold: first, how to render a picklist dynamically, and second, how to handle updates when the user changes values in any field.
The best solution for rendering picklist fields in LWC is by using lightning-combobox. Salesforce provides a wire adapter called getPicklistValues which fetches picklist values for a specific field, based on its record type. With this, you can bind picklist values to the options attribute of lightning-combobox. Once a user makes a selection, you can capture the change event and update your list of records accordingly.
Here is how you can modify your component:
<template for:each={oppProds} for:item="oppProd" for:index="index">
<tr key={oppProd.Id}>
<td>
<lightning-input
label="Name"
value={oppProd.Name}
data-field="Name"
disabled="true"
class="slds-m-bottom_x-small">
</lightning-input>
</td>
<td>
<lightning-combobox
label="Status"
value={oppProd.Status__c}
data-field="Status__c"
data-index={index}
options={statusOptions}
onchange={handleStatusChange}
class="slds-m-bottom_x-small">
</lightning-combobox>
</td>
<td>
<lightning-input
label="Estimated Contracts"
value={oppProd.Estimated_Conctracts__c}
data-field="Estimated_Conctracts__c"
data-index={index}
onchange={handleChange}
class="slds-m-bottom_x-small">
</lightning-input>
</td>
<td>
<lightning-input
label="Estimated Members"
value={oppProd.Estimated_Members__c}
data-field="Estimated_Members__c"
data-index={index}
onchange={handleChange}
class="slds-m-bottom_x-small">
</lightning-input>
</td>
</tr>
</template>
In this HTML snippet, we iterate through the oppProds list and render each record row by row. The lightning-input is used for non-picklist fields like Name, Contracts, and Members, while lightning-combobox is used for the Status field. The options={statusOptions} dynamically binds picklist values fetched from Salesforce. The data-index={index} tracks the row number so the controller knows which record is being edited. Each input has an onchange event that calls the appropriate handler to update the JavaScript model when a user modifies a field.
The corresponding JavaScript controller would look like this:
import { LightningElement, wire, track } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import OPP_OBJECT from '@salesforce/schema/OpportunityLineItem'; // Replace with your object
import STATUS_FIELD from "@salesforce/schema/OpportunityLineItem.Status__c"; // Replace with your picklist field
export default class EditableTableWithPicklist extends LightningElement {
@track oppProds = [];
@track statusOptions = [];
// Fetch object metadata
@wire(getObjectInfo, { objectApiName: OPP_OBJECT })
oppMetadata;
// Fetch picklist values based on record type
@wire(getPicklistValues, {
recordTypeId: "$oppMetadata.data.defaultRecordTypeId",
fieldApiName: STATUS_FIELD
})
picklistResults({ error, data }) {
if (data) {
this.statusOptions = data.values;
} else if (error) {
console.error('Error fetching picklist values', error);
}
}
handleStatusChange(event) {
const field = event.target.dataset.field; // Status__c
const value = event.detail.value; // Selected value
const index = event.target.dataset.index; // Record index
this.oppProds[index][field] = value;
}
handleChange(event) {
const field = event.target.dataset.field;
const value = event.detail.value;
const index = event.target.dataset.index;
this.oppProds[index][field] = value;
}
}
This JavaScript snippet handles both picklist and non-picklist updates. The @wire(getObjectInfo) fetches metadata about the object, including record type IDs. The @wire(getPicklistValues) fetches picklist values dynamically for the Status field and assigns them to statusOptions, which the combobox uses. In the handleStatusChange function, the code uses dataset.field and dataset.index to update the correct record in the oppProds array with the new Status value. Similarly, handleChange is used for text and numeric fields, updating the array with new input values so the UI stays in sync with the data.
Alternative Approaches
If you don’t want to use getPicklistValues, you can also define picklist options statically in your JavaScript file like this:
statusOptions = [
{ label: 'Open', value: 'Open' },
{ label: 'In Progress', value: 'In Progress' },
{ label: 'Closed', value: 'Closed' }
];
This static JavaScript snippet defines an array of picklist options manually. Each option is an object with label for what the user sees and value for what gets stored in Salesforce. The combobox will use this array as its source instead of pulling from Salesforce metadata. While this method works well for small, fixed picklists, it does not adapt to changes in Salesforce setup, meaning any updates to picklist values in Salesforce must also be manually updated in the code, which makes it less scalable.
Final Thoughts
By using lightning-combobox together with getPicklistValues, you can easily render picklist fields in a loop with for:each. Handling the change events with data-field and data-index makes it straightforward to update the correct record in memory. After collecting all changes, you can send the modified oppProds array back to Apex for saving into the database. This design ensures your LWC component remains scalable, dynamic, and aligned with Salesforce metadata.
Job-Oriented Salesforce Course with Real-Time Projects and Money Back Guarantee
Our Salesforce course is structured to provide a deep understanding of the Salesforce platform, equipping you with essential skills to thrive in the CRM industry. The program includes key modules like Salesforce Admin, Developer, and AI, seamlessly integrating theoretical concepts with hands-on training. By working on real-world projects and practical exercises, you’ll develop the expertise to solve complex business challenges using Salesforce solutions. Our expert instructors ensure you gain both technical proficiency and industry insights to excel in the Salesforce ecosystem.
Beyond technical skills, our Salesforce training in Hyderabad offers personalized mentorship, certification assistance, and interview preparation to boost your career prospects. You’ll have access to extensive study materials, live project exposure, and dedicated support throughout your learning journey. By the end of the course, you’ll be fully prepared for certification exams and real-world challenges, equipped with the problem-solving abilities that employers seek. Kick-start your Salesforce career with us and unlock exciting opportunities. Enroll for a Free Demo today!
Leave a Reply
You must be logged in to post a comment.