You need to sign in to do that
Don't have an account?
Athira Venugopal
lightning:datatable not getting refreshed after saving some data into it
HTML
<template>
<lightning:card>
<lightning-button variant="brand"
label="New Entry"
title="Open Modal"
onclick={openModal}
class="slds-var-m-left_x-small"></lightning-button>
<!-- modal start -->
<template if:true={bShowModal}>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- modal header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close"
alternative-text="close"
variant="inverse"
size="small" ></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">Quotation</h2>
</header>
<!-- modal body start -->
<lightning-card>
<p class="slds-var-p-horizontal_small">
<lightning-input label="Date" name="datefld" type="date" value={fDate} onchange={handledChange} ></lightning-input>
<lightning-input label="Quotation Name" name="enquiry" type="textarea" value={enq} onchange={handledChange} ></lightning-input>
<lightning-record-edit-form object-api-name="Price__c">
<lightning-input-field field-name="Project__c" onchange={projectChange}>
</lightning-input-field>
</lightning-record-edit-form>
<lightning-record-edit-form object-api-name="Price__c">
<lightning-input-field field-name="Unit__c" onchange={unitChange} value ={unitVal}>
</lightning-input-field>
</lightning-record-edit-form>
<lightning-input label="Unit Rate" name="rate" type="Double" value={rNumber} onchange={handledChange}></lightning-input>
<lightning-input label="Additional cost" name="cost" type="Double" value={cNumber} onchange={handledChange}></lightning-input>
<lightning-input label="Discount" name="dis" type="Double" value={dNumber} onchange={handledChange}></lightning-input>
<lightning-input label="Agreement cost" name="agree" type="Double" value={aNumber} onchange={handledChange}></lightning-input>
<lightning-input label="Remarks" name = "remark" type="textarea" value={resultsum} onchange={handledChange}></lightning-input>
<lightning-button label="Save" variant="brand" onclick={handleClick}></lightning-button>
</p>
</lightning-card>
<!-- modal footer start-->
</div>
</section>
</template>
<!-- modal end -->
<div if:true={accList}>
<lightning-datatable data={accList} columns={columns} key-field="Id" >
</lightning-datatable>
</div>
<div if:true={error}>
{error}
</div>
</lightning:card>
</template>
JS
import { LightningElement , wire, track} from 'lwc';
import getAccountList from '@salesforce/apex/PriceFetch.getAccountList';
import calculate2Numbers from '@salesforce/apex/PriceFetch.calculate2Numbers';
import sentMail from '@salesforce/apex/PriceFetch.sentMail';
import getUnit from '@salesforce/apex/PriceFetch.getUnit';
import priceMail from '@salesforce/apex/PriceFetch.priceMail';
import newPrice from '@salesforce/apex/PriceFetch.newPrice';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class PriceScreen extends LightningElement {
datefld;
enquiry;
projSelected;
unitSelected;
rate;
cost;
dis;
agree;
remark;
recp;
@track aNumber;
@track unitVal;
@track disName;
@track finalCost;
@track bShowModal = false;
@track Name;
@track columns = [
{
label: "Name",
fieldName: "recordLink",
type: "url",
typeAttributes: { label: { fieldName: "Name" }, target: "_self" }
},
];
wiredDataResult;
@track error;
@track accList ;
@wire(getAccountList)
wiredAccounts({
error,
data
}) {
if (data) {
var tempOppList = [];
for (var i = 0; i < data.length; i++) {
let tempRecord = Object.assign({}, data[i]); //cloning object
tempRecord.Name = tempRecord.Name;
tempRecord.recordLink = "/" + tempRecord.Id;
tempOppList.push(tempRecord);
}
console.log('hHIIII' + data)
this.accList = tempOppList;
this.wiredDataResult = tempOppList;
} else if (error) {
this.error = error;
}
}
handledChange(event){
if(event.target.name==='datefld'){
this.datefld = event.target.value;
}
else if(event.target.name==='enquiry'){
this.enquiry = event.target.value;
}
else if(event.target.name==='rate'){
this.rate = event.target.value;
}
else if(event.target.name==='cost'){
this.cost = event.target.value;
}
else if(event.target.name==='dis'){
this.dis = event.target.value;
calculate2Numbers({ unitRate: this.rate,addtnlCost:this.cost, discount:this.dis })
.then(result => {
this.aNumber = result;
// this.error = undefined;
})
.catch(error => {
this.aNumber = undefined;
//this.error = error;
});
}
else if(event.target.name==='agree'){
console.log('handle Change'+event.target.value)
this.agree = event.target.value;
}
else if(event.target.name==='remark'){
console.log('handle Change'+event.target.value)
this.remark = event.target.value;
}
}
projectChange(event) {
alert("PROJECT" + event.detail.value[0]);
this.projSelected = event.detail.value[0];
getUnit({ projId:this.projSelected })
.then(result => {
this.unitVal = result;
})
.catch(error => {
this.unitVal = undefined;
});
}
unitChange(event) {
this.unitSelected = event.detail.value[0];
}
handleClick(event) {
this.bShowModal = false;
newPrice({ entryDate: this.datefld, enqName : this.enquiry, proj:this.projSelected, unit:this.unitSelected,
unitRate:this.rate, addtnlCost:this.cost, discount:this.dis, agreeCost:this.agree,rem:this.remark })
.then(result => {
const evt = new ShowToastEvent({
title: 'Saved succesfully',
variant: 'success',
});
this.dispatchEvent(evt);
console.log("Opps updated!" + result)
return refreshApex(this.wiredDataResult); //HERE I AM CALLING REFRESHING THE DATATABLE, BUT ITS NOT GETTING REFRESHED
})
.catch(error => {
this.error = error;
alert("FAILURE" + error);
//this.error = error;
});
}
/* javaScipt functions start */
openModal() {
// to open modal window set 'bShowModal' tarck value as true
this.bShowModal = true;
}
closeModal() {
// to open modal window set 'bShowModal' tarck value as true
this.bShowModal = false;
}
}
APEX CONTROLLER
public with sharing class PriceFetch {
@AuraEnabled(cacheable=true)
public static List<Price__c> getAccountList() {
System.debug('HII');
return [SELECT Id, Name
FROM Price__c ];
}
@AuraEnabled(cacheable=true)
public static Double calculate2Numbers(Double unitRate,Double addtnlCost, Double discount){
return ((unitRate+addtnlCost)-discount);
}
@AuraEnabled(cacheable = true)
public static List<Unit__c> getUnit(Id projId) {
return [SELECT Id, Name FROM Unit__c where Project__c = :projId ];
}
@AuraEnabled
public static Boolean newPrice(Date entryDate, String enqName, Id proj, Id unit,Double unitRate,Double addtnlCost, Double discount,Double agreeCost, String rem ){
Price__c price = new Price__c();
price.Date__c = entryDate;
price.Name = enqName;
price.Project__c = proj;
price.Unit__c = unit;
price.Unit_Rate__c = unitRate;
price.Additional_cost__c = addtnlCost;
price.Discount__c = discount;
price.Agreement_cost__c = agreeCost;
price.Remarks__c = rem;
try {
insert price;
return true;
} catch (Exception e) {
throw new AuraHandledException('exceptionText' + e.getMessage());
}
}
}
In the js file, there is a method handleClick(), inside that method, I am trying to refresh the lightning:datatable after saving some data into it, but its not getting refreshed. Is there any mistake in my code?
<template>
<lightning:card>
<lightning-button variant="brand"
label="New Entry"
title="Open Modal"
onclick={openModal}
class="slds-var-m-left_x-small"></lightning-button>
<!-- modal start -->
<template if:true={bShowModal}>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- modal header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close"
alternative-text="close"
variant="inverse"
size="small" ></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">Quotation</h2>
</header>
<!-- modal body start -->
<lightning-card>
<p class="slds-var-p-horizontal_small">
<lightning-input label="Date" name="datefld" type="date" value={fDate} onchange={handledChange} ></lightning-input>
<lightning-input label="Quotation Name" name="enquiry" type="textarea" value={enq} onchange={handledChange} ></lightning-input>
<lightning-record-edit-form object-api-name="Price__c">
<lightning-input-field field-name="Project__c" onchange={projectChange}>
</lightning-input-field>
</lightning-record-edit-form>
<lightning-record-edit-form object-api-name="Price__c">
<lightning-input-field field-name="Unit__c" onchange={unitChange} value ={unitVal}>
</lightning-input-field>
</lightning-record-edit-form>
<lightning-input label="Unit Rate" name="rate" type="Double" value={rNumber} onchange={handledChange}></lightning-input>
<lightning-input label="Additional cost" name="cost" type="Double" value={cNumber} onchange={handledChange}></lightning-input>
<lightning-input label="Discount" name="dis" type="Double" value={dNumber} onchange={handledChange}></lightning-input>
<lightning-input label="Agreement cost" name="agree" type="Double" value={aNumber} onchange={handledChange}></lightning-input>
<lightning-input label="Remarks" name = "remark" type="textarea" value={resultsum} onchange={handledChange}></lightning-input>
<lightning-button label="Save" variant="brand" onclick={handleClick}></lightning-button>
</p>
</lightning-card>
<!-- modal footer start-->
</div>
</section>
</template>
<!-- modal end -->
<div if:true={accList}>
<lightning-datatable data={accList} columns={columns} key-field="Id" >
</lightning-datatable>
</div>
<div if:true={error}>
{error}
</div>
</lightning:card>
</template>
JS
import { LightningElement , wire, track} from 'lwc';
import getAccountList from '@salesforce/apex/PriceFetch.getAccountList';
import calculate2Numbers from '@salesforce/apex/PriceFetch.calculate2Numbers';
import sentMail from '@salesforce/apex/PriceFetch.sentMail';
import getUnit from '@salesforce/apex/PriceFetch.getUnit';
import priceMail from '@salesforce/apex/PriceFetch.priceMail';
import newPrice from '@salesforce/apex/PriceFetch.newPrice';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class PriceScreen extends LightningElement {
datefld;
enquiry;
projSelected;
unitSelected;
rate;
cost;
dis;
agree;
remark;
recp;
@track aNumber;
@track unitVal;
@track disName;
@track finalCost;
@track bShowModal = false;
@track Name;
@track columns = [
{
label: "Name",
fieldName: "recordLink",
type: "url",
typeAttributes: { label: { fieldName: "Name" }, target: "_self" }
},
];
wiredDataResult;
@track error;
@track accList ;
@wire(getAccountList)
wiredAccounts({
error,
data
}) {
if (data) {
var tempOppList = [];
for (var i = 0; i < data.length; i++) {
let tempRecord = Object.assign({}, data[i]); //cloning object
tempRecord.Name = tempRecord.Name;
tempRecord.recordLink = "/" + tempRecord.Id;
tempOppList.push(tempRecord);
}
console.log('hHIIII' + data)
this.accList = tempOppList;
this.wiredDataResult = tempOppList;
} else if (error) {
this.error = error;
}
}
handledChange(event){
if(event.target.name==='datefld'){
this.datefld = event.target.value;
}
else if(event.target.name==='enquiry'){
this.enquiry = event.target.value;
}
else if(event.target.name==='rate'){
this.rate = event.target.value;
}
else if(event.target.name==='cost'){
this.cost = event.target.value;
}
else if(event.target.name==='dis'){
this.dis = event.target.value;
calculate2Numbers({ unitRate: this.rate,addtnlCost:this.cost, discount:this.dis })
.then(result => {
this.aNumber = result;
// this.error = undefined;
})
.catch(error => {
this.aNumber = undefined;
//this.error = error;
});
}
else if(event.target.name==='agree'){
console.log('handle Change'+event.target.value)
this.agree = event.target.value;
}
else if(event.target.name==='remark'){
console.log('handle Change'+event.target.value)
this.remark = event.target.value;
}
}
projectChange(event) {
alert("PROJECT" + event.detail.value[0]);
this.projSelected = event.detail.value[0];
getUnit({ projId:this.projSelected })
.then(result => {
this.unitVal = result;
})
.catch(error => {
this.unitVal = undefined;
});
}
unitChange(event) {
this.unitSelected = event.detail.value[0];
}
handleClick(event) {
this.bShowModal = false;
newPrice({ entryDate: this.datefld, enqName : this.enquiry, proj:this.projSelected, unit:this.unitSelected,
unitRate:this.rate, addtnlCost:this.cost, discount:this.dis, agreeCost:this.agree,rem:this.remark })
.then(result => {
const evt = new ShowToastEvent({
title: 'Saved succesfully',
variant: 'success',
});
this.dispatchEvent(evt);
console.log("Opps updated!" + result)
return refreshApex(this.wiredDataResult); //HERE I AM CALLING REFRESHING THE DATATABLE, BUT ITS NOT GETTING REFRESHED
})
.catch(error => {
this.error = error;
alert("FAILURE" + error);
//this.error = error;
});
}
/* javaScipt functions start */
openModal() {
// to open modal window set 'bShowModal' tarck value as true
this.bShowModal = true;
}
closeModal() {
// to open modal window set 'bShowModal' tarck value as true
this.bShowModal = false;
}
}
APEX CONTROLLER
public with sharing class PriceFetch {
@AuraEnabled(cacheable=true)
public static List<Price__c> getAccountList() {
System.debug('HII');
return [SELECT Id, Name
FROM Price__c ];
}
@AuraEnabled(cacheable=true)
public static Double calculate2Numbers(Double unitRate,Double addtnlCost, Double discount){
return ((unitRate+addtnlCost)-discount);
}
@AuraEnabled(cacheable = true)
public static List<Unit__c> getUnit(Id projId) {
return [SELECT Id, Name FROM Unit__c where Project__c = :projId ];
}
@AuraEnabled
public static Boolean newPrice(Date entryDate, String enqName, Id proj, Id unit,Double unitRate,Double addtnlCost, Double discount,Double agreeCost, String rem ){
Price__c price = new Price__c();
price.Date__c = entryDate;
price.Name = enqName;
price.Project__c = proj;
price.Unit__c = unit;
price.Unit_Rate__c = unitRate;
price.Additional_cost__c = addtnlCost;
price.Discount__c = discount;
price.Agreement_cost__c = agreeCost;
price.Remarks__c = rem;
try {
insert price;
return true;
} catch (Exception e) {
throw new AuraHandledException('exceptionText' + e.getMessage());
}
}
}
In the js file, there is a method handleClick(), inside that method, I am trying to refresh the lightning:datatable after saving some data into it, but its not getting refreshed. Is there any mistake in my code?
In your code wiredAccounts is the one with @wire annotated, not wiredDataResult.
You may use refreshApex(this.wiredAccounts); to replace the imperative refresh apex call.