Thursday 24 February 2022

[Resolved:] Set value of the picklist field for the selected records to mass update in lightning web component.


While working on one of the requirements for a manufacturing sector solutions customer based out in Dallas, Texas there was a requirement to set selected value of picklist field to mass update of records in lightning web component.


We have achieved this functionality of setting the value of picklist by creating  custom lightning web component. We have used custom javascript functions to update mass records. 

However, we got stuck with the issue of updating records for the selected value. 


To fulfill this requirement,we decided to create custom javascript functions to select multiple files and to assign values to each files. 

Below is a sample code for reference.

HTML Code:-

      <lightning-card title="Account List"> 
        <div class="slds-m-around_medium" >

        <div class='slds-grid slds-gutters'>
          <div class='slds-col'>
            <lightning-input type="checkbox" onchange={handleSelectAllIndustryChk}
                             label="Select All" data-id="selectAllIndustry">

         <template for:each={accounts} for:item="account" for:index="index">
          <div class='slds-grid slds-gutters' key={account.Name}>
            <div class='slds-col slds-m-top_large slds-size_1-of-7'>
              <lightning-input type="checkbox" name={account.Name} data-class="cus_IndustryHelper"
              onchange={handleIndustryCheckbox} data-id='IndustryTypeChk'>
              <div class='slds-col slds-size_3-of-7'>
                <lightning-input label="Account Name" type="text" value={account.Name}
              <div class='slds-col slds-size_3-of-7'>
                <lightning-combobox name={account.Name} label="Industry" data-id={account.Name}
                                    class="picklistContent"  dropdown-alignment="auto"
                                    placeholder="Select account Type" options={}
                                    onchange={handleIndustrySelectionChange} required>

JavaScript Code:-

import { LightningElement, api, wire, track } from 'lwc';
import AccountList from '@salesforce/apex/AccountController.AccountList';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import Account_OBJECT from '@salesforce/schema/Account';
import Industry_FIELD from '@salesforce/schema/Account.Industry';
export default class DataTableInLwc extends LightningElement {
    @track accounts=[];
    @track selectedIndustryValues=[];

          console.log('Data not found');

    @wire(getObjectInfo, { objectApiName: Account_OBJECT })




            recordTypeId: '$',

            fieldApiName: Industry_FIELD




    handleSelectAllIndustryChk(event) {
    this.selectedIndustryValues = [];
    var checkboxes = this.template.querySelectorAll('[data-id="IndustryTypeChk"]');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked =; ? this.selectedIndustryValues.push(checkboxes[i].name) : '';

        handleIndustryCheckbox(event) {
            if ( {
                let checkboxes = this.template.querySelectorAll('[data-class="cus_IndustryHelper"]');
                let length = 0;
                for (var i = 0; i < checkboxes.length; i++) {
                    (checkboxes[i].checked == true) ? length = length + 1: length = length - 1;
                ((checkboxes.length) == length) ? this.template.querySelectorAll('[data-id="selectAllIndustry"]')[0].checked = true: this.template.querySelectorAll('[data-id="selectAllIndustry"]')[0].checked = false;
            } else {
                this.selectedIndustryValues.splice(this.selectedIndustryValues.indexOf(, 1);
                this.template.querySelectorAll('[data-id="selectAllIndustry"]')[0].checked = false;
                length -= 1;
            if (this.selectedIndustryValues.indexOf( != -1) {
                for (var i = 0; i < this.selectedIndustryValues.length; i++) {
                var selected = this.template.querySelectorAll('[data-id="' + this.selectedIndustryValues[i] + '"]')[0];
                selected.value =;


  • handleSelectAllIndustryChk:- By clicking select all checkbox it will check all the checkboxes.
  • handleIndustryCheckbox:- Checks for checkboxes to see whether it is selected or
  • handleIndustrySelectionChange:- Used when value is selected from the picklist 
    and assigns that value to each and every selected picklist.

Apex Class:-

public with sharing class AccountController {
    public static List<Account> AccountList() {
        return [SELECT Id, Name ,Industry FROM Account LIMIT 5 ];


By using above mentioned javascript functions, We are able to set selected value of picklist field based for bulk/mass update records in lightning web component.

If you have any questions you can reach out our Salesforce Consulting team here.

No comments:

Post a Comment