I have an LWC that displays a list of custom object records. In a separate LWC I can create a new record that will show on the list LWC if I do a browser refresh.

How can the list LWC get updated without doing a browser refresh when a new record is created in LWC #2.

The list lwc is under a lightning component tab while the record create happens under a NavigationMixin record page with the create record LWC on it.

I apologize if this isn't worded correctly, but I'm hoping someone can point me in the right direction.

1 Answer 1


Check out the DOM events for this.


The LWC that needs to refresh subscribes for an event. When that event is received, it can refresh itself.
The event that it subscribes to should be published whenever a new record of your custom object is created via a trigger on that object.

Example code: (I've stripped a lot of code out of my actual LWC component, but hopefully this helps you understand. The trigger fires on the FeedItem object which is the community questions. The Question_Posted__e object is a custom event object.)


trigger FeedItem_MasterTrigger on FeedItem ( before delete, before insert, before update, after delete, after undelete, after insert, after update ) {
    if (trigger.isBefore) {
    } else {
        if ( trigger.isInsert ) {

Trigger Class:

public without sharing class FeedItem_MasterClass {
public static void afterIns (List<FeedItem> TriggerNew) {
    List<Question_Posted__e> lstQuestionsPosted = new List<Question_Posted__e>();

    // Initialize/Set System Fields
    for ( FeedItem fi : TriggerNew ) {

        if ( fi.Type == 'QuestionPost' && fi.NetworkScope != null ) {
            lstQuestionsPosted.add(new Question_Posted__e(
                RecordId__c = fi.Id
                , Title__c = fi.Title


    if ( lstQuestionsPosted.size() > 0 ) {



export default class AgentQuestions extends NavigationMixin(LightningElement) {


    channelName = '/event/Question_Posted__e';
    subscription = {};

    eventSubscribe() {
        subscribe(this.channelName, -1, this.eventReceiveMessage.bind(this)).then(response => {
            console.log('agentQuestions.subscribe', response);
            this.subscription = response;
    eventUnsubscribe() {
        unsubscribe(this.subscription, response => {
            console.log('agentQuestions.unsubscribe', response);

    eventReceiveMessage(response) {
        console.log('agentQuestions.eventReceiveMessage', response.data.payload);

        this.refreshQuestions(); // this would be where you refresh

    connectedCallback() {
        console.log('agentQuestions.connectedCallback', this.version);
        window.addEventListener("beforeunload", this.beforeUnloadHandler.bind(this));

        // Register "Question Posted" Event listener
    beforeUnloadHandler(event) {

        // Unregister Change Event listener


    disconnectedCallback() {
        window.removeEventListener("beforeunload", this.beforeUnloadHandler);

        // Unregister "Question Posted" Event listener       




You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .