+ Start a Discussion
shra1_devshra1_dev 

Refresh Lightning component on Opportunity record Edit Save (Standard Layout)

Hi Guys,

I'm trying to build a lightning component which will be used on Opportunity lightning UI. The component is placed in the right panel. The component loads pretty well on any Opportunity record view.

The problem here is when I try to update the opportunity record (which comes as popup block) the component in the right panel is not getting refreshed. By this the updated values are not showing up on the lightint component.

Need to find a way to refresh the lightning component on record save.

Any help would be appreciated!! 

Thanks
Shravan 
Best Answer chosen by shra1_dev
Dave The GhostDave The Ghost
Here is the code from my test app. My use case was in context of the Accounts and contacts but it should apply to any object. As far as my understanding when ever an object is saved then the current view is refreshed. This is visible by the spinner that is displayed over the top panel of the object. I added a handler to my component that uses the force:refreshView (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_force_refreshView.htm) and just recalled my init method but could call another method if need be. This basically ensured that any time the object that was hosting the component was refreshed that my component would also refresh as well.

Here is the Component Code:
<aura:component controller="editRecordSimulationController"
                implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName">
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:dependency resource="markup://force:editRecord" type="EVENT" />
    
    <aura:handler event="force:refreshView" action="{!c.doInit}" />


    
    <aura:attribute name="recordId" type="string" />
    <aura:attribute name="accType" type="String" />
    <aura:attribute name="accObj" type="account" default="{ sObjectType: 'Account'}"/>
    
    
    <ui:inputText label="Record Id" value="{!v.recordId}" required="true"/>
	<ui:button class="btn" label="Submit" press="{!c.setOutput}"/>
    
    <br />
    <br />
    <br />
    Account Type: <ui:outputText value="{!v.accObj.Type}" />
</aura:component>

Here is my Controller Code:
({
    doInit : function(component, event, helper) {
        var recordId = component.get("v.recordId");
        var action = component.get("c.getTypeFromAccount");
        action.setParams({
            	recordId: recordId
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var acc = response.getReturnValue();
                component.set("v.accType", acc.Type);
                component.set("v.accObj", acc)
            }
        });
        
        $A.enqueueAction(action);
    },
	setOutput : function(component, event, helper) {
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
             "recordId": component.get("v.recordId")
        });
        editRecordEvent.fire();
	}
})



 

All Answers

Dave The GhostDave The Ghost
So I was facing the same issue and was able to find a fix. I hooked into the force.refreshView event: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_force_refreshView.htm

Took some trial and error but was able to get it working.

   <aura:handler event="force:refreshView" action="{!c.refresh}" />
 
shra1_devshra1_dev
Hi Dave,

Thanks for the response.

I'm bit confused with the solution given. Could you please explain th workaround with an example? Actually I'm dealing with the Opportunity standard Edit functionality to update the record in lightining feature. Once the record is updated the entire page is not getting refreshed. By this my lightning component in the right panel is not getting refreshed. Please find the screenshots below.

User-added image
User-added image

Clicking on Save button should refresh my lightning component.

Please help me with an example..!!

Thanks.
Dave The GhostDave The Ghost
Here is the code from my test app. My use case was in context of the Accounts and contacts but it should apply to any object. As far as my understanding when ever an object is saved then the current view is refreshed. This is visible by the spinner that is displayed over the top panel of the object. I added a handler to my component that uses the force:refreshView (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_force_refreshView.htm) and just recalled my init method but could call another method if need be. This basically ensured that any time the object that was hosting the component was refreshed that my component would also refresh as well.

Here is the Component Code:
<aura:component controller="editRecordSimulationController"
                implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName">
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:dependency resource="markup://force:editRecord" type="EVENT" />
    
    <aura:handler event="force:refreshView" action="{!c.doInit}" />


    
    <aura:attribute name="recordId" type="string" />
    <aura:attribute name="accType" type="String" />
    <aura:attribute name="accObj" type="account" default="{ sObjectType: 'Account'}"/>
    
    
    <ui:inputText label="Record Id" value="{!v.recordId}" required="true"/>
	<ui:button class="btn" label="Submit" press="{!c.setOutput}"/>
    
    <br />
    <br />
    <br />
    Account Type: <ui:outputText value="{!v.accObj.Type}" />
</aura:component>

Here is my Controller Code:
({
    doInit : function(component, event, helper) {
        var recordId = component.get("v.recordId");
        var action = component.get("c.getTypeFromAccount");
        action.setParams({
            	recordId: recordId
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var acc = response.getReturnValue();
                component.set("v.accType", acc.Type);
                component.set("v.accObj", acc)
            }
        });
        
        $A.enqueueAction(action);
    },
	setOutput : function(component, event, helper) {
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
             "recordId": component.get("v.recordId")
        });
        editRecordEvent.fire();
	}
})



 
This was selected as the best answer
Dave The GhostDave The Ghost
Here it the APEX controller code:
public class editRecordSimulationController {

    @AuraEnabled
    public static Account getTypeFromAccount(string recordId)
    {
        Account acc = [select Name, Type from Account Where Id = :recordId limit 1];
        return acc;
    }
}

 
shra1_devshra1_dev
Thanks Dave it worked..!!
deechandeechan
Hi Dave,

I am trying to achieve something similar to the above.

The object that I am trying to update is a custom child object (of custom parent object).
The event force:refreshView does not seem to be working.

I have tried several other save events too, but it does not seem to listen to the event.
Do you have any suggestions?

Thanks!
YiQin HeYiQin He
Hi Dave,

Your solution works like a charm! 
The only problem is that it's not working when a record is deleted, do you know if there's any way to solve this problem?

Thanks!
Andrew B. DavisAndrew B. Davis
While this solution works for Lightning Experience, it does not work in Salesforce1. Salesforce1 is very conservative about when it fires events so doesn't automatically reload pages that it's previously loaded, and instead just uses the cached version. This answer on StackExchange provides a resolution (https://salesforce.stackexchange.com/questions/66135/reload-lightning-component-when-clicking-back-from-standard-opportunity-page). I'm copying the answer from Diana Widjaja Myerscough here for convenience:
You could try firing force:refreshView during an aura:locationChange event. Add the locationChange handler to your component.
<aura:handler event="aura:locationChange" action="{!c.update}"/>
And handle the event in your JS code.
update : function (component, event, helper) { 
  // Get the new location token from the event if needed 
  var loc = event.getParam("token"); 
  $A.get('e.force:refreshView').fire(); 
}
See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_aura_locationChange.htm for reference.
Christ Valentin 22Christ Valentin 22
Dave, your solution worked perfectly for me use case. Thanks for sharing
Nikhil Sharma 77Nikhil Sharma 77
A Perfect Answer Dave.
Thanks for sharing, I had a slightly different use case but it solved using the approach you suggested. 
Jatin Sethi 26Jatin Sethi 26
Hi Dave,

I am stuck with similiar situation but I want to refresh after edit operation gets completed. Since there is no callback or something so how I will get to know that edit operation is completed
Supriya Bethala 1Supriya Bethala 1
Refresh the custome component (Timeline) page after adding a new case record in lightning component.
  • Using lightning, I noticed that on Case, if I add some support case - records, the page will automatically refresh just after. It is very convenient, because it permits to see the updated record in that timeline.
  • In my case, I'm using timeline in custom page, In timeline you will have case, event, record view and other details, you can see in timeline. there when we add any new case records.
  • Its automatically refresh the timeline page and display the case record.
  • My issue is that I need to manually refresh the page to see that the field on timeline record was updated.
  • How to work on this issue and let me know if you need more information.
  • Any suggestions please ?