The new record allows users to add new content.

New record page

Structure

 New button

The “New” button, in the primary style, shall be placed on the right side of a pane header to enable users to add new content.

 New record: 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} {create icon} “New” + {record type} 

Behavior

General

When users click on the “New” button, they shall be redirected to the new record page.

When they start typing, the “Save & close” button changes from the disabled to the primary style.

Adding & deleting

Users can add text fields by clicking on the “Add {category name}” button in the default style.

When a multi-column list is used in a new record 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 creating a new record, 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 record

When users save record, they are redirected to the previous page where they can verify the record they just created.

A toast should also appear to confirm the action. 

Related pages

The duplicate option allows users to create a copy of a record.
The edit record page allows users to select, edit, add and delete fields.
The Full view option allows users to see a record in a full-width view.
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.