Warn users about unsaved changes? 🤨

What’s the best practice of warning users about UNSAVED CHANGES, before they leave the page? :face_with_raised_eyebrow:

Hi @bestbubbledev, I believe since users could of course use the browser navigation to leave a page, it is probably safest to use a script like the following & add the script inside a “Run Javascript” action ONLY once an input value has been edited:

window.onbeforeunload = function() {
     return "All unsaved data will be lost. Are you sure?";
};

When user has saved, remove this via:
window.onbeforeunload = null

1 Like

Hi @bestbubbledev I saw you cross-posted this on twitter probably because my reply came in late.

As you said on twitter (and I totally relate) you would not want to create a workflow for every input’s change and then add the script to the page in each one of them.

I am working on a plugin for this now which allows you to add an id of a group and any inputs, multilines, dropdowns inside that group that change will add the script to the unload event.

Let me know what you think.

@bestbubbledev EDIT here is preview link for the plugin.

2 Likes

That is a great idea. Would it also be possible to trigger the warning on navigation inside the app, so e.g. when the user is not using the browser “back” button, but a “back” button inside my app?

I use autobinding a lot

1 Like

Yes definitely one way to work around this (though sometimes not reliable), plus there are simply use cases where you do not want to auto-update data but need additional confirmation at the end of the form like a “Save” button.

I have added a “Go to page” action at the bottom and it works.
As the unload event of the window is triggered:
PREVIEW
EDITOR

2 Likes

Sounds great! And looks promising. :sunglasses:

Here’s a quick feedback/question:

  1. When I click on “Go to index” without changing input value, it doesn’t work.
  2. When I change the input value, do you cross-check it in the DB or the modal pops up no matter what?
  3. I presume you do not check the data in the DB. So can you add this to your script → when I click on save button remove the input from the script?.. I assumed I’d add ID attributes to buttons as well? but not sure how would I associate each button to its respective input element.

Hope this is clear. Let me know if you need any clarifications from me.

Thanks for the quick feedback @bestbubbledev . :+1:

  1. Isn’t that what it should be doing? If no input was changed then do not issue a warning?
  2. + 3. At the moment the warning is simply issued as soon as you have modified any of the inputs. Next improvements will be:
    (1) to add altered inputs to a list and remove an input from that list if the value is changed back to its original value
    (2) provide an action to reset this list e.g. once save button is clicked. I guess this is what you are aiming for?

How the plugin currently works is that you can hand it the id of the group surrounding your inputs (could also be the page id), is that clear?

That‘s nice, what about single page apps where you hide/show groups without leaving the page? Would that also be possible?

2 Likes

I could add an extra action so that you can trigger the alert manually whenever you want.
Also I think it makes sense to expose a state which you can use in a condition on that action or anywhere else.

Wdyt?

3 Likes

Sounds good!

Hi @reger-alexander @bestbubbledev I have updated the plugin.

Editor
Preview

2 Likes

Any plans on when you will release the plugin?

Already submitted this for review. Will update here once approved.

@reger-alexander @bestbubbledev
Plugin is now live: Unsaved Changes Tracking & Alerts Plugin | Bubble

2 Likes

This is awesome. Meanwhile I’ve figured out a UX way of doing this but will def. take a look in the evening!

1 Like

Interesting! What did you figure out UX wise?

1 Like

Hey @jukoen thanks for building this! Just bought it and have it working but have a question -

I autobind the content in the inputs I have on the page that I’m using your plugin. I do this as an extra safety measure. What i noticed is that this creates an odd user experience. Say I type some new content into an input and I haven’t clicked out of the input so the autobind hasn’t saved the new content to the database yet. If i go to close the browser window your plugin comes to the rescue. But when I click “cancel” on the popup, the content autobinds to the database. But there is no trigger to “resetunsavedchanges” so even though the user sees a “Your changes have been saved :+1:” alert, when they go to close the window again they get the popup “you may have unsaved info…”

Do you have any thoughts on how to handle this? I have a save button that I use to reset unsaved changes element and that works, but the autobinding creates a weird ux. Thanks!

Hey @arensbpa, thanks for reaching out!
Would it be sufficient for you, in cases when you click “cancel” on the popup, the User keeps editing event is fired?

From there you can then deselect the input (I added a new action), safe the input’s content via auto-binding & reset the unsaved changes element?

Here’s a quick demo.