Skip to content

Operations UI

Stanka Bozalieva edited this page Jun 11, 2018 · 10 revisions

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

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.
Clone this wiki locally
You can’t perform that action at this time.