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
In Dev Studio choose New application.
When prompted about the application type to build, select “Search all types”.
Enter “Theme-Cosmos” in text search field and click “Use this application type” button.
Click two times continue (or others if you want to migrate some case types).
Name your application and click “Create application” button.
Your application is ready! Now you should log to this application.
After logging into you new Cosmos Application, switch to Dev Studio.
Choose definition of the Application from the menu. Make sure that your application is built on Theme-Cosmos 01.01.
Change Application Skin into CosmosSkin.
Click on the operation icon and go to AccessGroup.
In “Available portals” add “UserPortal”. By design, there is only one portal in Theme-Cosmos. Also, remove pyCaseManager7 and pyCaseWorker.
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!
Exploring the end user portal Switch back to App Studio. Run the end user portal by selecting Launch web interface > User Portal.
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.
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.
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
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.
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!
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.
Thanks for sharing on how to get started with Cosmos-Design!
How do you suggest we tackle the Temporary case creation in cosmos-design. As in cosmos-design, upon case creation there will be a toast notification. If the case ID is present, it is possible to open the case from the toast/recents/my work but as temporary case lacks the case ID, how do we get back on the case?
We have a similar request around customizing case creation. We need an option to navigate the user to the first step in the newly created case instead of forcing them to move through the toast notification, then needing to hit Go on the case page before getting to the first step.
How can we view all the List of opened cases in Cosmos Portal? In Case portal we could view all cases opened in form of tabs and could toggle between cases , Wanted to understand how we can view the same in Cosmos Portal.
Cosmos is designed so that you can open cases in browser tabs. For any link to a case that calls Open Work, try right clicking and selecting "Open in new browser tab."
As a more detailed example, suppose you're showing a list of cases in a Table (tabular data). One of the cells calls Open Work. You can right click and open in new browser tab, which lets you work on that case in a separate browser tab. Your original tab with the tabular data stays the same.