This document describes the template & patterns for a “List” page in PASIprep for the PASIprep Page Layout Guidelines.
A “List” page's main function is to allow user to search and view a list of records of a specific Business Object/data type in a grid. Depending on what is being viewed, user may have the option to perform certain bulk operations on the records, or select a single record to view, or add a new record.
Template Elements | Options | Display Rules | Design Guidelines | Required Element? |
---|---|---|---|---|
Page Title | Specified in Design | See PASIprep Page Layout Guidelines | The Page title of a List Items page should generally take the format of “List XXXXXX”. | Yes |
Browser Title | Defaults to the same as the Page Title | - | - | Yes |
Identifier subtitle | Specified in Design | Displayed in the same area as a the Student Identifier Subtitle) | Explains to the user what they are searching for on this screen and what results can be expected. | Yes |
Context Bar | See Context Bar Elements & Guidelines | Yes if user can enter search criteria | ||
Grid Action Menu | See Grid Action Menu Items | Yes if there are actions user can perform on the grid | ||
Full Screen Option | Required | See PASIprep Business Object Grid | N/A | Yes |
Search Result Grid | See Search Result Grid Elements & Guidelines | Yes |
The Context Bar allows user to view, add and edit the selection criteria that makes up the Context of the screen.
Template Elements | Options | Display Rules | Design Guidelines | Required Element? |
---|---|---|---|---|
Search Criteria Form | Layout specified in design | Shown as PASIprep Field Value List / Form |
| Yes |
Search Criteria Fields (used in Search Criteria Form) | Fields specified in design | Shown as PASIprep Field/Value Pair |
| Yes |
Clicking/tapping [Edit Criteria] that sits on the corner of the context bar expands the Context Bar to reveal the search criteria form that lists all the search criteria relevant to the Business Object/Data Type that the user is currently viewing.
A tag is used to display a single selection criteria in the Context Bar. Angular's Chips (https://material.angularjs.org/latest/demo/chips) is used to style the tag.
A tag will appear in the Context Bar for a selection criteria if the user has selected a displayable value. A value is not displayable if it is:
If the value name is too long (25+ characters), it will be truncated with an ellipsis. User can click/tap on the value and a tooltip will appear showing the full value string. If there are multiple criteria and it does not fit in one line, the tags will wrap to fit the screen as needed.
If user clicks on the [x] button, this will remove the search criteria and re-execute the search:
The Search Results grid shows the records that satisfy the criteria defined in the Context; the grid follows the same standard as the PASIprep Business Object Grid. If the user has not yet entered all required search criteria, or has not yet executed a search, the search results grid is not displayed.
If there are actions available to user that they can perform on records in the grid, the actions should be presented the in the Grid Action Menu Bar.
The user can expand the search result grid into a full screen mode by clicking the full screen toggle button in Grid Action Menu.
In full screen mode, the Grid and its Grid Action Menu Bar will expand into a full screen overlay to maximize the grid space for the user. User can exit this mode by hitting the full screen toggle button on the top right corner OR press [ESC] on their keyboard to exit.
pasiprep_list_items_template.txt · Last modified: 2021-03-09 08:19 by reggie
|