Table of Contents

Pega UI

Constellation

Constellation SDK's (docs.pega.com)

Stateless architecture

Because constellation has a stateless architecuter user sessions are not maintained over requests. This has effect on debugging tools. For instance the clipboard viewer tool is not available in run time as it was before.

See article below for tools available to debug applications.

Tools for debugging constellation using tracer tool

Also, Data Page functionality and best practices have changed considerably. Because it is stateless, the Constellation architecture does not support temporary pages – you must use Data Pages instead.

Data pages in Constellation

Creating PDF's in constellation

generating PDF's in constellation (docs.pega.com)

constellation adoption strategies playbook

Data display

  • Numbers have separators
  • Correct and consisten data/time formatting
  • Labels are clear and consise
  • Images and icons are professionaly rendered (consistend, same style, proper resolution)
  • Icons are bing used consistently (one meaning for each icon, example: pencil only used for edit.)

Forms

  • Labels are clear and concise
  • Proper spacing and alignment between and around every form element
  • Forms show consisten field widths
  • Fors are not wider than 80em (80 chars)
  • Textareas are expandable (show 2 rows max initially)
  • Required fields are ordered first
  • Fields with strong cohesion are displayed close together (for instance start date, end date)
  • Use logical sequence of fields.
  • show wide fields unders small fields (Avoid expanding text area's to hide fields below)

When a user is picking from a series of options in a form, it's important to use the correct control element. Use the following logic to choose the correct control element:

  • For general yes/no choices on a form (booleans) with a save/submit button visible on the screen, use a checkbox,
  • For yes/no choices (booleans) that do not require a save/submit button to activate, use a toggle.
  • For a range of numbers, use a slider or a five-star control.
  • For 2-7 options displayed horizontally, use a radio segment. Be careful to check for wrapping!
  • For 2-7 options displayed vertically, use a radio group.
  • For more than seven options, use an autocomplete.

Modals and overlays

  • Modals have a clear primary action
  • Overlays show supplemental data sucha s advanced controls, eplanations or help.
  • Neither modals nor overlays cover critical data.
  • The ui is navigable without tooltips (as in the ui does not rely on tooltips to be understood)

Tables

checklist:

  • Use appropriate row height (not to much, make sure that data is easily comparible over rows/ clear overview)
  • Use appropriate widths (if possible wide enough to not wrap headers, not to big to leave much space between columns)
  • Numbers should be right-justified
  • Dates should not be right-justified
  • List-based filtering should only be used for columns of data that have less than 50 unique values, else use search based filtering.
  • column header justification should match the data justification.
  • aviod using embedded sections in columns (often cause of alignment/spacing issues)