UI configuration in App Studio

The UI model provides flexibility to give developers the means to efficiently connect front-end components with back-end APIs. The UI layer in the Pega Platform architecture subscribes to the Principle of Separation of Concerns, which is the software design principle that encourages software modularity by stipulating that an application should be divided into distinct parts, where each part addresses a specific concern.

Pega Platform addresses the unnecessary complexity and inconsistent UI with a UI model that you can use to author your applications with Views, templates, and widgets.

In the following image, click the + icons to learn more about UI elements:

For new applications that you build in Pega Platform, the system automatically generates a set of Views that you can use to instantly begin configuring UI with App Studio. These Views are generated using Templates. Pega provides a variety of View types with different templates. 

Templates help you to handle the layout and responsiveness of a View in order to provide an optimal experience for your users. For example, templates include breakpoints, white space management, and wrapping to ensure out-of-the-box compliance with the latest accessibility standards.

Each View type uses a different template. Depending on the type and location of your View, the available templates and their behavior might vary. 

The following topic contains information that is important for your understanding of View templates and for passing the certification exam: Templates for Views.

One example of a View that is automatically generated using a template is the Full Page View.

When you create a new Case Type or data object, the Pega Platform™ automatically adds an associated View called a Full Page View, that represents the visual framework for processing information required for Case resolution. Optimized for almost any Case or data object, the three-pane layout of the Full Page View accommodates a lot of information, much of which is available without scrolling or moving to other Views. You can edit the Full Page View in the UX tab of your Case Type or data object.

The full Page View, or the full Case Page, represents a single Case in Pega Platform. In the following image, click the + icons to learn more about the main areas of a full Page View:

The Summary panel displays critical information about a Case. The placement of the Summary panel ensures that users can view the most critical information of the record in the upper-left corner of the main application window. Users who read left-to-right instinctively look to the upper-left of part any View to understand their context and get their bearings.

The size and shape are purposefully similar to a mobile device. If you collapse the Summary panel in the Full Case View, the display changes to responsive mode. This mode is often used on devices with smaller screens.

By default, the Summary panel also includes the Details View and the Pulse View.

Details

The Details View is a default, optional View that can render read-only Case data, such as important fields, and other information. By default, the Details View is configured to display Primary Fields. 

Pulse

The Pulse View is a default, optional View that displays Pulse, which allows users to post, view, and reply to messages in the context of this Case.

Check your knowledge with the following interaction:

In a Full Page View, you can configure a promoted Action. Promoted Actions give users quick access to a frequently used Actions, like Change Stage.

A promoted Action is display as a button on a Case header. Adding a promoted Action is a default configuration pattern that does not require building or adding a button component.  Promoted Actions behave as follows:
 

• Each Case Type supports one promoted Action.
• The promoted Action is the first Case wide Action.

An example of a promoted Action called Change stage seen in the following image:

The following topic contains information that is important for your understanding of promoted Actions and for passing the certification exam: Configuring promoted Actions on a Full Case View.