This is an UI Pattern for the PASIprep UI Guidelines used to display a list of records of a Business Object, as well as operations user can perform for the Business Object, or for individual records on the grid.
PASIprep uses AG-Grid as the grid tool for Business Object Grids. Unless otherwise stated, the default UI Behaviors of AG-Grid is used in PASIprep 2.0 by default.
Standard behaviors for a grid, include:
|Date||It is used if the column is displaying date values|
This is used if the column is displaying one of the following:
|Numeric||This type is used if the column is displaying numeric values.|
|Custom “ASN Filter”||
for all ASN columns allowing a user to enter the ASN with or without hyphens, where:-
Note: if an invalid ASN has been entered, no results would be returned within the grid.
|Text||It is used in all other cases if none of above filter are used.|
The standard behaviors for a grid listed above is optional if the grid does not have a lot of columns and rows (< 5).
If the Business Object Grid is appearing on a page where there are multiple grids or other elements (e.g. PASIprep Summary Cards, consideration should be given if a section title should appear above this grid to help the user understand what they are seeing.
In general if a column is showing a Data Element, the full name of the data element should be used as the column header name (i.e. avoid abbreviation as much as possible). See PASIprep Writing Guidelines for common column header names.
Normally a null value should be presented as blank.
Normally a boolean value should be shown as “Yes/No”
When displaying code values in a grid, the code description should be used to display code values.
When displaying Student Name information (either as a full name or divided into its components, i.e. Last/Middle/First Name & Suffix columns) on a grid, if the user does not have Access to the Student (Moved), the value should be hidden from the user.
Above the grid is the Grid Action Menu bar which lists the functions the user can perform for records in the grid.
A [Columns…] item is generally presented on top of the grid which allows user to toggle visibility of the columns available. When clicked/tapped on, the column menu shows and the action label changes to become [Hide Columns]. User can click/tap on [Hide Columns] to close the column menu.
An Export to CSV action may be made available for user to export the data they see on the grid to CSV format.
Each grid within PASI is defined with a Standard View. However, grids may support multiple views. The optional View control can be provided to allow a user to select the view they wish to use to display the data in the grid; each view may have different data filters, column ordering, visibility and/or sorting. Grids within PASIprep will include the View control by default unless explicitly excluded.
For grids within PASIprep that permit multiple views, a user can define the column ordering, visibility, filtering and sorting that they wish to use as a user defined view. Once saved, these views are retained using an in-browser database and therefore only apply to the same user, on the same computer, in the same browser.
Actions available to the user for grids that support User Defined Views can be accessed by selecting the “…” button beside the “View” control. The action available are:
AG-Grid's column grouping should be utilized for grids with a large number of columns so it can be easily consumed by the user.
Repeated words should be avoided in column headers and its parent group name, e.g. if there are 2 columns named “Course Code” and “Course Description”, they can be grouped under “Course” and the column name themselves should be named “Code” and “Description” (so the word Course is not repeated)
The Checkbox Column is used to indicate which row(s) in the grid are selected and can be used to select/deselect a specific row in the grid.
A user can click the checkbox or on any part of the row that's not a link to 'select' a row.
|Column Heading||Only displayed in multi-select grids, the column heading includes a checkbox that can be used to select/deselect all records in the grid.|
|Column Width||Fixed Width = 24 px|
|Contains||A checkbox that indicates if the row has been selected.|
In the grid, some records may be of high importance, while other may be of less importance. When there is value in emphasizing or de-emphasizing particular records in the grid to direct the user’s focus on the records, row highlighting styles can be applied to the grid.
NOTE: Checkbox, View, Edit and Work Item columns should be omitted from having any row highlighting styling.
If a grid may show deleted records, then a “Deleted?” column should always be included. Generally the column should be visible by default (but it can be pushed as one of the last columns to show in the grid)
In general deleted records should not be visible by default, their availability is implied by the count provided in the bottom left corner of a grid stating “Showing: 2 of 3” records. Removing the filter associated with the “Deleted? column will make the deleted rows visible.
When showing Deleted Records in the grid they are highlighted with a red (#f2dede) background if they are visible
|ASN||Alberta Student Number tied to the record; note that this may be the secondary ASN. Links to View Student if user have access to that screen for that student.|
|Student Name, Last Name, Suffix, First Name, Middle Name|| The preferred name of the student. Links to View Student if user have access to that screen for that student.
Last Name, Suffix, First Name, and Middle Name columns will also be available as hidden columns for user to expose the name by components
|Last Updated, Last Updated On, Last Updated By, Last Updated Organization||See last updated date/time|
|Organization, Authority, School||
Whenever an organization column is included, the following should be observed:
|Course Code and Course Description||
Whenever a course is included in the grid, the following should be observed:
The “View” column of the grid contains a [View] icon that allows user to access the View screen for that particular record. If a View screen does not exist for the type of records shown on the grid, the View column should be hidden.
|Column Width||Fixed Width = 30 px|
|Contains||A View icon. When clicked, takes the user to the View screen for the requested record.|
The “Edit” column of the grid contains an Edit icon that allows user to access the “Edit” screen for that particular record. If there is no Edit screen for the type of records shown in the grid, or user does not have permission to edit, the column should be hidden.
|Column Width||Fixed Width = 30 px|
|Contains||An Edit icon. When clicked, takes the user to the Edit screen for the requested record.|
The “Work Item” column of the grid contains a Work Item Indicator that allows user to identify if there is any Work Item(s) for that record.
|Column Width||Fixed Width = 40 px|
When Audit History is available for a business object, a “Last Updated” column should be made available in the Business Object Grid.
When there is no Audit History screen available, the Last Updated (Date/Time) information should be included in plain text (no link) as a column called “Last Updated On”. In this scenario, the Last Updated By (user) and Last Updated Organization should also be included as columns. These columns can be hidden by default.
When user returns to a grid after a save/update operation (add/edit), the record that was saved should be selected in the grid. If the grid has vertical scrollbar and the selected record is not in view, the grid should automatically scroll down so that the selected record is visible.
(i.e. Grids that are roughly less than or equal to 5 columns and rows in size)
Demographic information = Generally this refers to data elements that make up the response of the Get Student Personal Profile, or the actual Student
Academic information = Generally this refers to data elements that make up the response of the Get Student Academic Profile (2018)))] for a specific student