1

I have a button that points to a NavigationMixin that opens a popup for creating a new child record for the parent record they are currently looking at:

    navigateToNew() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: this.objectName,
                actionName: 'new'
            },
            state: {
                nooverride: 1,
                useRecordTypeCheck: 1,
                navigationLocation: 'RELATED_LIST',
                backgroundContext: '/lightning/r/Opportunity/'+this.recordId+'/view'
            }        
        });
    }

Once the user saves the new child-detail record, however, it does not appear on the parent detail record until they manually refresh the page. I have tried using refreshApex(this.records) but it does not work. Is there a way to update state so that it refreshes the page upon save? Full code below.

Many thanks

<template>  
      
    <lightning-card title={strTitle} icon-name="standard:record"> 

        <div slot="actions">
            <lightning-button label="New" slot="actions" onclick={navigateToNew}></lightning-button>
        </div>

        <div class="slds-m-around_medium">
  
            <div if:true={records.data}>  
  
                <template for:each={records.data} for:item="rec">    
  
                    <div key={rec.Id} class="slds-box"> 
                        
                        <li style="color:#df5900" key={rec.Id}>{rec.Name}</li>
                        <br>
                        <lightning-record-form
                            record-id={rec.Id}   
                            object-api-name={objectName}   
                            fields={fields}    
                            mode="view"  
                            columns="3" 
                            density='comfy'
                            onsuccess={handleSuccess}
                            >                                                                          
                        </lightning-record-form> 
  
                    </div>  
                      
                </template>  
  
            </div> 

        </div>  
  
    </lightning-card>  
      
</template>


import {LightningElement, api, wire, track} from 'lwc';  
import fetchRecords from '@salesforce/apex/RelatedListController.fetchRecords';
import {NavigationMixin} from 'lightning/navigation';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import {updateRecord} from 'lightning/uiRecordApi';
import {refreshApex} from '@salesforce/apex';
  
export default class RelatedList extends NavigationMixin(LightningElement) {   
  
    @api objectName;   
    @api parentFieldAPIName;  
    @api recordId;  
    @api strTitle;
    @api sortfield;
    @api fieldName1; 
    @api fieldName2;
    @api fieldName3;
    @api fieldName4;
    @api fieldName5;
    @api fieldName6;

    @track vals;

    draftValues = []

    connectedCallback() {
        const fields = [];
             
        if (this.fieldName1) {
            fields.push(this.fieldName1);
        }
        if (this.fieldName2) {
            fields.push(this.fieldName2);
        }
        if (this.fieldName3) {
            fields.push(this.fieldName3);
        }       
        if (this.fieldName4) {
            fields.push(this.fieldName4);
        }
        if (this.fieldName5) {
            fields.push(this.fieldName5);
        }
        if (this.fieldName6) {
            fields.push(this.fieldName6);
        }       

        if (fields.length > 0) {
            this.vals = this.recordId + ',' + this.objectName + ',' +   
            this.parentFieldAPIName + ',' + this.sortfield + ',' + fields.join(',');
        }
        this.fields = fields;
    }
      
    @wire(fetchRecords, {listValues: '$vals'})  
    records;

    handleSuccess(event){
        const evt = new ShowToastEvent({
            title : "Record updated successfully",
            message : "Record Id " + event.detail.id,
            variant : "Success"
        });
        this.dispatchEvent(evt);

        refreshApex(this.records);
    }

    navigateToNew(){
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: this.objectName,
                actionName: 'new'
            },
            state: {
                nooverride: 1,
                useRecordTypeCheck: 1,
                navigationLocation: 'RELATED_LIST',
                backgroundContext: '/lightning/r/Opportunity/'+this.recordId+'/view'
            }        
        });
    }
}
2
  • The standard__objectPage (instantiated via NavigationMixin.Navigate) doesn't return any visible indication back for any further action and hence, your custom component is unaware of what happens in the object page. [connectedCallback or renderedCallback) doesn't fire when the new related record is created]. handleSuccess won't execute unless you try to edit one of the existing child records in your custom component and hence, refreshApex method doesn't get called after child record creation.
    – arut
    Sep 14, 2020 at 11:02
  • You could introduce a refresh button icon (next to the 'New' button) and call refreshApex on click of this button icon.
    – arut
    Sep 14, 2020 at 11:08

0