Creating a Basic Cosmos Work Application in Pega 8.3

A revolutionary new design system

In Pega 8.3, we’re introducing an early preview of “Cosmos Work”, a new design system theme created for employees managing daily workflows. To understand more about this revolutionary new UX framework, we recommend watching the Pegaworld 2019 replay, “PegaWorld 2019: Introducing the revolutionary Cosmos Work UX framework”.

In the near future we'll be offering guidance on how to migrate your existing apps from legacy UI Kit theme to Cosmos Work theme. But in the meantime, we wanted to show you how you can begin to explore some of the features of Cosmos Work in the context of a new Pega application. So let’s get started by creating a new app!

Creating a new application with the Cosmos Work theme

  1. In Dev Studio choose New application.
  2. When prompted about the application type to build, select “Search all types”.
  3. Enter “Theme-Cosmos” in text search field and click “Use this application type” button.
  4. Click two times continue (or others if you want to migrate some case types).
  5. Name your application and click “Create application” button.
  6. Your application is ready! Now you should log to this application.
  7. After logging into you new Cosmos Application, switch to Dev Studio.
  8. Choose definition of the Application from the menu. Make sure that your application is built on Theme-Cosmos 01.01.
  9. Change Application Skin into CosmosSkin.
  10. Click on the operation icon and go to AccessGroup.
  11. In “Available portals” add “UserPortal”. By design, there is only one portal in Theme-Cosmos. Also, remove pyCaseManager7 and pyCaseWorker.
  12. Create a basic case type
    You need a basic case type so that you have fields to map into the Cosmos Work design template regions. Creating cases in Pega is beyond the scope of this article, but for a quick tutorial on creating a basic case type, we recommend this tutorial. (Note: “Pega Express” is called “App Studio” in Pega 8 and above)
    With a basic case type, now you’re ready to build out your UI by mapping your case type fields into the regions offered the Cosmos Work design templates!
  13. Exploring the end user portal
    Switch back to App Studio. Run the end user portal by selecting Launch web interface > User Portal.
  14. By default, the portal renders the Home page with Pulse, a welcome widget, a To Do widget (which shows your assignments), and an “Items I follow” widget.
  15. We need to create a few cases so that these widgets can display useful information.
    Using the New menu in the left navigation window, create a few new cases.

  16. Open one of your newly created cases.
    You’ll see a UI similar to the following. Notice that there’s a few default fields, including priority, created, and updated.

    But how do you render the fields you created in your case type? Excellent question! Because Cosmos Work is built on design templates, you use App Studio to easily map the fields into specified regions. Let’s do that now

  17. Using App Studio to build your UI

    In app studio, open one of the case instances you create. Enable Design Mode by clicking the icon at the red arrow. You’ll see that blue lines surround regions where you can map fields.

    Hover over section surrounding the default fields, and click the pencil icon.

    Notice this templatized section offers three regions: “Additional critical data”, “Primary case data”, and “Additional details.”

    As its name suggests, the “Additional critical data” is for the most important data about your case. This region is based on an Inline format, thus fields mapped here will flow from left to right.

    “Primary Case data” is a stacked format, so fields mapped here will flow from top to bottom.

    In this screenshot, we have mapped the First Name field from our case type into the “Additional critical data” region.

    Go ahead, map some of the fields into the regions and watch them appear in a pixel-perfect fashion!

    You may have noticed the vertical tab at the bottom left named “Activity.” This renders the Pulse component in the main work area so users can collaborate on the case. But what if you wanted to add your own tabs for the case type that would allow users to render different view of your case type? Let’s do that next.

    What’s next?

    We’ve just showed you how to get started with Theme Cosmos, offered as an early preview in Pega 8.3.

    With enthusiasm, our front-end teams are currently working hard to work out the kinks so that not only your apps but our industry apps -- Pega Sales Automation, Pega Customer Service, Pega Marketing, and others -- can adopt this framework in the coming releases. Watch here for more upcoming articles!


Keep up to date on this post and subscribe to comments

August 15, 2019 - 5:40pm

Really interesting knowledge share, could you provide directive to migrate existing application developped on 7.4 to Cosmos ?

Looking at PW 2019 introduction to Cosmos upgrade from 7.4 to Cosmos should be pretty easy (39min): https://www.pega.com/insights/resources/pegaworld-2019-introducing-revolutionary-cosmos-work-ux-framework 

