Overview

Some workflows offer the fluctuation between multiple applications and/or sections within an application.

In order to accelerate users navigation flow, leaving an unsaved context, the Save Changes Dialog prevents changes to get lost. It alerts the user to possible data loss at the same time, providing interventional operations.

Look and Feel

When to Use

1
do
false

Recommended

  • In cases, where user navigates away of a content in edit mode
  • Consider implementing in applications that feature content changes without auto save features
  • Implement for the purpose of preventing the current window to close without warning
  • Consider when giving the user opportunity to remain on the screen they were on, alternatively to save or discard changes on exit
1
dont
false

Not Recommended

  • In cases where user is not navigating our of an edit in-process content area
  • Avoid with the existence of an auto save feature

Anatomy

Image
1
12.21; 63.25
Dialog Title
Contains the title of the dialog. A resume of dialog’s content.
2
37.40; 62.65
Illustrated Message
Fiori Moments graphical representation of the situation. Attention grabber.
3
61.82; 72.01
Situation Message
A clear statement of the situation accompanied by a detailed explanation what is going to occur.
4
73.33; 80.38
Avaliable Actions
Presents the available choices for user interaction when leaving the page or content in edit mode.

Dialog Setup

Consider the following settings due to predefined size and responsiveness in order to provide optimal content support.

<div> <div>Property</div> <div>Recommended Value</div> <div>Notes</div> </div> <div> <div>Width</div> <div>width: 22.000rem;</div> <div>Recommended dialog width</div> </div> <div> <div>Height</div> <div> <p>min-height: 24.5rem;</p> <p>height: auto;</p> </div> <div>Recommended minimum height. If the text starts wrapping due to internationalization, automatically increase the height.</div> </div> <div> <div>Padding</div> <div>padding: 1rem 2rem 0 2rem;</div> <div>Dialog content padding.</div> </div> <div> <div>Primary Action Button</div> <div>“Save”</div> <div>Emphasizes most prominent and frequent option; saves progress and exits window</div> </div> <div> <div>Secondary Action Button</div> <div>“Discard”</div> <div>Ghost button style with transparent background to emphasize second tier prominence: discards any changes made and exits window</div> </div> <div> <div>Tertiary Action Button</div> <div>“Cancel”</div> <div>Transparent button style to revert to current session; keeps the user on the window to further edit changes made</div> </div>