Innovating with Pega Constellation: Blending Traditional UI with Modern Architecture

The digital landscape demands robust, flexible, and user-friendly interfaces. Pega’s Constellation architecture offers a modern approach, but many applications still rely on traditional UI components. Blending these two can seem daunting, yet it’s essential for leveraging the best of both worlds. This article explores innovative strategies to harmonize traditional UI with Constellation, providing developers with practical insights and advanced techniques.

Understanding Constellation and Traditional UI

Constellation represents Pega’s latest UI framework, emphasizing a responsive, dynamic user experience through a cloud-native approach. It facilitates rapid development and consistent user interfaces, making it ideal for modern applications.

Traditional UI in Pega has been the backbone for many enterprises, providing a stable and familiar environment for developers and end-users alike. The challenge lies in integrating these legacy components with the new Constellation framework without compromising performance or user experience.

Key Benefits of Blending UIs

Enhanced Flexibility: Combining traditional UI with Constellation allows developers to utilize legacy components while benefiting from modern enhancements.

Seamless User Experience: Users can interact with a cohesive interface, maintaining familiarity while experiencing the advancements of Constellation.

Efficient Development: Leveraging existing traditional UI components reduces redevelopment time, enabling faster project delivery.

Step-by-Step Guide to Blending UIs

  1. Assess and Plan: Identify which traditional UI components need integration and plan their roles within the Constellation architecture.

  2. Set Up Your Environment: Ensure your Pega Platform is updated to support both UI frameworks. Configure your application settings to accommodate hybrid development.

  3. Define Integration Points:

  • Action Sets: Establish the actions that will trigger transitions between traditional and Constellation UIs.
  • Harness and Section Rules: Configure these rules to display traditional components within Constellation views.
  1. Implement Data Synchronization: Ensure that data flows seamlessly between the traditional and Constellation components. Use Pega’s data pages and integration capabilities to maintain consistency.

  2. Design Responsive Interfaces: Leverage Constellation’s responsive design features to ensure traditional UI components adapt well to various devices and screen sizes.

  3. Test Rigorously: Conduct thorough testing to identify any performance issues or UI inconsistencies. Use Pega’s automated testing tools to streamline this process.

  4. Optimize Performance: Monitor the blended application’s performance and optimize loading times and responsiveness. Utilize Pega’s performance diagnostic tools to fine-tune your application.

Practical Tips for Developers

  • Modular Approach: Break down your traditional UI components into modular sections that can be independently integrated into Constellation.
  • User Feedback Loop: Incorporate user feedback early in the development process to refine the integration and enhance user satisfaction.
  • Documentation and Training: Maintain comprehensive documentation and provide training for your development team to ensure smooth adoption of the blended UI approach.
  • Continuous Improvement: Regularly update and improve the integrated application, keeping pace with Pega’s latest enhancements and best practices.

@Sairohith

We have an application in Theme-Cosmos with highly customized UI using sections, CSS and etc. We are considering the options of whether to rebuild UI using Constellation or to go for a blended approach of reusing theme-cosmos case in the new Constellation application, so we can try to keep the same UI.

Is it possible or are there any implications if you try to render the theme-cosmos case type(section based) in react web applcation using Constellation SDK or Constellation DX API? Or does this issue gets resolved by using the “Traditional UI in Constellation” tool, since it generates necessary assets?

@VENUSHKA please can you go through the available documentation and discussions posted by our own SME’s to see if these answer your questions?

Constellation UI

Constellation adoption strategy - Blending UIs

Considerations for Constellation

Constellation hands-on

Constellation considerations for designers

Enabling Traditional UI in Constellation Breaks All Existing Constellation Case Types

Traditional UI to Constellation UI transformation

Performance of Constellation UI vs Traditional UI

If you need to ask your question, feel free to post it here: Constellation- Ask your Questions!

@Kamil Janeczek @RichardMarsot can you comment whether this discussion post adds any value to the Constellation ‘How to’s’ which the Constellation teams are creating on the support center? There does not seem to be any concrete scenarios discussed in this developer knowledge share.

@VENUSHKA blended mode is only supported when using the OOB Constellation UI - it is not supported in the SDK (e.g. you cannot run a traditional case type inside a Constellation React sdk) - outside of the links shared by Marije - there is also a detailed video on using blended mode that was recorded in Oct 2023 for the LSA community - see CLSA Community: Integrating Constellation with your existing apps in Infinity '23 | Pega