¶ Figma Prototype
¶ Context
Adding records will be an essential part of an inventory system as users will have to update their inventory to reflect changes. For example, if users added a new item to their list, we should allow them to update their inventory by adding records to the relevant database table.
¶ User Experience
The user experience for adding, editing, and deleting records should make table modifications seamless, intuitive, and visual. For example, users should do so without following any specific data entry order and across multiple records at once when adding and editing records. Errors, if present, shouldn’t block the user from performing other actions and should be easily corrected from the UI.
¶ Scenario: Adding a Record
¶ User opens a table
The user starts adding a record by opening the table in which they wish to add the record. They must have write permissions to insert the record.
An empty row should be placed at the bottom of every table so that users can easily add rows.
¶ Review Notes
¶ When the last row is not visible
The user can trigger the add row action from the top menu options. The table should then scroll to where the new row is positioned.
¶ user selects any new row cell
Users can select a cell and start editing its contents by double-click or on key-down on the selected cell. The user could also paste clipboard data into a selected cell.
- The new row is the last row of a table
- Once they start to edit the new row, the row number is assigned, and an asterisk is used to represent the unsaved state
- Another new row is added to the bottom once the existing one is assigned a row number
¶ user enters data into each field
Once a cell is in edit mode, the user can modify its content as needed. The content has to be valid for each specific data type. However, users are allowed to enter any value and change the data type before saving.
- The user can fill out the columns in any order, as long as they complete all required columns before saving.
- If multiple rows are added, users can fill out columns on more than one. However, all would have to be error-free for the save action to work
- Only one column at the time can be filled (multiple select is not possible)
¶ User enters an invalid value
The user enters invalid data, and as a response, the system shows a visual indicator for the affected table cell. The visual indication will remain until the error is resolved. The user can hover over the affected cell to display an explanation of why it is failing.
Attempting to save a table with errors will result in a dialog asking the user to fix the errors before continuing to the save step.
¶ user saves the new record
Once the table is free of errors, the user can click the save button to save the record. After this, the user will see the record added to the table.
¶ If the edited cell column is affected by a filter, sort, or group condition.
If the value of the edited cell is affected by a table display property, the row should move to its new position on save and not after edit.
¶ Scenario: Updating a Record
¶ user selects a cell from an existing record
Users can do table modifications on existing records by enabling edit mode on any cell.
¶ Scenario: Deleting a Record
¶ User selects a row
Users can select rows by a single click on any table cell or by clicking on a row number indicator.
¶ User deletes a selected row
Deleting a row or multiple rows can be done from the ‘Delete’ dropdown menu.
¶ user deletes multiple rows
To select multiple rows, users must select them from the number indicators rather than at the table cell level while pressing the shift key or command key for multi-selection.
¶ Interactions
¶ Save Status Indicators
Any changes to a table should trigger the save status to change. This is represented visually at the modified table object level and the table itself. Users can’t save changes individually. And instead, they can be saved in batches.
¶ Selecting rows
Users can select entire rows if they wish to copy their contents, delete them, or perform other row-level actions.
However, any selected cell will automatically set the row and columns to which it belongs as selected. The system will target any row or column action level actions to the current selection.
¶ Implementation Notes
- The table toolbar component introduced for the design of this feature could also be used to trigger the table properties panel discussed on the previous feature specs
¶ Additional Review Notes
¶ Accessing new record row
Access to the new record row control is provided via the table’s toolbar and table navigation controls.
¶ Last row visible
When the last row is visible, users can simply click on the new record row and activate it.
¶ Last row not visible
When the number of rows exceeds the visible portion of the table, a user can navigate to the bottom of the page by using the page navigation control.
¶ Order and Filter Independence
If a row’s position or visibility is affected, a notice will be displayed when the user hovers over the row.
¶ Required Fields
If a record has required fields, the system won’t save the new record until all the necessary fields are filled.
¶ Save Status
The saved status is displayed on the table toolbar and changes based on the save status of all modified rows.
¶ Disabled State while Syncing Changes
While saving is in the process, the system will block the affected rows from editing.
¶ Contextual Menu
Opening a menu on right-click was discussed and will be considered for a future iteration.
¶ Last row visible
When the last row is visible, users can simply click on the new record row and activate it.
¶ Last row not visible
When the number of rows exceed the visible portion of the table, a user can navigate to the bottom of the page by using the page navigation control.
¶ Order and Filter Independence
In the case that a row’s position or visibility is affected, a notice will be displayed when the user hovers over the row.
¶ Required Fields
If a record has required fields, the new record won’t be saved until all required fields are filled.
¶ Save Status
The save status is displayed on the table toolbar and changes based on the save status of all modified rows.
¶ Disabled State while Syncing Changes
While saving is in process the affected rows will be blocked from editing.
¶ Contextual Menu
Opening a menu on right-click was discussed and will be considered for a future iteration.