I create a custom lightning component and have some unsaved data. I'd like to show a warning and optionally prevent the navigation when clicking to a navigation bar (such as Home, Account,.. ).

I already tried with aura:locationChange and beforeunload, but it didn't work. Does anyone have any solution for this case?

     <aura:handler event="aura:locationChange" action="{!c.handleLocationChange}"/>
     handleLocationChange : function (cmp, event, helper) {
        confirm('You have unsaved data. Do you want to leave?');

    window.addEventListener('beforeunload', function (e) {
       confirm('You have unsaved data. Do you want to leave?');
  • Take a look at the question mentioned in the comments above. You will want to utilize lightning:unsavedChanges here.
    – Jayant Das
    Feb 27 '19 at 15:29
  • 1
    The answer to the question which is marked as duplicate here was not applicable for the question as the component is not applicable for Community. If this is in Lightning Experience, then ligthning:unsavedChanges will work fine.
    – Jayant Das
    Feb 28 '19 at 0:52
  • @JayantDas thanks for your solution.
    – Justin TR
    Feb 28 '19 at 11:04

If you are in Lightning Experience (the component works only in this experience), you can use lightning:unsavedChanges here. You will need to just add the implementation on your custom component. Refer to the documentation for implementation details.

This component provides a way to notify the UI containment hierarchy of unsaved changes and to participate in saving or discarding those changes based on the user's decision.

To access the methods, create an instance of the lightning:unsavedChanges component inside of your component and assign an aura:id attribute to it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.