User Interface Configuration Flashcards

A system architect is designing a user view that must adapt its layout based on the screen size of the device being used. For example, a four-column layout on a desktop should transform into a two-column layout on a tablet and a single-column layout on a mobile phone. Which Pega UI rule or component is primarily configured to achieve this responsive behavior?

Answer: Dynamic Layout

Dynamic Layouts are the fundamental building blocks for creating responsive user interfaces in Pega. They are configured with responsive breakpoints that automatically adjust the layout of fields based on the display width, ensuring an optimal user experience across different devices.

To ensure a consistent look and feel across an entire Pega application, a developer needs to define a centralized set of styles for typography, colors, borders, and backgrounds. Which rule type is the most appropriate place to configure these application-wide presentation styles?

Answer: Skin

A Skin rule is used to define the presentation and styling for an entire application. It separates content (defined in sections and harnesses) from its presentation, allowing for consistent branding and a uniform look and feel across all user-facing screens.

A developer is building a user form and wants to reuse a specific group of fields, including labels and controls, in multiple parts of the application. Which UI rule is designed specifically for defining a reusable portion of a user form?

Answer: Section

A Section is the primary rule for creating reusable chunks of the user interface. Sections group layouts and controls and can be embedded within other sections or harnesses, promoting modularity and reusability in UI design.

In a loan application case, the 'Spouse Information' fields should only be displayed if the applicant selects 'Married' from a 'Marital Status' dropdown. Which configuration feature would a system architect use to implement this functionality?

Answer: A visibility condition on the layout

Dynamic UI behavior, such as showing or hiding fields based on user input, is achieved by configuring visibility conditions. By setting a condition on the layout containing the 'Spouse Information' fields to display only when 'Marital Status' is 'Married', the UI becomes responsive to the user's choices in real-time.

Which of the following best describes the primary role of a Harness in the Pega UI structure?

Answer: To organize the overall structure and content of a user screen or portal.

A Harness acts as the top-level container for a user screen, defining its overall structure. It organizes and contains various sections, layouts, and controls to form a complete user view, such as a work form or a portal.

A developer needs to apply a specific, non-standard text style to a label within a section to draw the user's attention. The enterprise-wide skin has been locked. What is the recommended approach to apply this specific style without modifying the application skin?

Answer: Reference a helper class or custom CSS class in the control's 'Cell properties' panel.

While a skin defines the overall styling, Pega allows for exceptions by applying helper classes or custom CSS classes to specific elements. This is done via the cell properties panel for the control. This approach provides targeted styling without the need for inline styles (which is a poor practice) or modifying the locked application skin.