Discussion
Pegasystems Inc.
PL
Last activity: 26 Nov 2020 0:53 EST
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
- 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.
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!
-
Reply
-
Saurabh Arora Venkateswara Reddy Yerasu -
Share this page Facebook Twitter LinkedIn Email Copying... Copied!
Louis Dreyfus Company
FR
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
Louis Dreyfus Company
FR
Any news on providing migrations steps to customers ?
Pegasystems Inc.
US
Hi!
See the following article entitled "Migrating an existing application from UI-Kit to Cosmos UI"
Sam
Senior Product Manager, Cosmos UI framework
Updated: 28 Sep 2019 0:54 EDT
Maantic Inc
US
Recently we are moved from Pega version 721 to Pega 82, does cosmo design support in Pega 82 version?
Pegasystems Inc.
US
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.
Instellars
SG
why ESRIGIS component is not working in Cosmos application.
I am not finding map related controls when I am enabling ESRIGIS component in application.
But in normal application, map related controls are coming.
Could you please help me in this?
Regards,
Prasad Rangu
Cognizant Technology Solutions
CA
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.
Pegasystems Inc.
US
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://collaborate.pega.com/discussion/customizing-case-summary-panel-cosmos
Louis Dreyfus Company
FR
As of today we are really far from the announce in Pega World to have easy upgrade path to cosmos.
BPM Company
NL
any plans of using Cosmo in Pega Community portal? :) or at least anything but not what we have right now?
Pegasystems Inc.
AU
I am a UX architect about to commence work on a government project in Australia and we are building on 8.3 platform, with PGP. Can you please tell me
A) if Cosmos can be applied to PGP on 8.3? and
B) If not, which is the recommended OOTB UX framework to use?
Pegasystems Inc.
US
In Pega 8.3, you can decide to either choose UI-Kit or Cosmos for the core platform application
Pega Applications like PGP or CRM apps have not yet been upgrade to support Cosmos and they still use the UI-Kit as the core foundation layer.
TCS
GB
Hi!
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?
Please find attached a screenshot for reference.
Pegasystems Inc.
US
Hi,
We're improving the toast notification, and this is a limitation in 8.3. Let me quickly touch base with the team about options.
Sam Alexander
Senior Product Manager, Cosmos UI
Booz Allen Hamilton
US
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.
Is this possible, or in the works?
Bits in Glass
CA
Hi
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.
Pegasystems Inc.
US
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.
Pegasystems Inc.
AU
Hi All, quick question related to cosmos (User Portal). Is my understanding correct that user portal does not provide work queue list? I have a scenario under which a user using User Portal is able to see all the assignments from worklist only and has no option to see list of work queue he has access to.
Pegasystems Inc.
US
H
In 8.4 and above, developers can configure the To Do component on the Home page to allow the end user to switch to a list of todo's (assignments) in a work queue.
- Log in to App Studio and go to Home page.
- Put page in Design mode
- In bottom half of the screen, click pencil icon on To Do widget
Click "Settings"
Finally, enable "Show team assignments"
Now the end user can use the dropdown menu to switch from their worklist to a work queue.
(Screenshots above are from upcoming 8.5, but it's very similar in 8.4. This feature isn't available in 8.3).
Pegasystems Inc.
AU
I found setting options that can do the job
Centene Corporation
US
How to open a case in Review mode in Cosmos Theme, Wherever i refer the case id and open it, it is always opening in Perform mode. I have a requirement to show the case details in review mode. Please help..Urgent
Pegasystems Inc.
US
Hi. Call "Open work by by handle" instead of "Open Assignment".
EvonSys
IN
Did you got the solution for opening a case in review mode [in Cosmos Theme] ?