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'
}
});
}
}
standard__objectPage
(instantiated viaNavigationMixin.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
orrenderedCallback
) 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.