Automatically Refresh Lightning Record Page

Salesforce implementers/developers often encounter a case where several processes, some of them background processes, update the data that the users are working on, and we are looking for the best option to keep the users synced.

Note that this does not require treatment, since if the user tries to update data that has already changed, the system will alert the user of the changes when the save attempt is made. However, it would be nice if the updated data could be reflected to the user in a simple and automatic way.

The good news, it is possible to do this with a very simple web component that we add on the record page and every X seconds it will notify the page to check if there have been any changes.

Here how it works.

Create new Lightning Web Component. 

The xml file will note that it is meant for record page.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Refresh Page</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="refreshInterval" type="Integer" label="Refresh Interval"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

The html is optional, we can show counter down, something else or show nothing.

<template>
    Next Refresh:  {secondsLeft}
</template>

The java script file set repeated interval using the method setInternval. Every second the component will reduce 1 second from its count. Once it reach to zero, it will reset the counter and use the method notifyRecordUpdateAvailable. The method, as the name imply, notify to the page that there might be other changes and it should take the appropriate actions to reflect those.

import { LightningElement, track, api } from 'lwc';
import { notifyRecordUpdateAvailable } from 'lightning/uiRecordApi';

export default class RefreshRecordPage extends LightningElement {
    @api refreshInterval = 5;
    @api recordId;
    @track secondsLeft;

    connectedCallback(){
        this.secondsLeft = this.refreshInterval;

        setInterval(() => {
            this.secondsLeft = this.secondsLeft - 1;

            if(this.secondsLeft < 0){

                notifyRecordUpdateAvailable([{recordId: this.recordId}]);

                this.secondsLeft = this.refreshInterval;
            }
        }, 1000);
    }
}

After deploying the component, last thing is to place it on the lightning record page that you want to refresh.