SIP - Grid Layout Widget - Web

From Emprise Wiki
Jump to: navigation, search

Setup from Procedure Builder (Test Plan Type Selected)

Instructional Message

Upon adding the Grid Layout Widget:

  • The single Container Section widget will be automatically added within the Grid Layout Widget and
  • An instructional message will display that will inform the user how to use the widget

TOMI-Web-Procedure Builder-Grid Layout Widget-Test Plan-Begin.png

Grid Layout Widget Properties Panel

TOMI-Web-Procedure Builder-Grid Layout Widget-Test Plan-Properties.png

Container Section Widget Properties Panel

TOMI-Web-Procedure Builder-Grid Layout Widget-Test Plan-Container Properties.png

Removal of Container Section Widget

IF the Container Section widget is removed, the Grid Layout Widget shall display the following:

TOMI-Web-Procedure Builder-Grid Layout Widget-Test Plan-Blank.png

Setup from Procedure Builder (Other Types Selected)

Instructional Message

Upon adding the Grid Layout Widget, an instructional message will display that will inform the user how to use the widget:

TOMI-Web-Procedure Builder-Grid Layout Widget-Message.png

Grid Layout Widget Properties Panel

Once the user determines if the grid will be column or row centric, how many Minor Sections/rows they will need, and clicks Save; the procedure builder main grid will update.
Minor Sections widgets will be added as a heading for each column and placeholders will be provided for adding the additional widgets. Data entry widgets can also be freely added to the procedure builder and the number in the properties panel will update accordingly.

TOMI-Web-Procedure Builder-Grid Layout Widget-Begin.png

Individual Widget Properties

After the widgets have been added to the first section, they will be replicated in the other minor sections.

TOMI-Web-Procedure Builder-Grid Layout Widget-Completed.png

Execution

Web Display

Grid Layout Widget Display

SIP-Grid Layout Widget-Web.png

Scrolled Right

SIP-Grid Layout Widget-Web-Scrolled.png

Vertical Scrolling Enabled / Max Height

SIP-Grid Layout Widget-Web-Max Height.png

Scrolled Down

SIP-Grid Layout Widget-Web-Max Height-Scrolled.png

Validation

SIP-Grid Layout Widget-Web-Validation.png

Business Rules
  • When an input is missed in the grid, the entire table and row containing the error will be highlighted in red (#E57A68) along with the field label and hint.
    • Even if only one input is missed the entire row shall still be highlighted to alert the user which row the error has occurred in. Only the specific data entry input field containing the error will be highlighted, though.
Validation Animation

SIP-Grid Layout Widget-Web-Validation Animation.gif

Web Specifications

SIP-Grid Layout Widget-Web-Max Height-Specs.png

Business Rules

  • Header Row/Column should remain static. Data/content should scroll beneath them.
  • Max Height of grid shall be 730px
  • Inputs and labels should be vertically centered within cells
  • Hint text below labels should wrap up to five lines if content exceeds the 200px width of the column
  • Single line text input content shall wrap up to two lines and then truncate if it exceeds the 280px width of the column
  • Navigating the grid with arrow keys/tab:
    • Direction (up/down vs left/right) will be determined based on the Data Entry selection (Row Centric or Column Centric) in the Grid Layout Widget Properties
    • When a user reaches the end of the grid, right arrow key/tab will take them to the next input
Retrieved from "http://wiki.emprisecorporation.com/index.php?title=SIP_-_Grid_Layout_Widget_-_Web&oldid=49577"