Anatomy of the Constellation UI
In Traditional architecture in Pega Infinity™ releases earlier than 8.7, developers built the application interface with Section Rules, dynamic layouts, skin formats, custom controls, and various property panel Configurations. The new Constellation UI model provides more flexibility, which gives developers the means to more efficiently connect front-end components with back-end APIs.
The UI layer in the Pega Constellation 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.
Constellation has three distinct components that make up the user interface:
- Portals and landing pages
- Views
- Widgets
Portals and landing pages
In Pega applications, a Portal is a Persona-specific user interface for an application. Portals consist of landing pages that consolidate Case-related information within the application, allowing users to easily access the information they need to resolve a Case quickly and efficiently.
The following figure shows the Home landing page in the Customer Portal for the Tell Us More Constellation application. Links to the application’s various landing pages are located along the left-hand navigation bar:
Views
Views hold UI components, such as fields, field groups, and other Views. Users interact with your applications through Views.
When configuring a View in Constellation, you configure your View on one side of the window, and see a preview for the View at runtime on the other, as seen in the following figure:
The following figure shows the same Contact Info View at runtime:
Widgets
Widgets are components that can be added to applications to improve usability. For example, the Pulse widget provides users with a message feed and the To-do widget displays a list of open Cases that are assigned to the user. Constellation provides a wide range of out-of-the-box widgets.
Widgets can be added to various parts of a Full Page View and to a Portal.
Check your knowledge with the following interaction:
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?