Salesforce Asked by Sid Fortunato on August 12, 2020
I’m currently trying to do a mass update of records through the Data Table that includes inline editing. As I understand it’s not currently supported natively for Lookups in the Data Table. I attempted to do this from my end and sadly, there are very few examples of this online which is why I get lost easily.
My issue: I can’t seem to capture the record in that lookup field for my draft values. How do I include it in the draft values so I can do an update of multiple rows?
Here are my codes:
JS
import { updateRecord } from 'lightning/uiRecordApi';
@track refreshTable = [];
@track oppLines = [];
@track draftValues = [];
@track columns = COLS;
const COLS = [
{ // This is the column for the custom lookup
label: 'Product', fieldName: 'ParentId', type: 'lookup', required: true,
typeAttributes: {
placeholder: 'Select Product',
uniqueId: { fieldName: 'Id' }, //pass Id of current record to lookup for context
object: "Product__c",
icon: "standard:account",
label: "Product",
displayFields: "Name",
displayFormat: "Name",
filters: ""
}
},
{ label: 'Product Code', fieldName: 'Code', editable: false },
{ label: 'Product Description', fieldName: 'Description', editable: false },
// ... more lines of code here ...
];
…
// This is the Save event
handleSave(event) {
const recordInputs = event.detail.draftValues.slice().map(draft => {
const fields = Object.assign({}, draft);
return { fields };
});
const promises = recordInputs.map(recordInput => updateRecord(recordInput));
Promise.all(promises).then(contacts => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Records updated',
variant: 'success'
})
);
// Clear all draft values
this.draftValues = [];
// Display fresh data in the datatable
return refreshApex(this.refreshTable);
}).catch(error => {
// Handle error
});
}
//listener handler to get the context and data
//updates datatable
handleSelection(event) {
event.stopPropagation();
let dataRecieved = event.detail.data;
let updatedItem = { Id: dataRecieved.key, ParentId: dataRecieved.selectedId };
this.updateDraftValues(updatedItem);
this.updateDataValues(updatedItem);
}
…
updateDataValues(updateItem) {
let copyData = [... this.data];
copyData.forEach(item => {
if (item.Id === updateItem.Id) {
for (let field in updateItem) {
item[field] = updateItem[field];
}
}
});
//write changes back to original data
this.data = [...copyData];
}
updateDraftValues(updateItem) {
let draftValueChanged = false;
let copyDraftValues = [...this.draftValues];
//store changed value to do operations
//on save. This will enable inline editing &
//show standard cancel & save button
copyDraftValues.forEach(item => {
if (item.Id === updateItem.Id) {
for (let field in updateItem) {
item[field] = updateItem[field];
}
draftValueChanged = true;
}
});
if (draftValueChanged) {
this.draftValues = [...copyDraftValues];
} else {
this.draftValues = [...copyDraftValues, updateItem];
}
}
HTML
<template>
<lightning-card title="Edit Products" icon-name="standard:opportunity">
<div class="slds-m-around_large" style="height: 400px;">
<template if:true={oppLines}>
<c-custom-data-table
key-field="id"
data={oppLines}
columns={columns}
onsave={handleSave}
draft-values={draftValues}
onvalueselect={handleSelection}>
</c-custom-data-table>
</template>
<template if:true={error}>
<p>{oppLines.error}</p>
</template>
</div>
</lightning-card>
<div>
{loadMoreStatus}
</div>
</template>
Any help is very much appreciated! If there are any more examples of LWC DataTable with Custom Lookup I could take a look into, please feel free to share. Thanks!
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP