A well-designed user interface (UI) provides users with a better understanding of what your Pega 7 application was built to deliver. A good application UI provides the right functionality at the right time to the right people.

By using Pega 7 rule-based technology and proven methodology, your team can quickly build a consistent and rich UI application that can be easily adapted to changing needs.

UI development tools

Pega 7 includes a variety of tools and functions that accelerate interface development. They enable the designer to:

• Add controls and other design elements by selecting an icon from a menu and dropping it onto a form.
• Move or copy elements, such as cells, layouts, or sections.
• Drag and drop sections and properties from the Application Explorer onto harnesses, flow actions, or sections.
• Design an application skin that reflects corporate or departmental standards by using the skin rule. For more information on skins see: Associating a skin with the user interface.

Pega 7 user interface

The Pega 7 user interface consists of:

• Forms
• Portals

Forms

Forms contain the information and controls that an application user needs to enter and process work items. Forms are created by developers while modeling business scenarios.

The following figure shows an example of an equipment request form:

Equipment request form

The form contains:

• Information collected earlier in the process (creation date, entry operator).
• Fields for entering information (hardware items) and Add and Delete icons for controlling the form content. The application automatically enters the price for each item and calculates the total.
• An area for submitting an action within the current assignment, such as attaching an email or adding a note.
• A Submit button for updating and routing the work item to the next process step and the option to select any other possible action.

Form example

The following figure shows an example of a work form for a new equipment purchase request as it is displayed to a user at run time:

Purchase request form

The following figure shows a form as it is displayed to the designer. Controls are used in layouts, which are contained within sections. A section can be included in another section, a layout, or a cell, enabling reuse throughout your application.

Form during the design process

In this example, the designer used the following UI elements to build this form:

• Sections
  • ​Work information and functionality are grouped into sections by context and purpose.
  • Each section can be included in other sections so that the developer can reuse them in a variety of contexts.
  • The designer also uses sections when designing flow actions that require additional fields or forms needed to complete an assignment.
• Layouts
  • Layouts organize properties and controls within a section.
  • Layout cells contain properties, labels, controls, or other sections.
  • Various types of layouts specify how cells are arranged.
  • The designer used a dynamic layout that adjusts the alignment of elements automatically based on the width of the screen.
  • Layouts can be automatically converted into sections so that they can be reused in other harnesses, sections, or flow actions.
• Controls
  • Information about a work item is entered or displayed in controls such as text areas, drop-down lists, check boxes, or calendars. Many of these controls are configured so that they meet most process requirements without further refinement.
  • To add a control, the designer drags and drops it from a drop-down menu onto a layout cell.
  • The red arrow in the preceding figure indicates how a label was placed in a cell. The designer uses similar menus for adding layouts, containers, and sections to the form.

Portals

Portals are workspaces that support users and managers as they create, update, route, and resolve work items. Pega 7 includes Case Manager and Designer Studio portals.

• The Case Manager portal usually contains features for end users who use the application.
• The Designer Studio portal has advanced features and tools for developers of advanced tasks, such as debugging or modifying the business process flow or UI.

Your team can also build new portals to reflect the terminology, layout, functionality, and styles that are appropriate for your user community. You can use auto-generated dynamic containers to present work items and worklists as single or multiple harnesses (or sections) in your portal.

The following figure shows an example of a Case Manager portal:

Case Manager portal

Portal example

The designer uses the rules and above-mentioned elements to develop a portal. A panel set in the portal harness defines its overall structure. The set includes bottom, top, left, right, and center panels. Panels are not rules; instead, panels reference section rules.

The following example shows a loan application that uses the Header Right Column panel set, which consists of top, center, and right panels:

Loan Application portal

To create a portal, a designer drags and drops a preconfigured panel set from a menu onto the harness. Pega 7 includes more than a dozen sets of panels to choose from.

To change an existing portal design, a designer can select another panel set and drop it onto the harness. The application then reconfigures the harness layout automatically.