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.
CHALLENGE
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.
APPROACH
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:-
<template> <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"> </lightning-input> </div> </div> <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'> </lightning-input> </div> <div class='slds-col slds-size_3-of-7'> <lightning-input label="Account Name" type="text" value={account.Name} disabled="true"> </lightning-input> </div> <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={IndustryPicklist.data.values} onchange={handleIndustrySelectionChange} required> </lightning-combobox> </div> </div> </template> </div> </lightning-card> </template>
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=[]; @wire(AccountList) wiredfiles(result){ if(result.data){ this.accounts=result.data; } else{ console.log('Data not found'); } } @wire(getObjectInfo, { objectApiName: Account_OBJECT }) AccountMetadata; @wire(getPicklistValues, { recordTypeId: '$AccountMetadata.data.defaultRecordTypeId', fieldApiName: Industry_FIELD } ) IndustryPicklist; handleSelectAllIndustryChk(event) { this.selectedIndustryValues = []; var checkboxes = this.template.querySelectorAll('[data-id="IndustryTypeChk"]'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = event.target.checked; event.target.checked ? this.selectedIndustryValues.push(checkboxes[i].name) : ''; } } handleIndustryCheckbox(event) { if (event.target.checked) { this.selectedIndustryValues.push(event.target.name); 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(event.target.name), 1); this.template.querySelectorAll('[data-id="selectAllIndustry"]')[0].checked = false; length -= 1; } } handleIndustrySelectionChange(event) { if (this.selectedIndustryValues.indexOf(event.target.name) != -1) { for (var i = 0; i < this.selectedIndustryValues.length; i++) { var selected = this.template.querySelectorAll('[data-id="' + this.selectedIndustryValues[i] + '"]')[0]; selected.value = event.target.value; } } } }
handleSelectAllIndustryChk:- By clicking select all checkbox it will check all the checkboxes.
handleIndustryCheckbox:- Checks for checkboxes to see whether it is selected or
unselected.
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 { @AuraEnabled(cacheable=true) public static List<Account> AccountList() { return [SELECT Id, Name ,Industry FROM Account LIMIT 5 ]; } }
OUTPUT:-
CONCLUSION
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.
