UI Design

You have added a field for entering a U.S. phone number. Do you use a integer data type or an edit validate rule to validate that the phone number is in the correct format?

An edit validate rule ensures that the phone number contains the correct number of digits. The integer data type only ensures that the user enters numbers in the field.

In the event-action model of dynamic UI, which of the following statements is correct regarding event processing?

An event can be configured to perform multiple actions.

Repeating layout

A repeating layout is a way of presenting information on a form from sources such as a Page List or Page Group property, a report definition, or a data (declare) page. There are six repeating layouts that are available; Row Repeat, Column Repeat, Tabbed Repeat, Grid, Tree Grid, and Tree.

Skin

A skin defines the responsive behavior and formatting, such as colors, fonts, images, and layout, of portals, cases, rule forms, and reports. A skin generates the styling (Cascading Style Sheet) for the application.

Paragraph rule

Defining static text in paragraph rules allows you to reuse the text across your application. For example, you can create a paragraph with an instruction and add that paragraph to the form. The same paragraph can be reused in correspondence. Paragraphs can be inserted in sections, harnesses, and within other paragraph rules

What are some ways to display items in a dynamic layout?

In a dynamic layout, you can display items in either an inline or inline-grid arrangement. The inline arrangement displays items in a row like words in a sentence. The inline-grid arrangement displays items in a multi-column grid. The inline-grid with one column is equivalent to a staked format.

What are the benefits of a paragraph rule?

In addition to reuse, paragraph rules provide the following benefits: - Paragraphs can convey entire sentences or paragraphs. - Paragraphs support rich texts including images and links. - Paragraphs can include property references. For example, you can include a customer's name in a paragraph.

Properties

Single value properties have property types such as date, decimal, integer, text, or true/false. Selecting the appropriate property type ensures that users enter a valid value.

The business is switching its application branding to use a warmer color scheme and to include responsive behavior to the user interface. Which two of the following rules must be modified to implement this change? (Choose Two) a) Application rule b) Skin rule c) Flow action rule d) Section rule

a and b: Application rule and skin rule Application rule references a skin to apply styling. A skin defines application styling, including responsive behavior.

Benefits of responsive UI?

The layout adapts according to the screen size, and the majority of the application is the same across all devices. Consistent UI behavior across devices results in a consistent user experience, easier adoption, faster learning, and fewer errors. A Responsive UI leads to lower maintenance costs and easier management. Instead of creating different layouts for smart phones, tablets, and wide-screen desktops, developers configure a single form to automatically adjust to different screen sizes. With a single code set, a Responsive UI provides an optimal user experience on different devices. While one user accesses an application on a desktop computer in the office, another user can use a mobile device during a business trip. This increased accessibility enables an application to reach a wider user base.

Dynamic list

Using dynamic lists helps ensure that the items users see on the list reflects the most recent information. *Dynamic lists reference data on the clipboard. Using a data page is the most common method of sourcing the data.* A data page receives the data from a database, and then populates the clipboard. When the clipboard is refreshed, the data page dynamically updates the list.

Validate

Validate is a way to check property values against one or more expected values. If the property value doesn't match the expected value, an error message is displayed.

HELPFUL TIP: Sections should colocate data classes

i.e., a section displaying property content should be defined in the class where the properties are located. Colocating sections and data classes makes sections available for reference wherever data class instances are used.

Dynamic vs. responsive UI

Dynamic = based on user interaction Responsive = screen size and layout

What are the 4 best practices for UI Design?

*Design with a modular approach* — Build the UI in small portions and combine those portions to build larger sections. This approach promotes reuse and makes the UI easier to maintain. *Respect context* — Understand the users' role and what the users try to accomplish. Be aware of where users are in the process of achieving their tasks. Looking at a screen, users should not have to guess what to do to move on to the next step. *Simplify* — Minimize data elements on the screen to an optimal set that is critical to the users' task. Use layouts to group related information together. Adjust UI element alignment and white space to reduce visual clutter. *Be consistent* — Users expect consistency in applications. Apply consistent interaction patterns and styling across the application. This helps user build a comprehensive view of the system.

What are the 3 most common ways to use controls?

