Notify user that changes are not persisted until form is sent

[amiedes]

For nested forms that make use of modals to edit a subset of the information, we should make clear to the user that changes made inside the modal won't be saved until the whole form is sent (click "Update").

The "save" button on the modal only persists the changes on the DOM, not in the DB.

Affected screens:

• Create / edit of processes
• Create / edit of polls

Tasks:

• Design a flash message to alert the user (@furilo)
• Implement (@amiedes)

[furilo]

@Crashillo can you do a proposal as how you would do this? My idea was to show a flash like message saying something like: "These changes will be saved only when you Update the process"

[Crashillo]

Definitely, I'd use an alert banner. Perhaps, with a different color, even more highlighted. That banner would come up when modal is saved. Below is the easiest implementation:

Due to the form height, it would be better if that banner was in the update sticky panel, as:

Another option is to place the banner as shown in the first image, but make it sticky all over the page.

As well, we could inform in the modified form field itself:

Not exclusively here, but inside the sticky also, to inform user where is/are the modifications.

Tell me your thoughts.

[amiedes]

• I like the sticky idea, since when a few questions have been added the banner won't be visible unless we do this.
• In case we make it sticky, I'd put it in the update panel, otherwise maybe it's too "obtrusive"
• I also think this will be really useful:

[furilo]

Let's go with the flash inside the sticky panel.

But avoid the icon for the time being (until we start using them in other places as well), and maybe make the font size the same as in Borrador / Publico ?