Discussion
PEGA
Pegasystems Inc.
IN
PEGA
Posted: Feb 15, 2024
Last activity: Feb 15, 2024
Last activity: 15 Feb 2024 8:50 EST
Theme Cosmos documentation and supporting articles
Traditional applications use the Theme Cosmos design system as its main product design resource. The system provides a consistent library of components that form the entire user experience for both customer-facing applications and Pega Platform itself.
Theme Cosmos relies fully on templates and prefabricated components for more efficient development and performance. In addition, a more modern design and increased focus on intuitiveness help save time on application updates and user training.
For more information, see Traditional UI document.
Below are the supporting articles.
| S NO | Articles | Decription |
|---|---|---|
| 1 | Performance constellation UI vs Traditional ui |
This document provides some performances analysis of running the end user portal in Pega 8.5.1, Pega 8.6 and Pega 8.8 Constellation UI rendering is 2 to 3 times faster than Cosmos Theme. |
| 2 | The dos and don’ts of designing with the Pega Cosmos design system | We created the Cosmos design system to help you and low-code app developers craft working prototypes quickly. But if you’re new to working with an enterprise design system, it’s natural to wonder if there’s anything you’re missing before you get started and if you’ve set yourself up for success. We hear you! So, here are some quick tips — the dos and the don’ts — to help you design a great Pega application using Cosmos, on your first try. |
| 3 | Customizing a Cosmos Theme application | This document covers what are the dos and don’ts about how to customize a Cosmos Theme application |
| 4 | Refreshing files and documents widget in Theme Cosmos | This document will explain about how to refresh files and documents widget in theme cosmos when attachments are added through flow actions and case processing. |
| 5 | Cases/work objects processing behavior and configuration in theme cosmos applications | Case assignments are processed behaviors in ajax containers (OOTB platform feature). There are three Ajax containers used and customized for cosmos-specific behaviors. |
| 6 | Refresh contents in Theme Cosmos | This document provides information about the refresh strategy for Theme-Cosmos. By default, the summary panel and the case processing area will be refreshed at every step/stage of processing. For the utils and tab contents, the below refresh strategy should be used which will give better performance improvement for the application. |
| 7 | Theme-Cosmos: Open work object in Full portal on Copy sharable Link | Opening the work object in the theme cosmos full portal on the Copy sharable link (simple URL) is available from the Pega 8.5.1 release. This document explains the necessary steps to make the copy sharable link in the full portal. |
| 8 | Limitations of Snapstart url in SPA | |
| 9 | Theme-Cosmos: Open work object with Full portal in a new window | Opening the work object in theme cosmos full portal on right click of a link and select "Open Link in New Tab" is available from the Pega 8.4.5 release. More information on the pega release and theme-cosmos version support is mentioned below. This document explains the necessary steps to enable this feature. |
| 10 | Open Cosmos application multiple times in different browser tabs |
Pega has enhanced the support of multiple sessions for Single Page Applications and it has been adopted in the Theme-Cosmos. This feature has been supported from Pega 8.6 and in Theme-Cosmos version 03 |
| 11 | URL Mapping configuration | Opening the work object in the theme cosmos full portal through URL Mapping is available from the Pega 8.5.1 release. This document explains the necessary steps to make the sharable link |
| 12 | Toast Notification in Theme-Cosmos | Toast notification can be shown on successful creation of case object. Once the work object is created successfully the toast notification will be shown on the bottom center of the screen. |
| 13 | Automatically Render local action UI in a modal in Theme Cosmos | As per the cosmos design system, a case wide action UI should always render in a modal whether it is launched from within a case or from a preview panel. The work area is always reserved for assignment processing. |
| 14 | How to configure preview panel in Theme Cosmos | |
| 15 | Case header in Theme Cosmos | Case header is part of every work object and provides details such as work object id, type and name. It also consists of case icon, breadcrumbs, action buttons and region of additional action buttons based on the business needs. |
| 16 | How to set width for dialog containers in Theme Cosmos | In special cases, some applications might want the dialog container to be bigger based on the use case. Theme cosmos provides, ootb three helper classes to make the dialog container for adjusting the width. |
| 17 | Archival Case support in Theme Cosmos | This document talks about the support of opening archival cases OOTB in Theme Cosmos. |
| 18 | How to implement archival cases support in custom application built on theme cosmos | This document talks about how to customize archival cases in your application |
| 19 | Switch control in Theme Cosmos | Current implementation of Theme Cosmos does not contain control that can be used as a switch control. However look of that control can be achieved by applying styling to the existing Checkbox control |
| 20 | Customizing the Case Summary panel in Cosmos | The goal of this article is to show you how to customize the “Summary panel” with your case's most important data using only App Studio. |
| 21 | How to extend the confirm screen in Theme-Cosmos | Theme-Cosmos has a very different way to render a case compared to UI-Kit. While in UI-kit, the whole case page is rendered either using the Perform, Review or Confirm harnesses; in Theme-Cosmos, the 3 harnesses are pointing to the same section and renders the same way. There is no differences between a perform and review harness in Cosmos theme. |
| 22 | How to generate a toast when processing assignment in Theme Cosmos | The Cosmos design system has a toast component that is used to display short messages exclusively to confirm a completed user action (such as a form submission). Toasts inform users that an action happened if users cannot see the action on screen. |
| 23 | How to update the summary panel of the Cosmos UI inside a case flow action | In the Cosmos UI, the main case is usually opened as a 'Review' harness (e.g. read only), where the assignment processing is opened inside an Ajax container using the 'Perform' harness. This is different from UI-Kit where the whole case page was opened inside a Perform harness when processing an assignment. |
| 24 | How to address styling issues with the case lifecycle widget in Cosmos Theme | The case lifecycle widget is shipped as part of the core Pega- ruleset and allows to view the number of cases available in each stage of any case type. This widget can be dropped in any user dashboard. |
| 25 | Make Delegated Data types open in a new window in Theme Cosmos | In Theme Cosmos based application default configuration is to open delegated data types in the same window, but delegated rules in a popup window due to application architecture. To make the user experience consistent and open both objects in a popup window some changes are required. |
| 26 | How to auto-logoff the window for cases open in a new browser tab using Theme-Cosmos | In this post, we are going to look at ways to bring some communication between these tabs. The main focus is the logoff use case, but other message could be sent to. |
| 27 | Preview panel tabs enhancements | Look and behavior of tabs in preview panel has been updated in Theme Cosmos version 03.01 for Pega 8.6. |
| 28 | Collapse utility panel by default | Some project and clients require the default work area to be bigger. Collapsing the utilities pane would provide that by default. For smaller resolution screens, this should happen automatically. |
| 29 | Customizing the Welcome widget in a Cosmos application | By default, a Cosmos application includes a Home page. Unlike a traditional Pega dashboard that is customizable by an end user, the Home page is intended to be a curated experience where application designers can specify what all users first see upon logging in. |
| 30 | Creating and customizing case tabs in a Cosmos application | The case summary panel in Cosmos Design System allows for vertical tabs that let users explore various screens without disrupting case processing forms or affecting the surrounding UI. |
| 31 | Render local action in modal | As per the cosmos design system, a case wide action UI should always render in a modal whether it is launched from within a case or from a preview panel. |
| 32 | How to drilldown into a chart widget used in the dashboard of a Theme Cosmos application | One of the requested feature is the ability to drilldown into a chart inside a dashboard using the current section based UI. This document will showcase how to achieve such functionality. |
| 33 | How to bring back the old attachment utility in Theme Cosmos | By default, the case page template in the Cosmos Theme provides the same attachment utility that was included in UI-Kit 12 and higher. This attachment utility is named 'Files and Documents. It lets you attach different types of content (rich text, local file and url) |
| 34 | Creating status badges | We often come across many use cases of status badges, but how we configure them in our application? Is there any OOTB control for this? Are there any helper classes? We are going to see the same in our current post. |
| 35 | Banner classes | New banner helper classes to achieve the standard banner UI designs. |
| 36 | Helper classes to achieve complex forms using 2-column & 3-column inline wrapping templates | Examples of using different helper classes. |
| 37 | Case Harness behaviours in Theme-Cosmos | This document will explain about the different harness behaviours in theme cosmos when a Case type(work object/wo) is created and opened from different places. |
| 38 | Case wide local action behaviours | This document explains the behaviour of case wide local and flow actions in theme cosmos. |
| 39 | What's New in Theme-Cosmos 03.01 - Pega 8.6 | This article explains the effort involved when upgrading to the latest version of Theme cosmos. Pega 8.6 is released with Theme cosmos. 03.01 version. |
| 40 | Migration of Theme-Cosmos 02.01 to 03.01 - Assignments | This document describes changes made to Case Assignments introduced in Theme-Cosmos 03.01 and migration steps for your application. |
| 41 | Migrating existing, simple applications from UI-Kit to Theme Cosmos (Section-based UI) | The attached article provides guidance for migrating simplistic applications built with this architecture from the UI-Kit theme (ui-kit ruleset and built-on) to the Cosmos theme (Theme-Cosmos ruleset and built-on). |
| 42 | Preview panel changes in 8.6 and migration guide | In version 8.6 some changes in the preview panel were introduced. This article describes the main changes in the Theme-Cosmos ruleset and provides migration steps in case you have overridden some of these rules. |
| 43 | Migration from Theme-Cosmos 01.01 to 02.01 | This article explains the effort involved when upgrading to the latest version of Theme cosmos. Pega 8.5.1 is released with Theme cosmos. 02.01 version. |
Posted: 9 months ago
Updated: 9 months ago
Updated: 15 Feb 2024 8:50 EST
PEGA
Pegasystems Inc.
US
@SakthiVickraman Thanks Sakthi for publishing this comprehensive list of all the articles created by Pega product engineering on Theme-Cosmos - You can also find a complete list of all these articles by searching on community - https://support.pega.com with the 'Developer Knowledge Share' tag
as of February 2024 - we have 66 articles on Theme-Cosmos