Reload after "e.force:editRecord"?

Question

I have a Lightning Component that displays a lightning:dataTable of custom object records. Displayed fields include Name, Amount, and Date. I need the fields to be editable, but dataTable's inline editing feature doesn't support the date datatype. So instead, I've added a column with an edit button that calls the editPayment function.

editPayment: function(cmp)
    {
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
            "recordId": cmp.get("v.recordId")
        });
        editRecordEvent.fire();
    },

That pops open the edit modal and everything is cool. But... after the record is edited, I need to load the edited data for my dataTable. My question: how do I know when the edit has been completed? Is there a way to setup a callback? Is the modal event in communications with the component that birthed it?

---

Update: actually, the Callback thing hadn't occurred to me until I got to the end of writing that post. After posting, I searched on editRecord callback and found some other threads -- looks like others have had the same issue.

https://success.salesforce.com/ideaView?id=0873A000000CQQiQAO

and

Callback event on $A.get('e.force:editRecord') in lightning

It's some consolation to know I'm not alone on this, but neither of these threads had an answer...

What about... browser focus? After the modal closes, could I detect that browser focus has returned to my component?

Answer 1

I ran into this exact problem and solved this using a listener like this:

<aura:handler event="force:showToast" action....>

While really ugly, you can successfully listen to a success toast fired from force:editRecord and parse it to see the message and type so you can refresh accordingly.

Answer 2

Apparently there is no standard way to capture the save event from the standard force:editRecord Event - I think - Only way around this is to create a new custom component with your own custom save button. then force:recordSaveSuccess will work.

note - that with lightning:recordViewForm fields will get refreshed after save.

To maybe save some time to ppl here. This is what tried so far (last option seems to work but bit ugly ):

<aura:handler name="change" value="{!record}" action="{!c.doRefreshPage}"/>

// record does not change - no invoke to function

 <aura:handler event="force:editRecord" action="{!c.doRefreshPage}"/>

//Where it fires as Modal comes up

<aura:handler event="force:showToast" action="{!c.refreshAll}"/>

//Will be invoked after save - but multiple times - best option currently unfortunately - so had to hack it:

JS Controller

refreshAll: function (component, event, helper) {
        var eventType = event.getParam('type');
        var indexCall = 0; //making sure function not firing too many times
        if(eventType == 'SUCCESS'){
        if(indexCall == 0){
            indexCall +=1;
         var TreeGroup = component.find('TreeGroup'); //the aura:id of my component
         if(TreeGroup)
         var auraMethodResult = TreeGroup.refresh();    
        }
       }
    },

Answer 3

tsalb's and sfdx bomb solutions work, but I recommend adding additional logic to the action to fire ONLY when the right toast message is display. If not, your table will refresh any time a toast message is shown.

COMPONENT

<aura:handler event="force:showToast" action="{!c.refreshAll}"/>

CONTROLLER

refreshAll: function(component, event, helper){
  var eventMsg = event.getParam("message").toUpperCase();
      if(eventMsg && eventMsg.includes("ACCOUNT") && eventMsg.includes("WAS SAVED")){
         //Add logic to refresh dataTable here
      }
},