You need to sign in to do that
Don't have an account?
Rafael Franco Moreno 24
close cases
how can I close cases selected in an LWC? I need to close cases if they don´t have a Reason for closure(custom field), I don´t find anything of code, any idea? I'm newbie
this is my html:
<template>
<lightning-card title="Inline Edit With Lightning Datatable in LWC">
<template if:true={cases.data}>
<lightning-datatable key-field="Id"
data={cases.data}
columns={columns}
onsave={handleSave}
draft-values={saveDraftValues} show-row-number-column
onrowselection={getSelectedName}>
</lightning-datatable>
</template>
</lightning-card>
</template>
this is js
import { LightningElement, wire, track } from 'lwc';
import getCases from '@salesforce/apex/getRecordDataController.getCases';
import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';
// datatable columns
const columns = [
{
label: 'CaseNumber',
fieldName: 'CaseNumber',
type: 'text',
}, {
label: 'Subject',
fieldName: 'Subject',
type: 'text',
editable: true,
}, {
label: 'Status',
fieldName: 'Status',
type: 'text',
editable: true,
}, {
label: 'reason_for_closure__c',
fieldName: 'reason_for_closure__c',
type: 'phone',
editable: true
}
];
export default class InlineEditTable extends LightningElement {
columns = columns;
@track cases;
saveDraftValues = [];
@wire(getCases)
cons(result) {
this.cases = result;
if (result.error) {
this.cases = undefined;
}
};
getSelectedName(event) {
const selectedRows = event.detail.selectedRows;
// Display that fieldName of the selected rows
for (let i = 0; i < selectedRows.length; i++){
console.log("You selected: " + selectedRows[i].CaseNumber);
}
}
handleSave(event) {
this.saveDraftValues = event.detail.draftValues;
const recordInputs = this.saveDraftValues.slice().map(draft => {
const fields = Object.assign({}, draft);
return { fields };
});
// Updateing the records using the UiRecordAPi
const promises = recordInputs.map(recordInput => updateRecord(recordInput));
Promise.all(promises).then(res => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Records Updated Successfully!!',
variant: 'success'
})
);
this.saveDraftValues = [];
return this.refresh();
}).catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error',
message: 'An Error Occured!!',
variant: 'error'
})
);
}).finally(() => {
this.saveDraftValues = [];
});
}
// This function is used to refresh the table once data updated
async refresh() {
await refreshApex(this.cases);
}
}
this is the class:
public with sharing class getRecordDataController {
//@AuraEnabled is annotation enables LWC to access below apex method
//(cacheable=true) is for caching the data on client side storage without
//waiting for server trips. Which imporves the performance
@AuraEnabled(cacheable=true)
public static List<Case> getCases() {
return [SELECT CaseNumber, Subject, Status, reason_for_closure__c FROM Case WHERE Status = 'New'];
}
}
this is my html:
<template>
<lightning-card title="Inline Edit With Lightning Datatable in LWC">
<template if:true={cases.data}>
<lightning-datatable key-field="Id"
data={cases.data}
columns={columns}
onsave={handleSave}
draft-values={saveDraftValues} show-row-number-column
onrowselection={getSelectedName}>
</lightning-datatable>
</template>
</lightning-card>
</template>
this is js
import { LightningElement, wire, track } from 'lwc';
import getCases from '@salesforce/apex/getRecordDataController.getCases';
import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';
// datatable columns
const columns = [
{
label: 'CaseNumber',
fieldName: 'CaseNumber',
type: 'text',
}, {
label: 'Subject',
fieldName: 'Subject',
type: 'text',
editable: true,
}, {
label: 'Status',
fieldName: 'Status',
type: 'text',
editable: true,
}, {
label: 'reason_for_closure__c',
fieldName: 'reason_for_closure__c',
type: 'phone',
editable: true
}
];
export default class InlineEditTable extends LightningElement {
columns = columns;
@track cases;
saveDraftValues = [];
@wire(getCases)
cons(result) {
this.cases = result;
if (result.error) {
this.cases = undefined;
}
};
getSelectedName(event) {
const selectedRows = event.detail.selectedRows;
// Display that fieldName of the selected rows
for (let i = 0; i < selectedRows.length; i++){
console.log("You selected: " + selectedRows[i].CaseNumber);
}
}
handleSave(event) {
this.saveDraftValues = event.detail.draftValues;
const recordInputs = this.saveDraftValues.slice().map(draft => {
const fields = Object.assign({}, draft);
return { fields };
});
// Updateing the records using the UiRecordAPi
const promises = recordInputs.map(recordInput => updateRecord(recordInput));
Promise.all(promises).then(res => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Records Updated Successfully!!',
variant: 'success'
})
);
this.saveDraftValues = [];
return this.refresh();
}).catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error',
message: 'An Error Occured!!',
variant: 'error'
})
);
}).finally(() => {
this.saveDraftValues = [];
});
}
// This function is used to refresh the table once data updated
async refresh() {
await refreshApex(this.cases);
}
}
this is the class:
public with sharing class getRecordDataController {
//@AuraEnabled is annotation enables LWC to access below apex method
//(cacheable=true) is for caching the data on client side storage without
//waiting for server trips. Which imporves the performance
@AuraEnabled(cacheable=true)
public static List<Case> getCases() {
return [SELECT CaseNumber, Subject, Status, reason_for_closure__c FROM Case WHERE Status = 'New'];
}
}
Please use below code:-
Apex class:-
.html
if you need any assistanse, Please let me know!!
Kindly mark my solution as the best answer if it helps you.
Thanks
Mukesh
then when I enter text in the reason for closure field cancel and save buttons appears:
and when I hit save show this error:
I'm trying to hide buttons with css but I get this error:
I don´t know very well the way to hide that buttons with css, or How can I do it?
thanks in advance