Screen Structure
Screen Structure
Search & Results - List Screens
For all list screens where there is search criteria and an AG Grid which shows the results determined by these criteria. The page is bifurcated into ‘Search’ for the criteria & ‘Results’ for the data, which is presented in the AG Grid, to allow for a better screen capacity for engaging with the AG Grid.
Search is always a primary action here, for users to navigate between selection of their criteria to the results in the AG Grid.
Details & Lines - Enquiry & Edit Screens
For enquiry & Edit screens, screens have been bifurcated into ‘Details’ & ‘Lines’ where information can be entered in a combination of input fields (within ‘Details) and AG Grid (within ‘Lines’).
Current UI
Horizontal Tabs:
Horizontal tabs are present in the new UI in those cases where AG Grids are present on multiple extended selection pages.
Extended Selection:
When extended selection occurs without AG Grid.
When the map only has a ‘selection’ accordion in the current UI, in the new template this would move to a single card. When there is a list screen with a ‘Selection’ and ‘Extended Selection’ we use vertical tabs as shown below.
This aids an easier navigation of input fields in an accessible and linear manner to provide better user training in how to complete necessary fields.
List Screen Overview
Core elements
· Always use the header with tabs
· The ‘Selection’ and ‘Extended selection’ sit on the first tab labelled ‘Search'
· Search can be actioned by the keyboard ‘Enter’ or the primary action in the header ‘Search’
Search Tab
Example Screen: Calendar list
This map only has a ‘selection’ accordion in the current UI, in the new template this would move to a single card with the inputs as shown below.
Example Screen: Nominal List
When there is a list screen with a ‘Selection’ and ‘Extended Selection’ the UI will utilise vertical tabs.
In this case, the ‘Extended Selection’ has 2 sub-tabs. These will remain separate tabs and sit under the ‘Selection’ tab.
Results Tab
The Results tab will always hold a data grid which is populated from the search tab upon selecting ‘Enter’ or selecting the primary action (Search).
All data grids have line-specific actions. (These are actions available to this map that can only be used when 1 or multiple lines are selected. In the New UI, these actions sit in a selected panel above the grid.)
