View source for SIP - Grid Layout Widget - Mobile

=== Mobile ===

==== Grid Layout Widget ====
[[File:Procedure Screen - Executor - Grid Layout Widget.png]]

===== Scrolled Right =====
[[File:Procedure Screen - Executor - Grid Layout Widget - Scrolled Right.png]]

===== Animation - Horizontal Scrolling =====

[[File:SIP-Mobile-Grid_Layout_Widget-Animation.gif]]

===== Measurement Guide =====
[[File:SIP-Mobile-Procedure-Grid_Layout_Widget.png]]

===== 128 Character Label =====
<br/><br/>
* Field labels have a max character limit of 128 characters
* The Label cells shall have a max width of 264dp to accommodate long labels.
** After width maxes out, text shall wrap as necessary.
* Padding above and below wrapped text shall be 16dp.
<br/><br/>
[[File:Procedure Screen - Executor - Grid Layout Widget-128CH.png]]

===== Keyboard Types and Specifications =====

{| class="tree-table wikitable"
|-
! style="min-width: 120px;" | Data Entry
! style="min-width: 120px;" | Input
! style="min-width: 320px;" | Keyboard Type      
! Notes 
|-                  
| Date 
| Date                   
| Scrolling Wheels for Year, Month, Day
| -                                                         
|-                  
| Date / Time                    
| Date and Time
| <ul><li>Scrolling Wheels for Year, Month, Day</li><li>Numeric Wheels for Hours, Minutes</li></ul>
| -
|-                  
| Time
| Time                    
| Numeric Wheels for Hours, Minutes
| -                                                         
|-                  
| Numeric   
| Number                 
| Number-pad
| -
|-                  
| Checkbox
| Checkbox                    
| Checkbox
| - 
|-                  
| Dropdown  
| Text                  
| Custom Scrolling Wheel
| - 
|-                  
| Feet / Inch 
| Number                   
| Number-pad
| -   
|-                  
| Single Line Text     
| Text               
| Alphanumeric
| -  
|}

<br>

[[File:Procedure Screen - Executor - Grid Layout Widget - Keyboard Generic.png]]


====== Alphanumeric Keyboard ======
[[File:Procedure Screen - Executor - Grid Layout Widget - Guides - Alphanumeric Keyboard.png]]

====== Number-pad ======
[[File:Procedure Screen - Executor - Grid Layout Widget - Guides - Number-pad.png]]

====== Scrolling Wheel ======
[[File:Procedure Screen - Executor - Grid Layout Widget - Guides - Scrolling Wheel.png]]

====== Checkbox ======
[[File:Procedure Screen - Executor - Grid Layout Widget - Guides - Button.png]]

====== Navigation ======
* Navigating the grid with the keyboard arrow buttons:
** 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 during the procedure building process
** When a user reaches the end of the grid, the right arrow button will navigate to the next input below the grid

==== Data Entry ====

===== Date =====
[[File:Procedure Screen - Executor - Grid Layout Widget - Date Entered.png]]

===== Date / Time =====

====== Date ======
[[File:Procedure Screen - Executor - Grid Layout Widget - Date Time Entered.png]]

====== Time ======
[[File:Procedure Screen - Executor - Grid Layout Widget - Date Time Entered 2.png]]

===== Time =====
[[File:Procedure Screen - Executor - Grid Layout Widget - Time Entered.png]]

===== Numeric =====
[[File:Procedure Screen - Executor - Grid Layout Widget - Numeric 2.png]]

===== Checkbox =====
[[File:Procedure Screen - Executor - Grid Layout Widget - Checkbox 2.png]]

===== Dropdown =====
[[File:Procedure Screen - Executor - Grid Layout Widget - Dropdown 2.png]]

===== Feet / Inch =====
====== Feet ======
[[File:Procedure Screen - Executor - Grid Layout Widget - Feet Inch 2.png]]

====== Inch ======
[[File:Procedure Screen - Executor - Grid Layout Widget - Feet Inch 4.png]]

===== Single Line Text =====
[[File:Procedure Screen - Executor - Grid Layout Widget - Single Line Text 2.png]]

===== Complete =====
[[File:Procedure Screen - Executor - Grid Layout Widget - Complete.png]]

===== Video Simulation =====

[[File:Adobe XD 2021-07-21 09-20-57.gif]]

===== Data Entry Validation =====
[[File:Procedure Screen - Executor - Grid Layout Widget - Validation.png]]

====== Business Rules ======
* When an input is missed in the grid, the the field labels and hints shall turn red, as well as the background of the cell that contains the error.
<br>

==== Adobe XD Mockup ====

https://xd.adobe.com/view/85d7e9cb-0b20-408c-9022-3fbc96d8c028-d084/?fullscreen