Performing actions on unsaved data

Question

You have a user interface that allows users to manage their foos in a standard CRUD fashion: You have a "list view" and a "detail view", the latter being used to create new foos or modify existing foos. "Save" saves the changes and returns to the list, hitting the browser's back button brings a warning and then discards the changes. Nothing surprising here.

Now you want to offer the user the option to download a nice foo data sheet PDF. Adding a button in the list is no problem, but what do you do about the detail view? The problem is that changes need to be saved before the PDF can be generated.

So far, I see two ways to fix that, and I don't like either of them.

Option 1: Prefix every action with "Save & ...". It does the job, but it's not very pretty:

Option 2: Force the user to save the changes before performing actions. Drawback: It now takes two clicks to save and return to the list (the second version appears after the user clicks "Save" in the first version):

I assume that this is a common problem, so there's probably a simple, elegant solution I am missing. What is it?

Answer 1

Regular solution:

Many applications that export data in other formats allow you to do that at any time.

For the requirement of saving before export:

• Save all or parts of your Foo object as it is changed.

• There is no longer a need to save the Foo object manually.

• Exporting data no longer takes two clicks.

Doing this replaces your save button with OnChanged events for fields.

To save race conditions of pressing the "Download PDF" button immediately after your automatic saving on changing fields, you also make the "Download PDF" button save the entire Foo object payload.