Grid Add Row
- Overview
- User Stories
- Functionality
- Test Scenarios
- Accessibility
- Assumptions and Limitations
- References
Team Name
Developer Name
Stefan Ivanov
- Peer Developer Name | Date:
- Stefan Ivanov | Date:
- Radoslav Mirchev | Date:
- Radoslav Karaivanov | Date:
| Version | Users | Date | Notes |
|---|---|---|---|
| 1 | Stefan Ivanov | 22.08.2020 | Initial Draft |
The Add Row functionality of the Grid provides the interface for inserting a new row of data that is input by the end-user field after field at the time of creation.
Inserting additional rows of data should be an easy and intuitive experience that feels like belonging to the grid. Added rows should appear after the last row in the current context and there should be a clear indication that sets the correct expectation about this position. While the user puts in data, the record is not subjected to filtering, sorting and similar data operations, this happens once the row addition completes with a confirming action, when also a Snackbar notification is shown confirming the addition.
End-to-end user experience prototype
Must-have before we can consider the feature a sprint candidate
...
Elaborate more on the multi-facetted use cases
Developer stories:
- Story 1: As a developer, I want to allow the addition of data rows via a property, so that I can let users insert records like in excel
End-user stories:
-
Story 1: As an end-user, I want to add rows of data in a grid, so that I can create new data records
-
Story 2: As an end-user, I want to trigger row addition from wherever I am in the grid so that I don't have to scroll to a particular place or look for a specific button to do so
- Story 3: As an end-user, I want to input values cell after cell for every column similarly to how I edit a row so that I can fill all columns
- Story 4: As an end-user, I want to add rows as siblings or children when data is organized hierarchically so that I have control over where records are inserted
-
Story 5: As an end-user, I want to cancel the addition of the data, so that I can discard my input so far
-
Story 7: As an end-user, I want to have a visual confirmation that a row has been added once I complete its input so that I have certainty that my data was added
- Story 8: As an end-user, I want to make the grid scroll to the just added row so that I can inspect if it contains the correct information
Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up
3.1. End-User Experience
** The Add Row UI appears below the row from which it was triggered and behaves like a normal row with respect to vertical and horizontal scrolling, including scenarios where some column may be pinned. Once a row is committed with a confirming action, any data operations over the grid such as sorting, filtering, and group by are carried over the new row as well. The Add Row UI respects the grid display density and always takes twice the height of a grid row.
** When multirow layouts are defined they affect the layout of the add row UI accordingly.
** When used in a TreeGrid the Add Row feature provides options to either insert the new row as a sibling at the same level for which the action strip is shown or as a child of it. In both cases, it is added as the last element at the bottom of the data island. prototype
** When used in a Hierarchical Grid the feature can be enabled for each grid in the hierarchy individually.
** End-to-end user experience. prototype
** Prepared design files for styling e.g. interplay with features and light/dark variants -> the add row UI leverages on existing styles and functionality defined for row editing with the only difference that the add row UI does not show a banner message.
3.2. Developer Experience
3.3. Globalization/Localization
Describe any special localization requirements such as the number of localizable strings, regional formats
3.4. Keyboard Navigation
| Name | Description |
|---|---|
3.5. API
| Name | Description | Type | Default value | Valid values |
|---|---|---|---|---|
| Name | Description | Return type | Parameters |
|---|---|---|---|
| Name | Description | Cancelable | Parameters |
|---|---|---|---|
Automation
- Scenario 1:
- scenario 2:
ARIA Support
RTL Support
| Assumptions | Limitation Notes |
|---|---|
Specify all referenced external sources