Creation and edition modes
Last updated
Last updated
This section describes the expected behavior of a creation form (create an object/add an element that did not exist before).
Page Title is always visible on a form in creation mode. Page Title always has a backlink to come back to the previous page.
"Create (object)" or "Add (object)"
Should I say Create or Add? Learn more about which verb to use
The Save Bar is always visible on a form in creation mode. Save and Cancel buttons are always enabled while the Save Bar is visible.
There can be some loading time when the form is being processed by our back-end before triggering errors or a success message. Turn the form into read-only mode during loading time to prevent users from changing values in the form.
When the user clicks the "Save" button in the Save Bar, the form is saved.
Add a success alert (green) with a link to create another object + another action if needed
The form goes from creation mode to edition mode
Follow Alert content guidelines.
When the user clicks Cancel or the backlink without saving form
Form pristine: no modal + back to previous page
Form dirty: Prompt-before-leave + back to previous page
This section describes the expected behavior of a form in edition mode (edit an object/edit an element that already existed).
Page Title is always visible on a form in edition mode. Page Title always has a backlink to come back to the previous page.
Title: "(name of the object)" or "Edit (name of the object)"
The Save Bar remains hidden until one field in the form has been changed. Save and Discard buttons are always enabled while the Save Bar is visible.
There can be some loading time when the form is being processed by our back-end before triggering errors or a success message. Turn the form into read-only mode during loading time to prevent users from changing values in the form.
When the user successfully changes one or several inputs in the form.
Add a success snackbar
The form stays in edition mode
The user stays on the form page
Follow the [item] + past participate verb format.
You do not need to add words such as "successfully" or "with success". Learn more
When the user clicks Discard or the backlink without saving form.
Form Pristine: no modal + back to previous page
Form Dirty: Confirm Modal + form goes back to the initial state (before changes) + user stays on form page
