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.

• 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

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.

• 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.

See PASIprep Error Display Guidelines

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:

• PASIprep Combobox / Dropdown
• PASIprep Date Input
• PASIprep Date Time Input

• Authority and School Select Controls
• Course Code Input with Find Course

• 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.

• 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)

• 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.

• 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.

• 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).