Development articles

Customizing the Case Summary Panel in Cosmos

Cosmos Work includes an improved UX and visual treatment for end users working with cases, including a new case summary panel that highlights the most important data about your case. But we didn't stop there: with Cosmos we made it easy and fast for Pega developers to customize case data in a low-code fashion using only App Studio.

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.

Read the rest of 'Customizing the Case Summary Panel in Cosmos' on Pega's Community blog

Last updated: Oct 2019

How to Display Case Details in a Separate Pop Up Window

Some applications have a lot of details on a case, such as history or details, that usually cannot fit on a single screen without having the user scrolling back and forth to be able to access to the different pieces of information. This article explains how you can show these details into a new browser window.

Read the rest of 'How to display case details in a separate pop up window' on Pega Community's blog

Last updated: Sep 2019

How to Implement Floating Labels in your Application

The floating label pattern was first introduced on mobile to save space by making the label inline with the input field and it also becoming very popular with desktop applications. The purpose of this document is to explain how to provide this functionality using the Pega UI.

Read the rest of 'How to implement floating labels in your application' on Pega Community's blog.

Last updated: Sep 2019

How to Customize the Date Picker Overlay

This article demonstrates the different ways you can customize an overlay and provide a different picker while using the same auto-generated text input control. We will look at using the native browser data picker overlay and creating a custom picker.

Read 'How to customize the date picker overlay' on Pega Community's blog

Last updated: Sep 2019

Creating a Basic Cosmos Work Application in Pega 8.3

In Pega 8.3, we’re introducing 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.

Read the rest of 'Creating a Basic Cosmos Work Application in Pega 8.3' on Pega Community's blog

Last updated: Aug 2019

How to Use the Flex-col-4 and Similar Helper Classes

A lot of Pega developers have had issues using the flex-col-4 and similar helper classes. These classes are used to create grid layouts. For example, a typical layout would have 12 or 16 columns and the UI would be organized around these columns. Some of the confusion comes from the fact that in the pyEndUser skin shipped in UI-Kit, the dynamic layout for inline grid quadruple is marked as deprecated and a comment indicates that a better solution is to use the flex-col-4 helper class.

Read the rest of 'How to use the flex-col-4 and similar helper classes' on Pega Community's blog

Last updated: Aug 2019

How to Enable Pulse as Slide-out in UI-Kit 13 and Higher

Between UI-Kit 8 and UI-Kit 12 (Pega 8.1), the Pulse component was displayed as a slide out that would be visible when clicking on the pulse icon in the top right hand corner of the case header. In UI-Kit 12 shipped with Pega 8.2, we wanted to make Pulse more visible when opening a case and we changed to OTB implementation so that Pulse was now always visible on desktop at the bottom of the case for both the Perform and the review harness. This article explains how to add back in UI-Kit 13 and higher the Pulse component as a slide out for desktop.

Read the rest of 'How to enable Pulse as slide-out in UI-Kit 13 and higher' on Pega Community's blog

Last updated: Aug 2019

How to Make a Card with a Click Action Accessible

Author: Richard Marsot

While reading this recent article called ‘Converting divs into accessible pseudo-buttons‘ from Jamie Nicholls, I realized that Pega developers have stumbled into a similar issue using the out of the box Pega UI.

Making the UI accessible is something that is easily achievable with Pega UI if you know how to correctly configure the control, but is an aspect that is sometimes overlooked.

Read the rest of 'How to Make a Card with a Click Action Accessible' on Pega Community's blog.

Last updated: Aug 2019

How to Only Have One Active Main Navigation Item When Using Sub-menus

Author: Richard Marsot

The Case worker and Case Manager portals included in UI-kit use a flat list of navigation items in the sidebar.

But sometimes a flat list can become too long and you need to break it up in sub menu items. Each submenu could be generated from the same navigation rule or by referencing another navigation rule. This is the case of the Pega Marketing portal.

Read the rest of 'How to Only Have One Active Main Navigation Item When Using Sub-menus' on Pega Community's blog.

Last updated: Aug 2019

The Sum Is Greater Than The Parts

Author: Sam Alexander - Senior Product Manager, Cosmos UX framework

Chocolate is great on its own (especially if it’s European). A marshmallow is great on its own. A graham cracker is great on its own. Combine all three together and you get a ​S’more​ — a delectable treat that is immensely more divine than the some of its parts!

Similarly, each development in front-end technology is great on its own. Pega’s model-based, low-code paradigm is great on its own. Because Pega’s application development platform is so flexible, you can often combine the two to create a more divine app experience, just like a S’more!

Read the rest of 'The Sum is Greater Than The Parts' on here.

Last updated: Aug 2019