*Required fields* - Configuring a control as a required field ensures that the user enters a value. If there is no value, users get an error when they try to submit a form. *Editable settings* - You can use editable settings on controls to restrict the input values to valid formats. The settings are specific to the control type. *Control types* - Using the correct control for a specific purpose helps users enter valid values. Examples: calendar, radio button, drop-down, autocomplete, check box

Live UI tool

*This tool lets you examine UI rules and elements such as sections, controls, or layouts that you used to build the form. Live UI also allows you to locate properties that use declarative values.* Rather than examine the rules individually in Designer Studio, you use Live UI to view the form as a user would see it while performing their tasks. Allows you to examine and edit the rule structure in the UI. You can use Live UI to quickly identify and open a UI element, such as to change the presentation of a layout or a field. You can use Live UI to add or delete elements. You can also move elements within the structure.

Benefits of a dynamic UI

- Real-time response to end-user behavior - Robust functionality available for most user interactions - Reduced visual clutter on the screen - Fewer full page refreshes, resulting in improved UI responsiveness

Controls

A control rule dictates how properties appear on user forms, correspondence and other HTML forms, for both display and accepting user input. Pega provides many standard controls, which are preferred over custom controls. The three most common ways you can use controls for validation are required fields, editable settings, and control types.

Data page

A data page is a persistent page on the clipboard, used to cache data for use in an application.

Dynamic UI

A dynamic UI predicts the intention of the user and adjusts the application display to the user context. The purpose of a dynamic UI is to provide the user with the correct functionality at the correct time. A dynamic UI efficiently guides the user toward task completion.

Dynamic layout

A dynamic layout arranges items in a flexible form that automatically adjusts to screen size.

Where can you NOT include a paragraph?

A flow

Form

A form displays information or collects input from users as they create, update, and resolve cases in your application. Use Case Designer to define the visual presentation of a form.

Section

A section is an area of a standard user form that is incorporated on a harness form. The appearance, behavior, and contents of a section are defined by a section rule (Rule-HTML-Section rule type). Sections can contain other sections.

In an application for applying to jobs, a submit button is in the section rule for uploading resume. You defined a new button style format with a gray background color and crimson font color. What do you need to do to apply this new style format to the submit button?

Configure the submit button in the section rule to use the new format. Formats are referenced from Section rules to apply to UI controls.

True or False: To ensure that a user selects a value from a drop-down list, you should use a validate rule

False. You configure the drop-down list as a required field.

Layout

Layouts organize the controls in a series of rows and columns. Each cell within a layout can contain a control. You can configure many layout designs in order to make user interactions intuitive and efficient.

Where do you set the Visible When condition to display a layout based on the click of a button?

On the layout The Visible When condition on the layout turns the display of the section on and off.

Harness rule

Portal rules reference harness rules for content. *Harnesses frame the work areas in which users process cases. A harness provides tools that let users manage the assignment process.* Harnesses give users the ability to cancel, save, or submit their work. While working in the assignment, users can transfer their assignments to other users, attach files to the case, or send email correspondence.

Property-based events vs user events

Property-based events occur either when a data value changes or when a value meets a specific criteria. A user event occurs when an end user takes some action on the page such as selecting an option or clicking on a link.

What are the 6 available repeating layouts?

Row Repeat, Column Repeat, Tabbed Repeat, Grid, Tree Grid, and Tree.

Tree grid

The Tree Grid combines the navigation strengths of a tree with the quick-access data display of a grid. A tree grid layout allows you to view or edit values of a Page List or report definition. The tree grid is created dynamically and can have as many rows as needed to display the requested data.

Portal rule

The main purpose of a portal rule is to set up workspaces for users. Pega provides standard portals that are built with portal rules. The standard user portal is a workspace that supports users and managers as they create, update, route, and resolve work items. A portal rule does not hold any visual elements such as other UI rules.

Responsive breakpoints

The screen size thresholds that trigger different UI behaviors are called responsive breakpoints. You configure these breakpoints in the layout formats defined in the skin.

You are designing a screen to display employee information such as job title and hire date. The display needs to present the reporting hierarchy among employees as well. Which type of repeating layout is appropriate for this purpose? Tree Grid Tree Grid Column

Tree Grid - The Tree Grid combines the navigation strengths of a tree with the quick-access data display of a grid.

