You need to sign in to do that
Don't have an account?
Pavushetti Abhilash 3
SLDS table INLINE edit. Updating records only after reloading page. Should update without reload page.
Hi folks.
I did the INLINE EDITING in SLDS table LWC. When user updated the record with INLINE EDITING and clicks on SAVE the record not updating. Record updates only when we RELOAD THE PAGE. Record should update as soon as user click on save. Please help me regarding this. Refer below HTML and JS code. Let me know any change in refreshApex()..
-------------------HTML-------------------
<template>
<div class="slds-m-bottom_large">
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_4-of-5" style='font-weight: 500;font-size: 18px'>
<span>RMA Case Line Item History</span>
</div>
</div>
</div>
<div class="landingpagebody">
<lightning-card title="">
<div class="slds-m-top_large">
<lightning-datatable draft-values={draftValues}
show-row-number-column
onsave={handleSave}
key-field="Id"
data={rmarecord}
columns={columns}
onrowselection={updateSelected}
oncellchange={cellChange}
onclick={navRecordpage}></lightning-datatable>
</div>
</lightning-card>
</div>
</template>
------------------------JS----------------------------
import { LightningElement, wire, track, api} from 'lwc';
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
//import CONTACT_ID from "@salesforce/schema/User.ContactId";
import USER_ID from "@salesforce/user/Id";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getSelectedCaseLineItems from '@salesforce/apex/rmaCaseLineItemController.getSelectedCaseLineItems';
import updateCases from '@salesforce/apex/rmaCaseLineItemController.updateCases';
import { refreshApex } from '@salesforce/apex';
import { updateRecord } from 'lightning/uiRecordApi';
// import { recordId } from 'lightning/uiRecordApi';
export default class RmaCaseLineItem extends LightningElement {
@api recordId;
objectApiName = 'R4C_Case_Line_Item__c';
@track rmarecord;
@track conid;
@track error;
@track draftValues = [];
wiredRecords;
@track columns = [
{label:'Approval status', fieldName:'Approval_status__c', type: 'boolean',editable: true},
{label:'PO#', fieldName:'Name', type:'url',
typeAttributes: {
label: {
fieldName: 'Name'
},
target : '_blank'
}
},
{label:'SO#', fieldName:'SO__c', type:'text'},
{label:'PO Date', fieldName:'PO_Date__c',type:'text'},
{label:'Sold To', fieldName:'Sold_To__c', type:'text'},
{label:'Ship To', fieldName:'Ship_To__c', type:'text'},
{label:'Line Item', fieldName:'Line_Item__c', type:'text'},
{label:'Intel Product Number', fieldName:'MMID__c',type:'text'},
{label:'Intel Product Name', fieldName:'EPM_Name__c', type:'text'},
{label:'Customer Part Number', fieldName:'Stocking_ID__c', type:'text'},
{label:'Quantity', fieldName:'Quantity__c', type:'text'},
{label:'Return Quantity',fieldName:'Return_Quantity__c', type:'number'},
{label:'Billed Quantity', fieldName:'Billed_Quantity__c',type:'text'},
{label:'Net value', fieldName:'Net_Value__c', type:'currency'},
]
@wire(getSelectedCaseLineItems, {caseid: '$recordId'}) caseLineItems({data, error}){
if(data){
this.rmarecord = data;
console.log(data);
// console.log(recordId);
}
if(error){
console.log(error);
}
}
handleSave(event){
// this.draftValues = event.detail.draftValues;
const recordInputs = event.detail.draftValues.slice().map(draft => {
const fields = Object.assign({}, draft);
return { fields };
});
console.log('RECORDINPUTS', JSON.stringify(recordInputs));
// Updating the records using the UiRecordAPi
const promises = recordInputs.map(recordInput => updateRecord(recordInput));
Promise.all(promises).then(rmarecord => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Records Updated Successfully!!',
variant: 'success'
})
);
this.draftValues = [];
// Display fresh data in the datatable
return this.refresh;
}).catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error',
message: 'An Error Occured!!',
variant: 'error'
})
);
}) .finally(() => {
this.draftValues = [];
});
}
// This function is used to refresh the table once data updated
async refresh() {
await refreshApex(this.rmarecord);
}
}
-----------------------------------------------------------------------------
I did the INLINE EDITING in SLDS table LWC. When user updated the record with INLINE EDITING and clicks on SAVE the record not updating. Record updates only when we RELOAD THE PAGE. Record should update as soon as user click on save. Please help me regarding this. Refer below HTML and JS code. Let me know any change in refreshApex()..
-------------------HTML-------------------
<template>
<div class="slds-m-bottom_large">
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_4-of-5" style='font-weight: 500;font-size: 18px'>
<span>RMA Case Line Item History</span>
</div>
</div>
</div>
<div class="landingpagebody">
<lightning-card title="">
<div class="slds-m-top_large">
<lightning-datatable draft-values={draftValues}
show-row-number-column
onsave={handleSave}
key-field="Id"
data={rmarecord}
columns={columns}
onrowselection={updateSelected}
oncellchange={cellChange}
onclick={navRecordpage}></lightning-datatable>
</div>
</lightning-card>
</div>
</template>
------------------------JS----------------------------
import { LightningElement, wire, track, api} from 'lwc';
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
//import CONTACT_ID from "@salesforce/schema/User.ContactId";
import USER_ID from "@salesforce/user/Id";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getSelectedCaseLineItems from '@salesforce/apex/rmaCaseLineItemController.getSelectedCaseLineItems';
import updateCases from '@salesforce/apex/rmaCaseLineItemController.updateCases';
import { refreshApex } from '@salesforce/apex';
import { updateRecord } from 'lightning/uiRecordApi';
// import { recordId } from 'lightning/uiRecordApi';
export default class RmaCaseLineItem extends LightningElement {
@api recordId;
objectApiName = 'R4C_Case_Line_Item__c';
@track rmarecord;
@track conid;
@track error;
@track draftValues = [];
wiredRecords;
@track columns = [
{label:'Approval status', fieldName:'Approval_status__c', type: 'boolean',editable: true},
{label:'PO#', fieldName:'Name', type:'url',
typeAttributes: {
label: {
fieldName: 'Name'
},
target : '_blank'
}
},
{label:'SO#', fieldName:'SO__c', type:'text'},
{label:'PO Date', fieldName:'PO_Date__c',type:'text'},
{label:'Sold To', fieldName:'Sold_To__c', type:'text'},
{label:'Ship To', fieldName:'Ship_To__c', type:'text'},
{label:'Line Item', fieldName:'Line_Item__c', type:'text'},
{label:'Intel Product Number', fieldName:'MMID__c',type:'text'},
{label:'Intel Product Name', fieldName:'EPM_Name__c', type:'text'},
{label:'Customer Part Number', fieldName:'Stocking_ID__c', type:'text'},
{label:'Quantity', fieldName:'Quantity__c', type:'text'},
{label:'Return Quantity',fieldName:'Return_Quantity__c', type:'number'},
{label:'Billed Quantity', fieldName:'Billed_Quantity__c',type:'text'},
{label:'Net value', fieldName:'Net_Value__c', type:'currency'},
]
@wire(getSelectedCaseLineItems, {caseid: '$recordId'}) caseLineItems({data, error}){
if(data){
this.rmarecord = data;
console.log(data);
// console.log(recordId);
}
if(error){
console.log(error);
}
}
handleSave(event){
// this.draftValues = event.detail.draftValues;
const recordInputs = event.detail.draftValues.slice().map(draft => {
const fields = Object.assign({}, draft);
return { fields };
});
console.log('RECORDINPUTS', JSON.stringify(recordInputs));
// Updating the records using the UiRecordAPi
const promises = recordInputs.map(recordInput => updateRecord(recordInput));
Promise.all(promises).then(rmarecord => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Records Updated Successfully!!',
variant: 'success'
})
);
this.draftValues = [];
// Display fresh data in the datatable
return this.refresh;
}).catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error',
message: 'An Error Occured!!',
variant: 'error'
})
);
}) .finally(() => {
this.draftValues = [];
});
}
// This function is used to refresh the table once data updated
async refresh() {
await refreshApex(this.rmarecord);
}
}
-----------------------------------------------------------------------------
try below Js code and tell us is it working or not.
if above info is helpfull then don't forget to mark it as best answer.
Thank you
Please share your entire code with Html,Js and apex I will review in my side then I will be fix it.
Thank you