The edit record page allows users to select, edit, add and delete fields.

Edit record page

Structure

“Edit” button

An “Edit” button, in the primary style, shall be placed on the right side of a pane header to make it editable. 

Pane header

The pane header is composed of a close icon on the left, a disabled “Save & close” button on the right, a down arrow next to the title to access the pane menu and a title with the following format: {Record type icon} {Record type} • {Record’s primary identifying characteristics} {Last updated} • {secondary identifying characteristics}

Content

The content layout shall be similar to the selected record with editable text fields.

Behavior

General

When users click on an edit button, they shall be redirected to the edit record page. When they start editing, the “Save & close” button changes from the disabled to the primary style.

Adding & deleting

 Users might be able to add text fields by clicking on the “Add {category name}” button in the default style. They shall also be able to delete a field by clicking on the delete icon next to it.

When a multi-column list is used in an edit screen, a delete and add icon could be added at the end of each list items so users could perform those actions in a quick and easy way.

Error

If users click on the “Save & close” button without filling all mandatory fields, those fields will have an error style and a message banner should be displayed.

Error style when accordion is extended
Error style when accordion is collapsed

Cancelling changes

If users would like to cancel changes, they can click on the cancel option found in the pane header menu. 

If changes have been made, the unsaved changes modal shall appear no matter how users try to leave the page (by clicking on the close icon, the cancel option or a FOLIO navigational element). 

Saving changes

When users save changes, they are redirected to the previous page where they can verify the changes they made.

A toast should also appear to confirm changes. 

Related pages

The duplicate option allows users to create a copy of a record.
The Full view option allows users to see a record in a full-width view.
The new record allows users to add new content.
A message banner is triggered when: There is an important update related to a pane. For instance: “John Doe has an overdue loan”. An er...
A toast is a self-dismissing bar used to give users non-critical info about action status within an app or another app: record created, fil...
This modal is a confirmation modal that prevents users from leaving an edit record page without saving changes.