PASIprep Field/Value Pair

This is a Widget for the PASIprep UI Guidelines.

A field/value pair shows a field label and either a read-only value for the field, or an input control for the field. They are usually used in Value List.

Label Guidelines

  • Should not end with a punctuation (no colons, question marks, etc.) - exception to the rule is boolean fields (which ends in '?')
  • Are top-aligned with the field value
  • Required fields are denoted with an asterisk (*) - this is an option provided by Angular input controls.
  • Displayed as title case

Commonly Used Field/Values

Below are the preferred field label and value formats for some common data elements used in different business objects (e.g. Use “Alberta Student Number” instead of “ASN”, “Preferred?” over “Is Preferred?”, etc.):

  • Alberta Student Number
  • Authority
    • Value of the field will be displayed as “{Authority Name} ({Authority Code})”
    • The current Authority Name should be used.
  • Course
    • Value of the field will be displayed as “{Course Description} ({Course Code})”
    • The current Course Name should be used
  • Is {field name}? (i.e. dropping the “Is” in front of most boolean fields, e.g. use “Preferred” instead of “Is Preferred”)
  • Organization (used if the value can be a school or an authority or others)
    • Value of the field will be displayed as “{Organization Name} ({Organization Code})”
    • The current Organization Name should be used.
  • Reference #
  • School
    • Value of the field will be displayed as “{School Name} ({School Code})”
    • The current School Name should be used.

Styling of input controls

  • Use of default value is discouraged
  • Should follow the GOA UI Library and Angular Material guidelines for styling input fields.
    • Hint text should be utilized as needed, and it will sit directly below the input field
      • Hint text can be used for help/informational messages
      • If a specific format is required for the input field, the format must be displayed as a hint text (e.g. if user needs to enter a date, the date format “YYYY-MM-DD” should be present below the input field).
  • Note: PASI will automatically ignore any leading/trailing spaces. Essentially trimming them out of the input before any processing.
  • Some types of values should be presented as a link (if it's a readonly field). See Crosslinking Guidelines.

Field Validation Messages

Input Widgets

Standard input controls that can be used:

  • Text
  • Text area (for multi-line input)
  • Checkbox
  • Radio button
  • Radio button group (containing multiple radio buttons)

These widgets have 'special' behavior tailored to PASIprep:

Displaying Null Values

  • Normally a null value should be presented as blank.
    • Exception: If for a specific data record, a value is null and neither user nor the system can ever set it to something other than null, then “N/A” should be shown instead.

Displaying Boolean Values

  • Normally a boolean value should be shown as “Yes/No”
    • Exception: If it is more important to highlight one value over the other (e.g. in View Student Name, it is important to highlight the record where Preferred=Yes), then instead of “Yes/No”, a checkmark icon (for highlighting Yes) OR an x icon (for highlighting No) should be used, and the opposite value would be left blank. (e.g. in View Student Name,if the record is the preferred name it will have a checkmark in the Preferred field, otherwise it will be blank)

Displaying Deleted Value

  • The Is Deleted flag on a Business Object should be highlighted/emphasized by using the following styling:
    • If IsDeleted = No, the field label and value will be empty (note: it should still occupy the space it has on the field value form)
    • If IsDeleted = Yes, the field label is still empty, but the value will be displayed as “DELETED” in bold red font.

Displaying Code Values

  • The short description of Code Value must be visible, either just as “{Short Description}” or {Code} - {Short Description}“
    • Generally the first format is sufficient but the 2nd option is favored if:
      • the Code is drastically different than the description or has a meaning to a user (e.g. Grants Program Codes are numeric codes that are well known to users and thus the 2nd format is preferred to show the code to the user)
      • The code text is used somewhere else in PASIprep for the same data element (e.g. in a grid of the same record type), so the user can make the link between the code text and the description easier across screen.

Dependency Fields

  • If the entry of a field is dependent on the entry of a different field, there are two options to displaying the dependency:
    • Show a placeholder message in the field when an action is required first on a different field (e.g. if user must select a School Authority first before selecting a School as the options for School is dependent on the authority, when the School Authority field is blank, the School field can show “Please select an authority first” as a placeholder text), OR
    • Hide the field until the action that is required first is performed (e.g. if user must select a School Year first before selecting an Exam Session, the Exam Session field can be hidden until the user selects a School Year)
  • The first option is preferred for required fields (as the screen should not hide required fields, regardless if they have performed the dependent action yet or not).

Design and Testing Checklist

Field Value Pair

PASIprep Field/Value Pair

  1. Are required fields identified? (if it is an editable field/value form)
  2. Are hint texts defined for fields with labels that are not self-explanatory
  3. Is the data format identified? (if it is an editable field/value form and the field requires a specific format)
  4. If the value is a Code Value, is it shown in one of the accepted formats (usually Short Description would be visible)
  5. Are commonly used field label and value pairs used when applicable?