How to Use a Picklist in a for:each Loop in LWC?

Question

I have a requirement to display and edit records in a table. These records need to be saved and will also be used to create different objects.

Currently, I am using the following code, which works for displaying and editing fields. However, I have two questions:

1. How can I display the Status field as a picklist instead of a regular input field?
2. How can I update the record when a field is changed?

Here is my current Lightning Web Component (LWC) template:

<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-input label="Status" value={oppProd.Status__c} data-field="Status" onchange={handleStatusChange} class="slds-m-bottom_x-small"></lightning-input>
        </td>
        <td>
            <lightning-input label="Estimated Contracts" value={oppProd.Estimated_Conctracts__c} data-field="contracts" onchange={handleChange} class="slds-m-bottom_x-small"></lightning-input>
        </td>
        <td>
            <lightning-input label="Estimated Members" value={oppProd.Estimated_Members__c} data-field="members" onchange={handleChange} class="slds-m-bottom_x-small"></lightning-input>
        </td>
    </tr>
</template>

Answer

In this solution, we address the need to display a picklist for the Status field within a for:each loop in a Lightning Web Component (LWC). We replace the standard lightning-input with lightning-combobox and show how to fetch picklist values dynamically using the getPicklistValues wire adapter. Additionally, we explain how to handle updates to the record when any field value is changed.

To display the Status field as a picklist, replace lightning-input with lightning-combobox. You also need to fetch the picklist values dynamically in the JavaScript controller.

Enroll at CRS Info Solutions, a premier Salesforce online training institute. Book your free demo session now and start your journey to mastering Salesforce!

Updated HTML

<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" options={statusOptions} 
                data-index={index} onchange={handleStatusChange} class="slds-m-bottom_x-small">
            </lightning-combobox>
        </td>
        <td>
            <lightning-input label="Estimated Contracts" value={oppProd.Estimated_Conctracts__c} data-field="contracts" 
                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="members" 
                data-index={index} onchange={handleChange} class="slds-m-bottom_x-small"></lightning-input>
        </td>
    </tr>
</template>

Explanation: The code snippet displays a list of records in a table using a for:each directive in Lightning Web Components (LWC). Each row includes inputs for “Name,” “Estimated Contracts,” and “Estimated Members,” with “Status” represented as a lightning-combobox for selecting picklist values dynamically. The onchange event handlers (handleStatusChange and handleChange) capture updates to the records for further processing.

Updated JavaScript

import { LightningElement, wire, track } from 'lwc';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import OPP_OBJECT from '@salesforce/schema/ObjectName';  // Replace with your object API name
import STATUS_FIELD from "@salesforce/schema/ObjectName.Status__c";  // Replace with your field API name

export default class YourComponentName extends LightningElement {
    @track oppProds = []; 
    @track statusOptions = [];

    @wire(getObjectInfo, { objectApiName: OPP_OBJECT })
    oppMetadata;

    @wire(getPicklistValues, { recordTypeId: "$oppMetadata.data.defaultRecordTypeId", fieldApiName: STATUS_FIELD })
    picklistResults({ error, data }) {
        if (data) {
            this.statusOptions = data.values;
        } else if (error) {
            console.error(error);
            this.statusOptions = [];
        }
    }

    handleStatusChange(event) {
        const index = event.target.dataset.index;
        this.oppProds[index].Status__c = event.detail.value;
    }

    handleChange(event) {
        const index = event.target.dataset.index;
        const field = event.target.dataset.field;
        this.oppProds[index][field] = event.detail.value;
    }
}

Explanation: This Lightning Web Component (LWC) dynamically fetches and displays picklist values for the Status__c field using lightning-combobox. It retrieves the picklist options with getPicklistValues, using the object’s metadata from getObjectInfo, and updates the statusOptions array. The handleStatusChange and handleChange methods update the respective fields in the oppProds array when the user selects a new value.

See Also : Mastering JavaScript Methods for LWC and Aura Components

Alternative Approach

If you don’t want to fetch picklist values dynamically, you can define them statically in your JavaScript file:

@track statusOptions = [
    { label: 'Open', value: 'Open' },
    { label: 'Closed', value: 'Closed' },
    { label: 'Pending', value: 'Pending' }
];

Explanation: The @track statusOptions variable is an array of objects, where each object represents an option in a picklist with label (display text) and value (stored value). This is used to populate a <lightning-combobox> in LWC, allowing users to select from predefined status values. The @track decorator ensures that changes to this array trigger reactivity, updating the UI dynamically.

Summing Up

To display a picklist field in a for:each loop using Lightning Web Components, you should replace lightning-input with lightning-combobox and dynamically fetch the picklist values either using the getPicklistValues wire adapter or define them statically in your JavaScript. Additionally, to update a record when a field is changed, capture the updated value using the onchange event and update the relevant record in your data array. This approach ensures that the picklist values are displayed correctly and allows for efficient record updates in the component.

Boost Your Salesforce Skills with Expert Training in Kolkata

Take your Salesforce expertise to the next level with a specialized Salesforce course in Kolkata, designed for both beginners and experienced professionals. Learn from certified instructors with industry experience and gain practical knowledge through real-world projects. Whether you’re aiming to master cloud-based CRM solutions or advance your career, this comprehensive program equips you with the skills and confidence to thrive in the Salesforce ecosystem.

CRS Info Solutions offers top-tier Salesforce training in Kolkata, featuring a hands-on, project-based curriculum. Explore Salesforce Admin, Developer, Integration, Marketing Cloud, CPQ, and Lightning Web Components (LWC) with personalized instruction and engaging sessions.

Sign up today for a free demo at CRS Info Solutions and take the first step toward unlocking exciting career opportunities in Salesforce!!!

Related Posts:

• What are Lightning Web Components?
  
• Component Composition in LWC