You need to sign in to do that
Don't have an account?
krios demo
How to disable the Lightning Button which is dynamically created In LWC
I have a below scenario in LWC
I have iterated the Lightning button with Label "Schedule" using for:each in table. When there are three product then buttons are generated for each product. when I click on first Schedule Button which index is "0" then when i create the record successfully and back to schedule for next product then previously clicked "Schedule" button which having "0" index should be disabled.
HTML:
<template if:true={BaseTable}>
<table>
<thead>
<tr style="text-align: center;">
<th style=" text-align: center; padding: 6px; border: 1px solid;" > Product Name </th>
<th style=" text-align: center; padding: 6px; border: 1px solid;" > Indent Quantity </th>
<th style=" text-align: center; padding: 6px; border: 1px solid;" > #### </th>
</tr>
</thead>
<tbody>
<template for:each={OrderItemData} for:item="item" for:index="index" >
<tr key={item.OrderId}>
<td style="text-align: center; padding: 6px; border: 1px solid;" > {item.Product2.Description} </td>
< td style="text-align: center; padding: 6px; border: 1px solid;" > {item.Quantity}</td>
<td style="padding: 6px; border: 1px solid">
<lightning-button class="slds-m-left_xx-small slds-align_absolute-center" variant="brand" label="Schedule" title="ScheduleProduct" onclick={handleProductSchedule} data-id={item.Product2Id}
data-name={item.Product2.Description} data-qty = {item.Quantity} disable = {DisableSchedule}
data-index = {index}></lightning-button></td>
</tr>
</template>
</tbody>
</table>
</template>
=====================================================
JS:
handleProductSchedule(event) {
this.productId = event.target.dataset.id;
this.productName = event.target.dataset.name;
this.productQty = event.target.dataset.qty;
const buttonindex = event.target.dataset.index;
event.target.disabled = true;
this.BaseTable = false;
this.ScheduleTable = true;
this.CreateScheduleEnabled = false;
console.log('Product ID:', this.productId);
console.log('Product Name:', this.productName);
console.log('Ordered Quantity :', this.productQty);
console.log("Current Products Button Index ==> ", buttonindex)
}
handlebackfunction() {
this.BaseTable = true;
this.ScheduleTable = false;
}
handleCreateSchedules(event){
var schQty = 0;
// Addition of all Schedule Quantity
for(var i = 0; i < this.itemList.length; i++){
schQty = parseInt(schQty) + parseInt(this.template.querySelector('[data-index = "' + i + '"]').value);
}
console.log('schQty', schQty);
console.log('productQty', this.productQty);
// checking schedule and indent Quantity same or not
if (schQty == this.productQty) {
console.log('Schedule Quantity Matches to Indent Quantity');
const scheduleRecords = [];
// Get all input data using querrySelectorAll
const inputFields = this.template.querySelectorAll('[data-inputs]');
let hasNullValues = false;
inputFields.forEach((input) => {
const ProdName = this.productName;
const ProdId = this.productId;
const indexing = input.dataset.index;
const fieldName = input.name;
const fieldValue = input.value;
// Check if Value of any field is Null
if (fieldValue === null || fieldValue === '') {
this.showToast('Error', 'Please enter a value for ' + fieldName, 'error');
hasNullValues = true;
} else {
const record = { indexing: indexing, ProdName: ProdName, ProdId: ProdId, [fieldName]: fieldValue};
// Check if a record with the same indexing already exists in scheduleRecords
const existingRecord = scheduleRecords.find((rec) => rec.indexing === indexing);
if (existingRecord) {
// Merge the new field and value into the existing record
existingRecord[fieldName] = fieldValue;
} else {
scheduleRecords.push(record);
}
}
});
if (!hasNullValues) {
console.log('scheduleRecords', scheduleRecords);
console.log("Schedule Creation Function before call");
// Call Save Method from Apex
SaveIndentSchedules({scheduleRecords, OrdId : this.recordId})
.then(result =>{
console.log('Record Saved Successfully');
console.log(result);
this.showToast('Success', 'Schedule Records Saved Successfully...', 'success');
this.CreateScheduleEnabled = true;
this.refreshApex(this.wiredScheduleData);
})
.catch(error => {
console.error('Error : Error Occured to Save The Records');
})
}
} else if (schQty > this.productQty){
this.showToast('Error', 'Schedule Quantity Exceeds Indent Quantity', 'Error');
}
else {
this.showToast('Error', 'Schedule Quantity Does Not Match Indent Quantity', 'Error');
console.error('Error: schQty does not equal productQty');
}
}
I have iterated the Lightning button with Label "Schedule" using for:each in table. When there are three product then buttons are generated for each product. when I click on first Schedule Button which index is "0" then when i create the record successfully and back to schedule for next product then previously clicked "Schedule" button which having "0" index should be disabled.
HTML:
<template if:true={BaseTable}>
<table>
<thead>
<tr style="text-align: center;">
<th style=" text-align: center; padding: 6px; border: 1px solid;" > Product Name </th>
<th style=" text-align: center; padding: 6px; border: 1px solid;" > Indent Quantity </th>
<th style=" text-align: center; padding: 6px; border: 1px solid;" > #### </th>
</tr>
</thead>
<tbody>
<template for:each={OrderItemData} for:item="item" for:index="index" >
<tr key={item.OrderId}>
<td style="text-align: center; padding: 6px; border: 1px solid;" > {item.Product2.Description} </td>
< td style="text-align: center; padding: 6px; border: 1px solid;" > {item.Quantity}</td>
<td style="padding: 6px; border: 1px solid">
<lightning-button class="slds-m-left_xx-small slds-align_absolute-center" variant="brand" label="Schedule" title="ScheduleProduct" onclick={handleProductSchedule} data-id={item.Product2Id}
data-name={item.Product2.Description} data-qty = {item.Quantity} disable = {DisableSchedule}
data-index = {index}></lightning-button></td>
</tr>
</template>
</tbody>
</table>
</template>
=====================================================
JS:
handleProductSchedule(event) {
this.productId = event.target.dataset.id;
this.productName = event.target.dataset.name;
this.productQty = event.target.dataset.qty;
const buttonindex = event.target.dataset.index;
event.target.disabled = true;
this.BaseTable = false;
this.ScheduleTable = true;
this.CreateScheduleEnabled = false;
console.log('Product ID:', this.productId);
console.log('Product Name:', this.productName);
console.log('Ordered Quantity :', this.productQty);
console.log("Current Products Button Index ==> ", buttonindex)
}
handlebackfunction() {
this.BaseTable = true;
this.ScheduleTable = false;
}
handleCreateSchedules(event){
var schQty = 0;
// Addition of all Schedule Quantity
for(var i = 0; i < this.itemList.length; i++){
schQty = parseInt(schQty) + parseInt(this.template.querySelector('[data-index = "' + i + '"]').value);
}
console.log('schQty', schQty);
console.log('productQty', this.productQty);
// checking schedule and indent Quantity same or not
if (schQty == this.productQty) {
console.log('Schedule Quantity Matches to Indent Quantity');
const scheduleRecords = [];
// Get all input data using querrySelectorAll
const inputFields = this.template.querySelectorAll('[data-inputs]');
let hasNullValues = false;
inputFields.forEach((input) => {
const ProdName = this.productName;
const ProdId = this.productId;
const indexing = input.dataset.index;
const fieldName = input.name;
const fieldValue = input.value;
// Check if Value of any field is Null
if (fieldValue === null || fieldValue === '') {
this.showToast('Error', 'Please enter a value for ' + fieldName, 'error');
hasNullValues = true;
} else {
const record = { indexing: indexing, ProdName: ProdName, ProdId: ProdId, [fieldName]: fieldValue};
// Check if a record with the same indexing already exists in scheduleRecords
const existingRecord = scheduleRecords.find((rec) => rec.indexing === indexing);
if (existingRecord) {
// Merge the new field and value into the existing record
existingRecord[fieldName] = fieldValue;
} else {
scheduleRecords.push(record);
}
}
});
if (!hasNullValues) {
console.log('scheduleRecords', scheduleRecords);
console.log("Schedule Creation Function before call");
// Call Save Method from Apex
SaveIndentSchedules({scheduleRecords, OrdId : this.recordId})
.then(result =>{
console.log('Record Saved Successfully');
console.log(result);
this.showToast('Success', 'Schedule Records Saved Successfully...', 'success');
this.CreateScheduleEnabled = true;
this.refreshApex(this.wiredScheduleData);
})
.catch(error => {
console.error('Error : Error Occured to Save The Records');
})
}
} else if (schQty > this.productQty){
this.showToast('Error', 'Schedule Quantity Exceeds Indent Quantity', 'Error');
}
else {
this.showToast('Error', 'Schedule Quantity Does Not Match Indent Quantity', 'Error');
console.error('Error: schQty does not equal productQty');
}
}
You can refer below stackexchange link which can help you:
https://salesforce.stackexchange.com/questions/399469/conditional-criteria-on-lightning-button-disabled-attribute-doesnt-work
Thanks.