Last Update: 27.11.2023

Platform: Web

Designer: Matthias Stenzl

Intro

Fiori doesn't specifically define a pattern for adding/creating objects at a high level. There is a section within the Responsive Table guidelines that describes how to Add/Create items in a table. We should follow the guidelines for the affordance shown here – using a text-only "Add" or "Create" button in the toolbar. What happens after the affordance is triggered is dependent on the type of object being created and the module requirements, but should follow as similar a workflow as possible.

Usage

Do not use a plus icon together with text – this is redundant.
Use Create if the button adds a brand new item that doesn’t yet exist on the database.
Use Add if the item already exists and is merely added or assigned to the current object.

Show new items as the first item of the table, with a visual highlight at the beginning of the row.

Behavior & Interaction

In order of priority (most recommended first), these are:

Add the item inline: Create an empty, editable row as the first item of the table. Show the Save button on the table toolbar. This option is recommended for simple scenarios with just a few columns and no option to hide columns.
Open a dialog for larger tables with up to 8 editable columns. Save the new item at the dialog level.
Navigate to a new page: This behavior should only be used for very complex scenarios that cannot be handled by a dialog (for example, tables with more than 8 columns). When the user presses Save in the footer toolbar of the create page, navigate back to the table.
New: The item was just created inline and is in edit mode (for example, after pressing the Create button). It is highlighted with a visual indicator (information state).
Recent: The item was just created and is in read-only mode (for example, if Create leads to a dialog, and Save was triggered within the dialog). In this case, keep the item highlighted and display it as the first item of the table. Ignore current sort, filter and grouping criteria to keep the item visible.
Added: The item has been fully added. It follows the sort, filter, and grouping settings and also loses the visual highlight.
Inline creation: After Save was triggered on the table toolbar or at page level
Create with dialog: A table showing one or several items with the state “Recent” gets updated (for example, after sorting, filtering, or grouping, or when the browser is refreshed).