Skip to main content

Cosmos React

Suggest edit Updated on March 14, 2022

Pega Platform version 8.7 expands the scope of Cosmos React and its underlying UI architecture to support the latest open-source technologies and UI solutions. This evolving framework features a curated authoring experience that helps professional and citizen developers build an application in the low-code App Studio environment and also provides flexible orchestration.

For more information, see Cosmos React.

New views and templates

Cosmos React applications now include several new out-of-the-box views and templates to help you build an intuitive, uncluttered application to meet your business needs.

The 8.7 version of Pega Platform provides tools to perform the following tasks:

  • Edit case previews.
  • Create a dashboard landing page.
  • Generate form views from the User Interface tab.
  • Highlight important fields in details views.
  • Define full-page views for data objects.
  • Edit data object records by dragging table rows.
  • Display embedded data as field groups.
  • Configure confirmation views.
  • Use new templates, for example, dynamic tabs.

The new components add variety to your application and improve data presentation by helping you display the information your users need to complete each stage of work. For more information about views, see Configuring forms and views.

The following figure presents the templates in the User interface tab.

View templates
You use the Create a new view pane to create View templates, which are based on columns, lists, or tabs.

Channel embedding

Cosmos React applications now support channel embedding. This update provides you with the tools to include parts of Pega Platform UI on your web page, to better integrate Pega applications with your existing web resources.

To create an embedded channel, which is called a web embed in Cosmos React applications, you generate the HTML code in App Studio on the Web embed landing page, and then paste the code into your website source code. The figure below represents a sample embedded channel.

An embedded channel in an external web page
Skeleton of an external web page with a Pega embedded channel

Web embeds replace mashups in Cosmos React applications. For more information, see Embedding Pega Platform UI in web pages.

Improved theme authoring

The App Studio themes editor has been updated to improve developer experience and make accessible design more intuitive.

The Cosmos React Branding and themes editor now features an improved color picker that flags color combinations that do not meet WCAG Level AA contrast ratios. By adding accessibility tests to theme authoring, this enhancement brings accessibility to the center of the design process.

Accessibility warnings in the theme color scheme
The application displays warning icons next to colors that do not meet contrast requirements.

In addition, you can now preview the theme directly from the Configuration tab on a web portal landing page. The page now also includes a link to the branding tool, which improves user experience by reducing the number of clicks required to make a change in a theme.

At the back end, the enhancement also adds improvements to the rule-ui-theme editing in Dev Studio, such as JSON validation, which boosts rule integrity.

For more information on themes in Cosmos React, see Branding your application.

Localization support

Starting with Pega Platform version 8.7, Cosmos React applications support localization. This enhancement helps users work in their preferred language, which ensures a better understanding of the product.

Developers can now download translation packages that contain labels, captions, tooltips, and instructions that appear in user-facing components, such as views and landing pages. During the localization process, you can translate the text in the package into the target language, and then import it back into the application through the Localization landing page.

Localization landing page in App Studio
The localization landing page is at the bottom of the App Studio Settings menu. The page lists several languages.

For more information, see Localizing your application.

Improvements in the utilities pane

Starting from Pega Platform version 8.7, applications that rely on Cosmos React offer improvements in the utilities pane, the usability of which is now more convenient.

The improvements include the following:

  • The Attachments widget now provides you with the option to assign custom categories to the files that you upload to cases. With this new enhancement, you can effortlessly organize all attachments to maintain clarity and ensure that the relevant files are uploaded.
  • The maximum attachment size for assignments is now 1024 MB. The attachments widget uses the out-of-the-box pyMaxDragDropAttachSizeMB application setting, whose value is customizable. For example, if your application is in the testing phase, you can limit the maximum attachment size to 100 MB to enhance system performance.
  • The utilities pane includes the Related cases widget, which you can use to add case instances that are relevant to your cases. For example, in a collective insurance case, you can add the insurance cases of individuals to enhance the process of analysis.
