This site describes our support for the AngularJS (1.x) framework. Visit developer.blackbaud.com/skyux for information on our latest version.

Forms

SKY UX provides various form patterns to accommodate different scenarios and workflow requirements.

Inline panel

An inline panel is appropriate for simple forms that meets the following criteria:

  • The form has few fields, and its input controls are not complex.
  • The content that surrounds the form will not distract users.
  • The task is functionally non-modal, and users can abandon it while the form is open.

A modal dialog is appropriate for forms that meet any of the following criteria:

  • The task is functionally modal, and users must finish it before doing anything else.
  • Displaying the form inline would lead to a large amount of content shifting or require users to scroll to complete the form.
  • The form adds records from a paginated list or an infinite scroll list.

Full-page modal

A full-page modal is appropriate for forms that meet the following criteria:

  • The task is functionally modal, and users must finish it before doing anything else.
  • Users usually perform the task in a large viewport, and a full-page modal can optimize the use of space.
  • The context of the task is self-contained.
  • The form displays ancillary information or previews such as running totals or an email being constructed.
  • The form supports a complex task for a list of objects such as filling out report cards for a class.
  • The task includes subtasks that need to be completed in context.

Wizard

A wizard is appropriate for forms that meet the following criteria:

  • The task can be divided into discrete steps.
  • The order of the steps is important.
  • User actions in earlier steps affect later steps.
  • Users must complete or review the fields in every step.
  • Users might want to save their progress so that they can leave the form and return later.