User Interface & User Experience Flashcards

In traditional Pega UI, which rule type provides the outer frame of a work form, such as Perform, Review, or Confirm?

Answer: Harness

A harness defines the overall structure of a work form and contains the sections that make up its content.

A team needs the same customer contact block on five different forms. What is the best practice?

Answer: Build one reusable section and embed it in each form

Embedding a single reusable section avoids duplication and makes maintenance easier.

A Comments field should appear only when the user selects the 'Other' checkbox, with no server round trip. How should it be configured?

Answer: Set a visibility condition on the field and enable running it on the client

A client-side visibility condition shows or hides the field instantly in the browser.

An order form must recalculate the line total immediately after the user changes the quantity. Which configuration achieves this?

Answer: An action set on the quantity field with a Change event that refreshes the section

An action set triggered on change can refresh the section so recalculated values appear without submitting.

In a traditional Pega UI, which rule defines colors, fonts, and layout formats, keeping presentation separate from content?

Answer: Skin

The skin rule controls styling and formats, separating presentation from content.

A form must show every line item stored in a Page List property, one row per item. Which layout is most appropriate?

Answer: Table layout (repeating grid) sourced from the page list

A table layout iterates over a page list and renders one row per entry.

Which layout type uses responsive CSS flexbox so that content adapts to different screen sizes?

Answer: Dynamic layout

Dynamic layouts are flexbox-based and responsive, replacing older smart and freeform layouts.

How does the Pega Constellation architecture render the end-user interface?

Answer: Client-side prebuilt design system components driven by view metadata through the DX API

Constellation sends view metadata through the DX API, and client-side React components render it.

In a Constellation application, which view template is intended to display read-only case information, such as in a case summary?

Answer: Details template

Details templates show read-only field information, while Form templates are for data entry.

In a Constellation application, how should a team change brand colors and typography?

Answer: Edit the application theme in App Studio

Constellation styling is applied through theme settings rather than custom CSS or skins.

Users must pick an existing customer from a list of saved customer records. Which field type should be used?

Answer: Data reference

A data reference field points to existing records from a data object.

A case must capture several shipping addresses that belong only to that case. Which field type fits best?

Answer: Embedded data configured as a list

Embedded data stores a copy of structured data within the case, and a list allows multiple entries.

Users need to update the customer's address at any point while a case is open, regardless of the current step. What should be configured?

Answer: A case-wide optional action

A case-wide optional action lets users run the action at any time during the case.

An application's field labels and messages must be shown in Spanish for some users. Which approach does Pega recommend?

Answer: Use the Localization wizard to translate field values into a language-specific ruleset

The Localization wizard exports and imports translations into a language ruleset that is applied by operator locale.

A developer wants to find out which section and property render a specific field on a running screen. Which tool helps most?

Answer: UI Inspector (Live UI)

The UI Inspector highlights UI elements at runtime and identifies their source rules.

Which Dev Studio tool helps developers find accessibility issues, such as missing labels, in an application's UI?

Answer: Accessibility Inspector

The Accessibility Inspector flags UI elements that don't meet accessibility guidelines.

A dropdown should list product categories maintained in a data type, and the list will change over time. What is the best source for the dropdown?

Answer: A data page referenced as the list source

Sourcing from a data page keeps options dynamic and reusable without editing the UI.

Users must pick one of 20,000 cities. Which control gives the best experience?

Answer: Autocomplete

Autocomplete filters a large list as the user types, which avoids a huge dropdown.

Which practice follows Pega UI guardrails?

Answer: Using auto-generated sections and design system components

Auto-generated UI and standard components keep the application maintainable, accessible, and upgradable.

A field is marked Required in a view. When does the user first see the validation message if the field is left empty?

Answer: On the client when the user tries to submit the form

Required fields are validated in the browser before the submit is processed.