Section rule

When a case reaches an assignment, the flow action presents the appropriate harness that allows users to perform tasks defined for the assignment. *The flow action also references a section rule and displays it in the harness.* The section is the form in which users work when they perform their task and complete their assignment. When you build a user form you create a section rule.

Event-action model

When designing a dynamic UI, you are using an event-action model in the browser-based application. Think of event and action as a cause-and-effect pair. An event is performed by a user that triggers changes on the UI. These changes are the action. Event = something happens Action = something changes Example: During online shopping checkout, users enter the shipping and billing addresses in sequence. After providing the shipping address, users click a check box labeled use same address for billing. The section for the billing address then disappears. *In this case, clicking the check box is the event, and hiding the billing address section is the resulting action.*

Edit validate rule

You use edit validate rules to test for patterns. For example, an edit validate rule can test whether a zip code the user enters has five digits, or that an email address contains an "at" (@) symbol.

Validation rules

You use validation rules when you cannot predict or control the value a user will enter in a form. You use validate rules to compare a property against a condition. For example, assume your form contains a field for date of birth. The date must be earlier than the current date. The property and control cannot prevent users from entering a date that is in the future. Use validate rules to ensure that users enter a date that is in the past. Validate rules are associated with processes such as flow actions.

Visible when condition

You use visible when conditions to hide or display data fields based on a value entered by the user.

A requirement states that you must add a control that shows a list of book titles. The titles change on a daily basis. The book records are maintained on a database. The control must show the most current information. The organization schedules updates to the application on a weekly basis. Which of the following configurations would you use? a) Add a drop-down control and source the list using a data page. b) Add a drop-down control and source the list using the property that identifies the items in the list. c) Add a drop-down control and use a list of items in the control's property d) Add a radio button control that identifies each employee with a button.

a) Add a drop-down control and source the list using a data page. Correct!A dynamic list uses the most current information that is sourced from a data page.

Which two of the following are considered property-based events in Pega's dynamic UI model? (Choose Two) a) Users change the arrival date on a hotel reservation to one week later. b) Users move the mouse over a URL link. c) Total value of a customer order reaches $500. d) A section refreshes. e) Users click a button.

a) Users change the arrival date on a hotel reservation to one week later. Correct!A property-based event can fire when a property value changes. c) Total value of a customer order reaches $500. Correct!A property-based event triggers when a property value meets a specific criteria.

Using Live UI, you must reorder the position of fields on a user form. How do you use the tool in order to complete this task? a) In the hierarchy tree, copy the original element and paste it in the new position. b) In the hierarchy tree, drag and drop the element in the new position. c) On the user form, copy the original element and paste it in the new position. d) On the user form, drag and drop the field in the new position.

b) In the hierarchy tree, drag and drop the element in the new position. You drag and drop UI elements in the hierarchy tree to reposition them.

In which of the following cases would you use a paragraph? (Choose Two) a) To display an image b) To provide the user with the ability to enter rich text c)To define a piece of text that is used in several screens in the application d) To display read-only text in rich text format

c and d

You have been asked to add a field to a form in which users enter a Social Security number (nine digits). How would you configure the field to support this requirement? a) Set the minimum and maximum values to "9" in a text field. b) In an edit validate rule, configure a function to test for a Social Security pattern. c) Use an edit validate rule that validates the Social Security pattern. d) Use a decimal property type and make the field required.

c) Use an edit validate rule that validates the Social Security pattern. Correct!An edit validate rule validates patterns such as the number of digits in a field.

You have been asked to add to a form a check box control named "Auto Insurance Discount." Selecting the check box indicates that the user qualifies for the discount. However, in order to qualify, two conditions must be met. First, the user must be older than 25. Second, the user has not received a traffic violation in three years or more. If both conditions are not met and the check box is selected, an error appears when the form is submitted. Which one of the following approaches would you use in order to support this requirement? a) Use a single validate rule to verify both of these conditions. b) Associate an edit validate rule with the flow action that references the form. c) Use an edit validate rule that validates both conditions d) Use two validate rules, one for each condition.

d) Use a single validate rule to verify both of these conditions. Correct!A single validate rule can verify multiple conditions for the same field.