[SalesForce] refresh lightning-datatable after save

I'm using lightning-record-edit-form to update a record. I want my lightning-datatable to reflect the changes. I have to refresh the page to see the change in the lightning-datatable. Is there an easy way to achieve a refresh of the lightning-datatable? or am I doing something fundamentally wrong? I've searched through many possible solutions with no luck. Thanks in advance for any guidance.

HTML:

<template>
    <template if:false={staffingAssignmentSelected}>
        <lightning-card title="Staffing Assignments" icon-name="custom:custom18">
            <div class="card">
                <template if:false={gotData}>
                    <div class="slds-p-around--medium">
                        <div class="slds-text-heading--small">Determining available Staffing Assignments...</div>
                    </div>
                </template>

                <template if:true={hasNoStaffingAssignments}>
                    <div class="slds-p-around--medium slds-text-heading--small">No Staffing Assignments are available.</div>
                </template>
                <template if:true={hasStaffingAssignments}>
                    <lightning-datatable
                            data={datatableStaffingAssignments}
                            columns={staffingAssignmentColumns}
                            key-field="Id"
                            onrowselection={handleRowSelection}
                            selected-rows={selectedStaffingAssignmentIds}>
                    </lightning-datatable>
                </template>
            </div>
        </lightning-card>
    </template>
    <template if:true={staffingAssignmentSelected}>
        <lightning-card title="Update Staffing Assignment" icon-name="custom:custom18">
            <lightning-record-edit-form record-id={staffingAssignmentId} object-api-name="Staffing_Assignment__c" onsuccess={resetStaffingSelection}>
                <lightning-input-field field-name="Title__c"></lightning-input-field>
                <lightning-input-field field-name="User__c"></lightning-input-field>
                <lightning-button label="Save" type="submit" name="Save" variant="brand"></lightning-button>&nbsp;
                <lightning-button label="Cancel" type="cancel" name="Cancel" onclick={resetStaffingSelection} variant="brand"></lightning-button>
            </lightning-record-edit-form>
        </lightning-card>
    </template>

</template>

JavaScript:

import {LightningElement, wire, track, api} from 'lwc';
import getStaffingAssignmentByParentId from '@salesforce/apex/StaffingAssignment.getStaffingAssignmentByParentId';
import { refreshApex } from '@salesforce/apex';

const staffingAssignmentColumns = [
    {label: 'Title', fieldName: 'Title__c', type: 'pickList'},
    {label: 'User', fieldName: 'UserName', type: 'text'}
];

//{label: 'UserId', fieldName: 'User__c', type: 'sObject'},

export default class StaffingAssignment extends LightningElement {
    @api recordId;  //The Petition record Id.
    @track datatableStaffingAssignments;
    @track staffingAssignments = [];  //All available staffingAssignments
    @api selectedStaffingAssignments = [];
    @track staffingAssignmentColumns = staffingAssignmentColumns;
    @track error;
    @track selectedStaffingAssignmentIds = [];
    @track gotData = false;

    get hasNoStaffingAssignments() {
        if (this.gotData) {
            if (this.datatableStaffingAssignments && this.datatableStaffingAssignments.length ==  0) {
                return true;
            }
        }
        return false;
    }

    get hasStaffingAssignments() {
        if (this.gotData) {
            if (this.datatableStaffingAssignments && this.datatableStaffingAssignments.length > 0) {
                return true;
            }
        }
        return false;
    }

    connectedCallback() {

        getStaffingAssignmentByParentId({parentId: this.recordId})
            .then(result => {
                console.log(JSON.stringify(result));
                let rows = result;
                let rowBuilder = [];
                for (let i = 0; i < rows.length; i++) {
                    let row = rows[i];
                    //Datatable can't handle related fields, so flatten the data
                    if (row.User__r) {
                        if (row.User__r.Name) {
                            //Add the User Name to the first level of the row
                            let pair = {UserName: row.User__r.Name};
                            row = {...row, ...pair};
                        }
                    }
                    rowBuilder.push(row);
                }

                this.datatableStaffingAssignments = rowBuilder;
                this.gotData = true;
                this.error = undefined;
            })
            .catch(error => {
                //this.error = reduceErrors(error).join(', ');
                this.record = undefined;
            });
    }

    resetStaffingSelection() {
        this.selectedStaffingAssignmentIds = [];
    }