Thank you


September 17, 2019 - 9:13am

Any news on providing migrations steps to customers ?

October 8, 2019 - 2:02pm
Response to LoicM950


As we continue to work on improving Cosmos and moving it beyond early preview stage, we're also actively working on strategies for migration that we can share with customers.  For now, here's a few high level things to think about, based on my experience migrating apps:

  • On dev system, configure Application records for your old app (based on UI Kit) and new app (based on Cosmos) so that you can run your old app and new app side by side. Create operators for both the old app and the new app. This allows you to compare the apps to make sure you don't miss any functionality as you migrate. When you modify rules in the new app, save them in an incremented ruleset version but restrict your old app to the older version of the ruleset so that it continues to work as it did.
  • Un-override rules that you've overridden from UI-Kit.  For instance, Review/Confirm/Perform harnesses, widgets, and other Section rules such as pyCaseMainInner.  Generally, save them in your incremented ruleset and mark them as Withdrawn. We're exploring options for tools to help automate this.
  • Convert your forms to use OOTB design templates (1 column, 2 column, etc)
    • To convert existing section into a template, create a new Section rule in the incremented ruleset version and same class.  By default, the section will be created using the "1 column" template.  Cut and paste section elements from the old form to the new form.  (Right click DL's, fields, etc from old section, select copy.  In new section based on 1 column design template, right click the region to paste the fields. 
  • Remove your custom CSS helper classes applied to your DL's and fields.  In addition being a UX framework, Cosmos is also a design system with opinionated views on spacing and other styles, so custom CSS will likely result in mismatched spacing across your app. Be aggressive here. As I've migrated apps to Cosmos, I quickly look at helpers applied to a DL and quickly try to understand what they do; usually it's adjusting spacing, so I can just remove it and/or apply an OOTB helper class provided by Pega.
  • Customize your case view with templatized pyCaseMainInner and the templatized sections it includes. Watch this space, as we'll soon be providing guidance on customizing the case view. Here's a high level overview:
    • In UI Kit, pyCaseMainInner, which rendered the main contents of your case,  was based on "Page with secondary column" design template, which contained a large main region and a smaller column region.  You may have overridden it to customize it. Take note of how you customized it.  In Cosmos, pyCaseMainInner uses a new template, "Main case page UI template".  Expose your data into the new regions in the new templates 
  • Do not override any skin format rules in the CosmosSkin ruleAvoid adding new skin formats. You can achieve the styling specified with Cosmos Design System using the existing skin formats and OOTB helper classes.

Again, we're actively improving Cosmos as well as thinking about strategies and tools we can share with you to help you in the migration.  Stay tuned.

Senior Product Manager, UI-Kit and Cosmos framework 

September 28, 2019 - 12:55am

Recently we are moved from Pega version 721 to Pega 82, does cosmo design support in Pega 82 version?

October 8, 2019 - 1:09pm
Response to JohnPaulRaja,C

Hi! The early preview of Cosmos is supported only in 8.3.   If you're looking for an 8.3 environment to explore Cosmos, you can use the 8.3 cloud system you get when enrolling in a Pega Academy course. 

October 16, 2019 - 1:13pm

Thanks for sharing details on how to start with COSMOS using 8.3.

My question ("WHAT NEXT") - is this much can be achieved with COSMOS using 8.3? If no, what are the other features can be achieved in 8.3

To leverage 8.3 COSMOS capabilities, Our organization is interested to migrate existing 731 applications.

Please suggest.

October 16, 2019 - 1:41pm
Response to DASC0001

You should be able to use Cosmos in 8.3 for processing any case type (standard or screenflow) - the Cosmos layer in 8.3 provides the same level of functionality as the Case worker portal in ui-kit 14. We are adding more capability in 8.4 but there is nothing that precludes to use the Cosmos-Theme as a built on application in 8.3 instead of UI-Kit. 

We are continuing to add more articles on how to upgrade your application to use the new Cosmos design system. Here is a recent article that describe how to customize the case summary panel - https://community1.pega.com/community/pega-support/question/customizing-case-summary-panel-cosmos

October 17, 2019 - 4:01am
Response to RichardMarsot

As of today we are really far from the announce in Pega World to have easy upgrade path to cosmos.


October 17, 2019 - 3:21am

any plans of using Cosmo in Pega Community portal? :) or at least anything but not what we have right now?