Grid Paging Specification

1. Revision History

Version	User	Date	Notes
0.1	Danail Marinov	July 3, 2019	Initial draft

Stefan Ivanov | Date:
Simeon Simeonoff | Date:
Konstantin Dinev | Date:

2. Overview

The Grid Paging Component is used to:

inform the user on which Grid page he is currently on
allow navigation to the previous/next and first/last pages of the Grid content
to inform the user how many records are being displayed per page and to let him select number of records to be displayed per page

3. User Stories

As an end user I want to see how many records are currently being displayed per page.
As an end user I want to be able to select the number of records displayed per page.
As an end user I want to see on which Grid page I am currently on.
As an end user I want to be able to navigate to the first/last Grid page through a button icon.
As an end user I want to be able to navigate to the next/previous Grid page through a button icon.

4. Functionality

4.1 End user experience

4.1.1 Initially, there are no filters applied on the grid columns. As it is shown on the design example below, there are several types of columns(not all combinations are covered in the example): filterable and sortable, not filterable and not sortable and just sortable. Hiding/unhinding column combobox is placed in the toolbar.

4.1.2 The Excel style filtering is opened by selecting the filter action icon which triggers dialog window or with ENTER (after having focus on the ESF action icon). There is indication on the header cell showing that filtering is applied on it plus the name of the column on the header of the dialog. In the dialog window are placed UI controls for:

sorting with predefined Ascending sorting
pinning column
hiding column
option for adding custom filter base on the type of column (numeric, text etc)
inactive search bar plus list of all column values for quick filtering (by selecting them)
Cancel and Apply buttons Moving column, pinning, hiding depend on whether the feature is enabled.

Initially, the dialog window is placed in the centre of the viewport. The column values are all selected. The dialog window is draggable along the grid area. The "drag" icon (in the dialog header) indicates that the dialog window is draggable but it is not an action icon because dragging can be performed at on-click everywhere on the dialog header. Sorting action in the header is also accessible despite that dialog box is opened. Sorting can be performed also from the dialog UI. Compared to Filtering Row, Excel-style filtering is set to defer which means that the filtering is NOT live by default, so changes will be applied after confirmation by the user. Also, I, as an end user, can apply custom filter with predefined condition (similar to Excel UX). As to the keyboard interaction - by using TAB button, I, as an end user, can move focus on each button one after the other. Initially after opening the dialog, the focus is on the Ascending sorting button, so if clicking TAB will move it Descending sorting button. If Sorting action is triggered, it will be executed immediately without closing the dialog. Focusing on the Pin column button and then clicking ENTER will pin the column immediately and will close the dialog, because Pinning column may change column header position. Hiding column would immediately hide the column and close the dialog. Focusing on Text Filter option (the filter type depends on the data type) and the clicking ENTER, will open the menu with filter conditions. I, as an end user, can put focus on each of them using TAB and can trigger one of them by confirming with ENTER. Then, this dialog will be closed and the Custom Auto-filter will open.

Note: From that ESF dropdown can be applied column hiding, but obviously unhiding can be performed only from the combobox in the toolbar.

If using keyboard in the Search field, the focus will be placed first on the condition type (in the design below is shown condition Contains). Selecting with ENTER will trigger dropdown (similar to Filtering row UX) with all possible conditions. After selecting one of them and confirming with ENTER, the focus will be moved to the value input. Of course, as an end user, I can skip selection of condition and typing value manually and can select from list with the column unique values.

4.1.3 Selection of Adding custom filter closes the initial dialog and opens another dialog window where the user can define custom filters. The first filter condition is predefined based on the previous user's selection and the focus is put on the value input. If I, as an end user, want to change the previously chosen condition, I can do it with SHIFT+TAB which will move the focus to the condition selector and triggering the dropdown can be done with ENTER. Filters can be fully edited and removed, as well as new filters input can be added, but minimum one filter will remain available (otherwise is pointless to have Custom auto-filter dialogue). The predefined value of the And/Or selector depends on the type of condition selected in the previous step.

4.1.4 The Custom AutoFilter contains inputs where I, as an end user, can define condition, type value or select (using the input dropdown) from the column values. In this dialog can be added more filters and removed the existing ones. If, I as an end user, add more filters, every new filter consists of two inputs - one for condition and another for specific value, as well as And/Or selector. After typing at least one symbol, the Clear filter button goes from disabled to inactive. Using keyboard navigation I, as an end user, can move to the value input (to start typing manually) or trigger the dropdown with this column unique values. After confirming my selection with ENTER, the focus moves to the Remove condition action icon. When it is focused, I, as an end user, can confirm removing the condition with ENTER which will remove also the And/Or selector attached to the condition input. Using the keyboard navigation, I, as an end user, can navigate to Add filter button, then Clear filter, Cancel and Apply.

4.1.5 After defining filter condition and value, all the grid data stays unfiltered until user's confirmation.

4.1.6 As an end user, I can add more than two filters. The size of the dialog does not change, a scroll appears instead.

4.1.7 When the dialog is being closed, the filter icon on which filtering has been applied changes its color to Secondary.500 indicating that filters are applied. The grid data got filtered.

4.1.8 The list of unique values may include also "Blank cells". On the design below is shown also example when the dropdown's initial position is changed.

4.1.9 Column moving can be applied on opened dropdown by dragging the columns headers. If so, when clicking out of the dialog, it closes and the user rearrange column headers. Column moving can also be applied from the Move left/right buttons in the dropdown. If so, when clicking on the button Move left/right, the column headers moves, but the very dialog stays at its initial position. If the column that the user wants to move is the last one on left/right, then the button Move left/right is disabled.

4.1.10 If I, as an end user, apply filter(s), then close the dialog and open it again with intention to edit filtering, a Clear column filters button is added to the ESF dialog which has the following design:

4.2 Display density for Comfortable, Cozy and Compact.

Zeplin file: zpl://project?pid=5ce53acf5f66941e1fafe414 https://zpl.io/V0LY9Xm

Comfortable

Cozy

Compact

4.3 No results found when searching in the ESF list:

Acceptance criteria

5. ARIA Support

Specify only if applicable

6. Assumptions and Limitations

Assumptions	Limitation Notes

7. Test Scenarios

Automation

Clicking 'Ascending' - sorts the grid properly, clicking 'Descending' - sorts the grid correctly and deselects 'Descending' button.
After opening filter dialog on a sorted column, the correct button should be toggled.
Clicking 'Move left/right' should correctly move the column.
Clicking 'Pin/Unpin' column should correctly pin/unpin the column.
Clicking 'Hide column' should hide the column.
After entering value in first input, the grid shouldn't be filtered, 'And' operator should be selected and clear button should become inactive.
If two values with And operator are entered, there shouldn’t be a selection in the list.
If two values with Or operator are entered and one of them has operator different from ‘equals’, there shouldn’t be a selection in the list.
If two values with Or operator are entered and they are in the list below, they should be selected.
Changing And/Or operator should reflect in the selection of the list.
Changing operator should reflect in the selection of the list.
If three or more values are selected and we enter a new one in the input, the selection should be cleared and the grid should be filtered.
Deselecting all values and then selecting two should populate the inputs.
Selecting ‘all filters’ item should clear the filter.
When dialog is closed and the filter has been changed the filter icon should be updated.
Selecting 'Contains', 'Does not contain', etc, from the menu should open another filter dialog and populates the correct operator.