Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Modernize your interface with Cosmos React UI (8.5)

Updated on May 3, 2021

Improve performance, interactivity, and response times in your application by switching to Cosmos React UI, a new client runtime for UI components and behaviors. As an early look into the next generation of Pega technology, the React architecture also features a new component library, updated security protocols, improved API functionality, as well as a revised authoring experience, all of which promotes a more intuitive approach to development.

Learn about the new client runtime

The Cosmos design system is now available for use in a ReactJS-based run-time architecture. This framework supports a curated authoring experience that helps users with varying levels of experience build an application in the low-code App Studio environment with less effort.

From the system perspective, Cosmos React UI requires a static content microservice that delivers React components, JavaScript code, and other static content to the browser. The client interacts with the Pega Infinity™ server exclusively through DX APIs, obtaining configuration, context, and data to present on the screen. By keeping the Cosmos React UI container separate from other services, you avoid dependencies, give developers tools to create new UI components without interfering with other work, and improve the overall application performance.

For Pega Cloud customers, Cosmos React UI is available for every node. Customers with on-premises systems can deploy the microservice by using Docker or Helm Kubernetes.

Explore the updated component library

The Cosmos React UI architecture offers a wide range of new components for the Cosmos design system, which deliver a modern user experience and improve browser performance. The updated component library contains a rich array of fields, templates, and prefabricated utilities. As an example, the new table component offers a much richer run-time experience, with capabilities such as column freezing, search, and advanced filtering. These features improve the user experience and give case workers more control over data. The following figure shows the new table settings and functionalities:

New table settings

Use better security solutions  

The new framework also provides out-of-the-box industry-standard tools for establishing Single Sign On user authentication. OAuth 2.0 helps your users log in with third-party credentials from identity providers such as Google or Okta, integrating your application within the larger ecosystem of your business.

Improve the user experience

Cosmos React UI emphasizes usability. The framework introduces updated DX APIs, which improve server interactions and response times while offering new functionalities, such as attachment and multi-step form support. In addition, URL addresses for all pages and objects in the Cosmos React UI environment now appear as clear, meaningful paths. These enhancements help you build applications that are quicker to navigate and operate, and more intuitive to use.

Adopt the new authoring experience

By enabling Cosmos React UI in an application, you activate the updated authoring experience as an advanced beta. The redesigned view tab and overlay provide a more intuitive interface for creating views, applying design templates, and adding fields and controls. 

For portals, the refreshed interface provides you with tools to edit landing pages, case pages, and menu settings all in one place. The interface also includes a live preview section that encourages prototyping and speeds up development by helping you follow the changes that you introduce to the interface in real time. In the 8.5 release, all new applications use React-based portal authoring by default. In applications that are built on earlier versions of Pega Platform, you can enable this feature manually.

The following figure shows the redesigned portal authoring tab:

"New portal authoring tab with preview."
Updated portal authoring tab

For more information on Cosmos React UI, see Previewing Cosmos React UI.

 

  • Previous topic Build a better user experience with the improved Cosmos UI theme (8.5)
  • Next topic Customize Cosmos-themed applications in a no-code environment (8.4)

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us