Creation and edition modes
Creation mode
This section describes the expected behavior of a creation form (create an object/add an element that did not exist before).
Page Title
Page Title is always visible on a form in creation mode. Page Title always has a backlink to come back to the previous page.
Content
"Create (object)" or "Add (object)"
Should I say Create or Add? Learn more about which verb to use
Save Bar
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.
Form submission
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.
Success behavior
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
Content
Follow Alert content guidelines.
Cancel form
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
Edition mode
This section describes the expected behavior of a form in edition mode (edit an object/edit an element that already existed).
Page Title
Page Title is always visible on a form in edition mode. Page Title always has a backlink to come back to the previous page.
Content
Title: "(name of the object)" or "Edit (name of the object)"
Save Bar
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.
Form submission
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.
Success behavior
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
Content
Follow the [item] + past participate verb format.
You do not need to add words such as "successfully" or "with success". Learn more
Discard edits
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
Last updated
