Exploring UI Design in Pega Constellation: Approach & Learnings
While designing the screen, I created multiple views to structure the UI effectively. In Constellation, views play a central role in UI design. Even though multiple views can be created, there is no alternative approach to structure the UI without creating and configuring them. Adjusting the size, layout, and arrangement of fields is only possible through proper view configuration, making views an essential building block in Constellation UI design.
In traditional Pega UI frameworks such as Theme Cosmos, developers have greater flexibility to customize the UI using HTML, CSS, and custom sections. However, in Constellation, the approach is different. It is a configuration-driven UI model, where direct code-level customization is limited or not supported.
Because of this, UI design in Constellation relies on out-of-the-box capabilities such as views, templates, and configurations rather than custom code. While we cannot directly modify the UI using HTML or CSS, we can still enhance the user experience by leveraging available features.
For example, images, formatted instructions, and layout configurations can be used to improve visual structure and provide better clarity within the UI. These elements help in creating a more user-friendly interface while working within the constraints of the Constellation framework.
I worked on designing the UI in Pega Constellation by primarily utilizing the “Full Form Width” view template available in the UI Gallery. This template provides flexibility in designing layouts, allowing adjustments to field widths and enabling the arrangement of fields into multiple columns (such as 4, 5, or more) based on business requirements.
One limitation observed is that view headers are not visually highlighted from the end-user perspective. As seen In the below Image.
To address this, I used the “Show Instructions” feature within the view configuration. Enabling this option ensures that the header becomes clearly visible and improves the overall user experience. In addition, to further enhance the visual separation and clarity of the header section, I used an image snippet as a design element and positioned it within the UI to make the header more distinguishable.
To implement this:
- Enabled the “Show Instructions” option in the view settings
- Created an Instructions rule to define the header content
- Used the Source option in the Instructions editor to customize text
- Applied heading formats (Heading 1–4) for better structure
- Used Heading 2 with bold styling for consistency and clarity
To further enhance UI clarity and separation between views, Instruction content can be effectively utilized to introduce visual distinction and contextual guidance, helping users better understand different parts of the screen.
For layout alignment and responsiveness:
The Full Form Width template was consistently used
Grid configuration was applied within views
Columns were adjusted dynamically (e.g., 5, 6, 7 columns) based on requirements
UI customization in Constellation is limited, so design must be handled using available configurations like views, layouts, and Instructions.
Using this approach, the entire screen was designed to achieve better structure, clarity, and flexibility.
Key Observations & Suggestions
- Views are the core foundation of Constellation UI; proper planning is crucial before implementation
- UI customization is somewhat restricted compared to traditional UI, so creative approaches within available features are helpful
- Consistent use of grid and column layouts improves alignment and responsiveness
Designing reusable views helps maintain consistency across the application
If anyone has additional experiences, feel free to share your knowledge—it can be valuable for others working with Constellation UI.
AND thanks for using the Knowledge Share category, will help it be found with others.