Related cases widget
An extract of the utilities pane that shows the Related cases widget with sample cases.

For more information, see Widgets in Cosmos React.

Other enhancements

Read about minor enhancements in Pega Platform version 8.7.

Bulk action support in Cosmos React

Cosmos React applications now support bulk actions for tables and lists that appear on landing pages and case pages. Previously, users could only process list items one by one. Now, users can select items from a list and perform case-wide actions on all of them at once. This improvement eliminates repetition, by boosting productivity and reducing time-consuming busywork.

For more information, see Configuring tables.

Single-select and multi-select fields as React tables

In Cosmos React applications, you can now configure both single-record reference fields and lists of records fields as React tables. Fields that you configure as single-select tables display the available options as radio buttons, while fields that you configure as multi-select tables display the available options as check boxes. By using a table display, you include additional context in your options, such as product pricing, which helps your users make more informed decisions.

For more information, see Configuring a single-record reference field and Configuring a list of records field.

Improved case life cycle display

In Cosmos React applications, the case life cycle display (case chevrons) now looks and behaves in a more modern way. The case chevrons include the following improvements:

  • The display is responsive and the case stages react to screen size. Depending on the size, either all stages or only the current stage are expanded; on smaller screens, all stages are collapsed.
  • Every stage is clickable and a pop-up display shows more details, such as steps, statuses, and an option to see the full life cycle in a modal dialog box.
  • The design follows accessibility best practices so that users who depend on assistive technologies can successfully interact with the chevrons.

Sliders and steppers for integer fields

In Cosmos React applications, integer-based form fields now support the slider and stepper display options. The slider helps users move along a spectrum of values, while the stepper helps modify the value incrementally. This enhancement enriches the user experience with more varied and intuitive ways to display data.

For more information, see Configuring forms and views.

Visibility conditions for embedded views

You can now control when embedded views are visible in Cosmos React applications. Previously, you could control when a field was displayed by building logical expressions or by using When rules. In Pega Platform version 8.7, visibility conditions also apply to views that you insert in other views. For example, you can configure a view with a separate set of fields that are displayed or hidden based on the option that the user selects on your form. With this enhancement, you can build user-friendly, dynamic forms that help you collect context-relevant information.

For more information, see Configuring forms and views.

Improved combo-box experience

Cosmos React applications now support combo-boxes in the following scenarios:

  • Picklist fields configured with search boxes.
  • Case and data reference fields.
Combo-boxes help users search and select field values more conveniently by dynamically adjusting the lists of available values to user input.

Additionally, for large bodies of data, combo-boxes now render faster and in a more optimized manner by employing pagination.

For more information, see Configuring a list of records field.

New content security policy for Cosmos React applications

Cosmos React applications now include a new out-of-the-box rule that governs content security policy. You can use and customize the pxDefaultReact rule based on the requirements of your application.

For more information, see Configuring a content security policy in Cosmos React applications.

New application header

Applications that rely on the Cosmos Theme and use either the Cosmos React or section-based Theme Cosmos architecture can now use a new type of header. The new header is a bar that spans the top of the page and includes a logo, the application name, the operator menu, as well as a global search box. By giving users a quick way to distinguish between portals, this enhancement is particularly useful to businesses that run many Pega applications.

For more information, see Defining a portal header.

Identification of duplicate cases

Applications that rely on Cosmos React can now search for other cases that your case might potentially duplicate. In the list of results, you can select one case, or ignore the prompt and continue your work. When you select a case, your current case is resolved as a duplicate.

For more information, see Searching duplicate cases.

Adding fields from the User Interface tab

In Cosmos React applications, developers can now add new scalar fields to the data model of a case directly from a view editor on the User Interface tab. This feature improves the designer experience by reducing context switching and making staple operations more convenient.

New field option in a view editor
The new field option is at the bottom of the add field menu.

Did you find this content helpful? YesNo

Have a question? Get answers now.

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

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