    handleRowSelection(event) {
        const selectedRows = event.detail.selectedRows;
        this.selectedStaffingAssignmentIds = [];

        for (let i = 0; i < selectedRows.length; i++) {
            this.selectedStaffingAssignmentIds.push(selectedRows[i].Id);
        }
    }
    get staffingAssignmentSelected() {
        if (this.selectedStaffingAssignmentIds != null && this.selectedStaffingAssignmentIds.length > 0) {
            return true;
        }
        return false;
    }
    get staffingAssignmentId () {
        if (this.selectedStaffingAssignmentIds) {
            return this.selectedStaffingAssignmentIds[0];
        }
    }
}

Best Answer

The way you have it built you would need to update your success handler to refetch records after they have been updated.

.html

<lightning-record-edit-form onsuccess={handleSuccess}>

.js

connectedCallback() {
    this.fetchStaffingAssignments();
}

handleSuccess() {
    this.resetStaffingSelection();
    this.fetchStaffingAssignments();
}

fetchStaffingAssignments(){

    getStaffingAssignmentByParentId({parentId: this.recordId})
    .then(result => {
        console.log(JSON.stringify(result));
        let rows = result;
        let rowBuilder = [];
        for (let i = 0; i < rows.length; i++) {
            let row = rows[i];
            //Datatable can't handle related fields, so flatten the data
            if (row.User__r) {
                if (row.User__r.Name) {
                    //Add the User Name to the first level of the row
                    let pair = {UserName: row.User__r.Name};
                    row = {...row, ...pair};
                }
            }
            rowBuilder.push(row);
        }

        this.datatableStaffingAssignments = rowBuilder;
        this.gotData = true;
        this.error = undefined;
    })
    .catch(error => {
        //this.error = reduceErrors(error).join(', ');
        this.record = undefined;
    });

}

Related Solutions

[SalesForce] Refresh data in lightning data table after editing record through NavigationMixin.Navigate

To achieve that you need to combine EMP Api, and Platform Events. Basicly you need to implement EMP Api listener in your LWC component, that will be listening for platform events. And in your SObject trigger you need to write Apex that will fire Platform Event always when record is edited. Then LWC will be notified that Platform event occurs, and you can invoke refreshApex() to reflect changes in your datatable.

My samples of code, feel free to use them, and ask any questions if something is not clear, LWC:

subscription = {};
CHANNEL_NAME = '/event/Refresh_Record__e';
connectedCallback() {
    subscribe(this.CHANNEL_NAME, -1, this.handleEvent).then(response => {
        console.log('Successfully subscribed to channel);
        this.subscription = response;
    });

    onError(error => {
        console.error('Received error from server: ', error);
    });
}

handleEvent = event => {
    const refreshRecordEvent = event.data.payload;
    if (refreshRecordEvent.Record_Id__c === this.recordId && refreshRecordEvent.User_Id__c === currentUserId) {
        this.dispatchEvent(new CustomEvent('refreshrecord'));
    }
}

disconnectedCallback() {
    unsubscribe(this.subscription, response => {
        console.log('Successfully unsubscribed');
    });
}

Apex:

trigger AccountTrigger on Account (after insert, after update) {
List<Refresh_Record__e> refreshRecordEvents = new List<Refresh_Record__e>();
for (Account account : Trigger.new) {
    refreshRecordEvents.add(new Refresh_Record__e(
            Record_Id__c = account.Id,
            User_Id__c = UserInfo.getUserId()
    ));
}
EventBus.publish(refreshRecordEvents);

}

[SalesForce] Clear selectedRows after deleting records in lightning-datatable

EDIT: As you already have an attribute named selectedRows, you need to use a new attribute something else, like setSelectedRows you need to use two different attributes to store the selected rows and to reset the selected.

Create one attribute for the selected rows and assign it to [] an empty array, whenever you want to unselect the selected rows.

<lightning-datatable 
    data={developments}
    columns={columns}
    key-field="id"
    onrowaction={handleRowAction}
    onrowselection={getSelectedRows}
    selected-rows={setSelectedRows}
></lightning-datatable>

You will need a reactive property for this.

selectedRows = [];

...

bulkDeleteItems(itemIds) {
    if (itemIds.length == 0) {
        this.showToast(
            'No items to delete',
            'Please select items from the list in order to be removed',
            'error'
        );
        return;
    }

    deleteAreaItems({
        areaItemsId: itemIds
    }).then(() => {
        this.showToast(
            'Area Items Deleted Succesfully',
            'All items deleted succesfully',
            'success'
        );
        this.refreshItems();
        this.setSelectedRows = []; /// empty selection.
    }).catch(error => {
        this.showToast('Something went wrong', error.body.message, 'error');
        return;
    });
}

Best Answer

Related Solutions

[SalesForce] Refresh data in lightning data table after editing record through NavigationMixin.Navigate

[SalesForce] Clear selectedRows after deleting records in lightning-datatable

Related Topic