2

Will beforeunload event work with Lightning as it is a single page application. I came across multiple older posts which informs that this is not possible, but I want to confirm if this still will not work.

2
  • LockerAPIViewer says its supported! Commented Dec 19, 2018 at 15:27
  • 3
    @codeyinthecloud it's supported, but doesn't fire unless you click a link that leaves the app/community/LEX entirely. Fortunately, there's a new way to do so.
    – sfdcfox
    Commented Dec 19, 2018 at 16:32

2 Answers 2

4

Use the new lightning:unsavedChanges component to warn about loss of data, etc.

<aura:component implements="flexipage:availableForRecordHome" access="global">
    <lightning:unsavedChanges aura:id="unsaved"
                              onsave="{!c.handleSave}"
                              ondiscard="{!c.handleDiscard}" />
    <lightning:button label="Make Unsaved Changes" onclick="{!c.makeUnsavedChanges}" />
    <lightning:button label="Clear Unsaved Changes" onclick="{!c.clearUnsavedChanges}" />
<aura:component>

({
     makeUnsavedChanges: function(cmp, evt, helper) {
         var unsaved = cmp.find("unsaved");
         unsaved.setUnsavedChanges(true, { label: 'My component name' });
     },
     clearUnsavedChanges: function(cmp, evt, helper) {
         var unsaved = cmp.find("unsaved");
         unsaved.setUnsavedChanges(false);
     },
     handleSave: function(cmp, evt, helper) {
         ... my custom save logic
         // When the custom save logic has completed the setUnsavedChanges method
         // must be called again to return control to the lightning UI
         var unsaved = cmp.find("unsaved");
         if (something went wrong) {
           // return control to the lightning UI while indicating that the content is still unsaved, preventing it from being dismissed
           unsaved.setUnsavedChanges(true);
         }
         else {
           // return control to the lightning UI while indicating that the content is saved
           unsaved.setUnsavedChanges(false);
         }
     },
     handleDiscard: function(cmp, evt, helper) {
        // similar to the handleSave method, but for discarding changes
     }
})
7
  • +1 This is cool. But can't we use just the unrender() to capture any data based on before component destruction? Is my understanding correct that lightning:unsavedChanges is just a better way to handle the component destruction? Commented Dec 19, 2018 at 16:38
  • 1
    @codeyinthecloud yes, but by the time unrender is called, it's too late to cancel the navigation. This component is specifically designed to behave like beforeunload but for Lightning. unsavedChanges allows you to actually allow the user a second chance to cancel before they lose their changes.
    – sfdcfox
    Commented Dec 19, 2018 at 16:43
  • @sfdcfox unfortunately lightning:unsavedchanges is a part of spring 19 which will be released in February for non-preview sandboxes and probably some more time to be released in Production. So, I cannot use this solution for at lease for now.
    – devsfdc
    Commented Dec 30, 2018 at 14:37
  • @devsfdc yes, there's no current solution; you have no idea when you're about to unload because of the nature of the single page application model. You're right that it does not work "for now", but there is a solution on the horizon.
    – sfdcfox
    Commented Dec 30, 2018 at 16:47
  • @devsfdc it should work.
    – sfdcfox
    Commented Dec 30, 2018 at 21:34
1

lightning:UnsavedChanges works only in the context of console application such as closing the tabs or subtabs and not in browser close/refresh events. So, this cannot be achieved in lightning.

You must log in to answer this question.

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