Operations UI

OperationsUI

1. Overview

The igxOperationsUIComponent facilitates functions that can be applied on a igxGridComponent column through a unified interface. The component will provide a dropdown menu containing all the operations available for that column (show/hide summaries, hide column, show filtering, etc). The feature will also be extensible, giving the option to the developer the provide custom options in the menu. Additionally we will provide control over what is shown in the header of any given column.

2. User Interface

opui

3. User Stories

As an end user, I want:

to have a single access point to interactions available for a certain column.
each option from the menu be intuitive as to what it will do.
each option to execute their function appropriately.
to cancel the igxOperationsUI clicking/tapping outside of it.
to have interactions done through the igxGridOperationsUIComponent be reflected on the grid's toolbar when appropriate.
to have every column hidden by the operations UI be reflected in the grid's column hiding component.

As a developer, I want to:

to provide my end-users with an intuitive UI for manipulating the data in my grid components.
to be able to turn the feature on or off on a column by column basis.
to be able to plug custom options in the operations UI menu.
to be able to specify what the default UI operation will be when I don't want to show the operation UI.

3. Functionality

Operation UI is a dropdown that by default holds the following list of data operations that can be applied on the data grid per column:

Summaries
Filter
GroupBy
Hiding
Pinning
Filtering is pending till Advanced Filtering is developed.

If the user adds just one feature besides sorting (filtering, summaries, group by, moving, pinning, hiding), the column header adds a corresponding icon with predefined interaction.

If more than one feature applied on a column, the more_material icon appears in the header and it toggles menu with the corresponding menulist of features.

The developer can disable features from displaying in the operationsUI. As they can add custom menuitems in it with a provided template.

ex.g.

Customer Number: GroupBy

Photo: None

Name: Pinning, Hiding, GroupBy, Show Summaries

Position: Pinning

Company: Filtering

Filtering: Summaries

opui

Functions per features:

Filtering from the OpUI toggles Advanced Filtering or Row Filtering(not developed yet), with pre-populated selection for the column. Requires igxGridToolbar Filtering from the Header toggles standard Filtering per Column or Row Filtering (not developed yet).
Pinning from the OpUI / Header Icon pins the column. As it updates the text and icon to UnPin.
Show Summaries from the OpUI / Header Icon displays available summaries for that column. As it updates the text and icon to Hide Summaries.
GroupBy from the OpUI / Header Icon Groups By the column (order of grouping?). As it updates the text and icon to UnGroup. Requires igxGroupbyUI
Hiding a Column from the OpUI / Header Icon updates the Hiding UI in the toolbar. Requires igxGridToolbar

4. Acceptance criteria

Have a dropdown menu, which can be displayed with a single click from a toggle inside the grid's column header.
Have each option in this menu do it's function.
Be able to extend the options with more custom ones.
Have a proper integration with the grid's column hiding and toolbar features.

5. API

IOperationItem interface

Fields

Name	Type	Description
icon	string	The name of the material icon associated with the option
name	string	The name of the option
action	function	What the option will do

IgxGridOperationsUIComponent component

Inputs and options

Name	Type	Description
column	IgxColumnComponent	The column associated with the component
girdID	string	The id of the grid associated with the component
toggleCSS	string	The css class of the grid's toggle
operationItems	IOperationItem[]	An array containing the allowed options for the column

DefaultUIOperation enum

Name	Description
OperationsUI	The default action will be to show the operations UI dropdown
Filtering	The default action will be to show the filtering dropdown
None	There will be no UI option shown in the grid's header

Added members to the igxColumnComponent component

Inputs and options

Name	Type	Description
pinnable	boolean	Determines whether or not the pin option will be shown in the operations UI
summarizable	boolean	Determines whether or not the summary option will be shown in the operations UI
defaultUIOperation	DefaultUIOperation	Determines what the UI option for this column will be (defaults to operaitions UI menu)
customOperationItems	IOperationItem[]	An array containing the custom actions for this columns, defined by the developer

6. Test plan

Automation

Test that the operations UI toggle is in the header when the feature is enabled.
Test that the operations UI toggle is not in the header when the feature is disabled.
Test that each dropdown menu item contains an icon and the name of the option.
Test that the dropdown menu item does what is expected.
Test that when a feature gets disabled it is excluded from the dropdown.
Test that each option does what is expected.
Test that when the developer provides custom options they are included in the dropdown and each option does what is expected.
Test integration with the column hiding feature.
Test integration with the grid's toolbar.
Test that when setting the column's defaultUIOperation to something other than OperationsUI, the operations UI toggle isn't not present in the column's header.