Close popover
Karolina Drabowska (drabk)
Software Engineer
Pegasystems Inc.
drabk Member since 2014 1 post
Posted: July 12, 2019
Last activity: November 26, 2020

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 try Cosmos UI in a new app. For migrating an existing application to Cosmos, check out “Migrating an existing application from UI-Kit to Cosmos UI”.

    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!

Low-Code App Development User Experience Developer Knowledge Share