Simple undo in HTML applications

ownCloud follows the design principle of Never Use a Warning When you Mean Undo : Instead of showing a popup dialog that you have to confirm to e.g. delete a file, the action is taken immediately. ownCloud does however show a small notice that something has been deleted. Clicking the notice will restore the deleted items.

When working on my Tomboy note sync server, I had to implement deletion of OAuth access tokens. It is possible to implement it in two ways: Full and Simple.

Full

When the user clicks "delete", a request is sent to the server and the token's database row gets the "deleted" flag set. A notification is shown, telling the user that he can restore the token by clicking on the notice.

When the user clicks "undo", another request is sent to the server and the deleted flag gets reset.

This also implies a way to clean the database of deleted tokens.

Simple

I dubbed this "simple" because it's simple to implement, compared to the steps necessary in full deletion. It works as follows:

When the user clicks "delete", the token HTML table row is hidden. A notification is shown, telling the user that he can restore the token by clicking on the notice. A JavaScript timer is started that will send the delete request to the server in 5 seconds.

After 5 seconds, the javascript timer fades the notice out and sends the delete request to the server. The token is permanently deleted now.

If the user clicks the notification within the 5 seconds, the timer is stopped. The token row in the HTML table is made visible again.

Considerations

When the user leaves the page within the 5 seconds, the delete action requests are immediately sent to the server via an onbeforeunload event handler. You have to send the requests in synchronous mode, since the browser tab will be closed before the request reaches the server in async mode.

You also have to take care of multiple timeouts: What happens if the user deletes 2 tokens and then clicks undo? I chose to restore both tokens.

Code

The JavaScript code can be found in js/grauphel.js .

Screencast

Written by Christian Weiske.

Comments? Please send an e-mail.