Operations UI

OperationsUI

Contents

1. Overview
2. User Interface
3. User Stories
4. Acceptance Criteria
5. API
6. Test Scenarios

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

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 more than one feature applied on a column, the icon "more" appears in the header and it toggles menu with the corresponding list of features.

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

If there is just one feature left to be shown the operations UI the header in the icon represents the corresponding feature.

ex.g.

Customer Number: GroupBy Photo: None Name: Pinning, Hiding, GroupBy, Show Summaries Position: Pinning Company: Filtering Filtering: Summaries

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.