Inline Edit/Save Field and refresh the component after successful save of standard record page in Salesforce LWC

In this post we are going to learn about How to?Inline Edit/Save Field?and?refresh the component?after successful save of standard record page in Salesforce LWC.

To display Salesforce data in a table, use the?lightning-datatable?component. The component supports inline editing, which enables users to update a field value without navigating to the record.

To load a list of records, use the getListUi (Deprecated) wire adapter or use SOQL in an Apex method.

Final Output → To Know more details about inline editing/save field in lwc.

• Find the below steps

Create Lightning Web Component HTML →

Step 1:-?Create Lightning Web Component : lwcEditSaveRow.html

<template

??<lightning-card>

????<div class="slds-m-around_medium">

????<h3 class="slds-text-heading_medium"><lightning-icon icon-name="custom:custom84" size="small"></lightning-icon> <strong style="color:#270086; font-size:13px; margin-right:5px;"> How to inline Edit/Save Rows With Lightning Datatable in Lightning Web Component (LWC) </strong></h3>

????<br/><br/>

????<template if:true={accObj.data}>

??????<lightning-datatable key-field="Id"?

??????data={accObj.data}?

??????columns={columns}?

??????onsave={saveHandleAction}

??????draft-values={fldsItemValues}?

??????hide-checkbox-column?

??????show-row-number-column>

??????</lightning-datatable>

????</template>

????</div>

??</lightning-card>

</template>>        

??Create Lightning Web Component JavaScript →

Step 2:-?Create Lightning Web Component : lwcEditSaveRow.js

import { LightningElement, wire, track } from 'lwc'
import getAccounts from '@salesforce/apex/lwcEditSaveRowCtrl.getAccounts';
import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';


const columns = [
? ? {
? ? ? ? label: 'Name',
? ? ? ? fieldName: 'Name',
? ? ? ? type: 'text',
? ? }, {
? ? ? ? label: 'Phone',
? ? ? ? fieldName: 'Phone',
? ? ? ? type: 'phone',
? ? ? ? editable: true,
? ? }, {
? ? ? ? label: 'Industry',
? ? ? ? fieldName: 'Industry',
? ? ? ? type: 'text',
? ? ? ? editable: true,
? ? }, {
? ? ? ? label: 'Type',
? ? ? ? fieldName: 'Type',
? ? ? ? type: 'text',
? ? ? ? editable: true
? ? }, {
? ? ? ? label: 'Description',
? ? ? ? fieldName: 'Type',
? ? ? ? type: 'text',
? ? ? ? editable: true
? ? }
? ??
];
export default class LwcEditSaveRow extends LightningElement {
? ? columns = columns;
? ? @track accObj;
? ? fldsItemValues = [];


? ? @wire(getAccounts)
? ? cons(result) {
? ? ? ? this.accObj = result;
? ? ? ? if (result.error) {
? ? ? ? ? ? this.accObj = undefined;
? ? ? ? }
? ? };


? ? saveHandleAction(event) {
? ? ? ? this.fldsItemValues = event.detail.draftValues;
? ? ? ? const inputsItems = this.fldsItemValues.slice().map(draft => {
? ? ? ? ? ? const fields = Object.assign({}, draft);
? ? ? ? ? ? return { fields };
? ? ? ? });


? ? ? ?
? ? ? ? const promises = inputsItems.map(recordInput => updateRecord(recordInput));
? ? ? ? Promise.all(promises).then(res => {
? ? ? ? ? ? this.dispatchEvent(
? ? ? ? ? ? ? ? new ShowToastEvent({
? ? ? ? ? ? ? ? ? ? title: 'Success',
? ? ? ? ? ? ? ? ? ? message: 'Records Updated Successfully!!',
? ? ? ? ? ? ? ? ? ? variant: 'success'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? );
? ? ? ? ? ? this.fldsItemValues = [];
? ? ? ? ? ? return this.refresh();
? ? ? ? }).catch(error => {
? ? ? ? ? ? this.dispatchEvent(
? ? ? ? ? ? ? ? new ShowToastEvent({
? ? ? ? ? ? ? ? ? ? title: 'Error',
? ? ? ? ? ? ? ? ? ? message: 'An Error Occured!!',
? ? ? ? ? ? ? ? ? ? variant: 'error'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? );
? ? ? ? }).finally(() => {
? ? ? ? ? ? this.fldsItemValues = [];
? ? ? ? });
? ? }


? ?
? ? async refresh() {
? ? ? ? await refreshApex(this.accObj);
? ? }
};        

Create Lightning Web Component Meta XML →

Step 3:-?Create Lightning Web Component : lwcEditSaveRow.js-meta.xml

? ?<?xml version="1.0" encoding="UTF-8"?
<LightningComponentBundle xmlns="https://soap.sforce.com/2006/04/metadata">
? ? <apiVersion>45.0</apiVersion>
? ? <isExposed>true</isExposed>
? ? <targets>?
? ? ? ? <target>lightning__AppPage</target>
? ? ? ? <target>lightning__RecordPage</target>
? ? ? ? <target>lightning__HomePage</target>
? ? </targets>
</LightningComponentBundle>>