PASIprep Dialog - Find

This is a Dialog Template for the PASIprep UI Guidelines.

A find dialog is an extension of PASIprep Dialog - Custom and should be used to ask the user to provide additional information to locate a specific record of a Business Object. Typically the user is wanting to locate a specific record without navigating the user away from a form based on Edit Item Template.

Examples include:

  • A user is asked to identify a student that they wish to enroll in their school.
  • A user is asked to identify a course that they wish to enroll a student in.

Note: Find dialogs will never have a breadcrumb

Note: Find dialogs will never have a permalink URL. Any attempt to bookmark the URL when the find dialog is showing will result in the previous page's URL being book marked.

Button Style

Buttons should use the style defined in the Visual Guidelines of the PASIprep UI Guidelines

Layout of Find Dialogs

The Angular Material Dialog should be used with the GOA UI Library colours:

  • Dialog Title Bar: Green background with gray text.

These dialogs should mimic the layout of the “Custom dialog” in the Angular Material dialog demo, without the top right corner [x] button to close the dialog (user cannot dismiss the dialog by clicking outside the dialog either).

The find dialog can be broken up into three distinct areas:

  • Criteria Section
  • Grid Section
  • Action Button Bar

Optional Message Panel

An optional Message Panel (similar to the Message Panels from the PASIprep Page Layout Guidelines) is anchored below the Dialog Title to show Errors, Warning and Informational messages that are applicable to the screen or an action the user just performed on screens.

  • Error messages should be displayed in red.
  • Warnings should be displayed in yellow / bronze.
  • Informational messages should be displayed in blue.

Criteria Section

The criteria section will consist of:

  • A button [Search] that will be used by the user when they are ready to do the search.
  • A Value List that is used to specify criteria.

The search is not performed until the user has entered criteria and used the search button.

Grid Section

This section will be implemented as per the PASIprep Business Object Grid guidelines, with the following exceptions:

  • Since this grid is in a dialog, links to view pages and edit pages are not expected in the grid.

Action Button Bar

Action buttons should be displayed in the persistent footer bar beneath the Grid Section in every find dialog.

  • The primary action button should be a button that “Select {BusinessObject}”. It should be the rightmost button
    • This button will only be enabled if a record has been selected on the grid.
    • The button has logic to ensure that a record is selected before it is enabled
  • The 2nd button presented to the left of the primary action button will be a “Cancel”. Pressing this button will return the user back what they were viewing prior to this view (which generally results in closing of the dialog to return user to the view)
  • “Supplementary” actions that are neither primary or secondary action buttons appear left aligned in the footer bar.
    Supplementary actions are not directly related to the main 'purpose' of the dialog, but may be present in some situations when user may choose to not act on neither the primary or secondary action choices yet until they have performed some other supplementary actions.

Note: This type of dialog cannot be dismissed by clicking outside of the dialog.

No Results

When the dialog first opens or when there are no results to be displayed. The following occurs:

  • All function in the Grid Action Menu bar will be disabled
  • the grid will display with no results, with a message providing some light instruction on what the user is to do next.
  • All the action button bar buttons, other than the Cancel button, will be disabled.

Showing a Find Dialog

A Find Dialog should be launched from a PASIprep Input with Find Control.