Warn users about unsaved changes? šŸ¤Ø

Questions
1

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

2

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
3

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
4

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?

5

I use autobinding a lot

1 Like
6

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.

7

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
8

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.

9

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?

10

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

2 Likes
11

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
12

Sounds good!

13

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

Editor
Preview

2 Likes
14

Any plans on when you will release the plugin?

15

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

16

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

2 Likes
17

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
18

Interesting! What did you figure out UX wise?

1 Like
19

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!

20

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.