Development articles

How to see UI like a designer

Learn to see and describe critical issues that gauge the quality of basic implemented user interfaces (UI) and how to address them, just as UX professionals do. This is the first from an upcoming Pega Academy mission on UX design.

Watch 'How to see UI like a designer' on Pega Community

Last updated: Feb 2020

Local fix for latest Chrome affecting focus styles in Pega Apps

​This article is about the side-affects of recent updates from chrome (version >= 83). Chrome introduced certain enhancements to improve certain form-level elements and their accessibility.

Read 'Local fix for latest Chrome affecting focus styles in Pega Apps' on Pega Community

Last updated: Jun 2020

Migrating an existing application from UI Kit to Cosmos UI

This following article provides guidance for migrating your existing Pega application built on UI-Kit to Cosmos UI using the Pega Platform 8.3.

Read the rest of 'Migrating an existing application from UI Kit to Cosmos UI' on Pega's Community blog.

Last updated: Jan 2020

Badge icons with status

While icons does convey things very easily to the user, it will be great if we can do below things to convey more in depth status to the user.

Read the rest of 'Badge icons with status' on Pega's Community blog.

Last updated: Apr 2020

Optimizing perceived performance by avoiding issues like FOIT, FOUT

As web developers, we strive to provide the best experience for users of our sites and applications as possible. However in Pega, due to heavy usage of...

Read the rest of 'Optimizing perceived performance by avoiding issues like FOIT, FOUT' on Pega's Community blog.

Last updated: Feb 2020

Everything about web fonts

A typeface refers to the set of typographical symbols and characters: letters, numbers, and any characters that let us put words on our website. It is the design of the alphabet...

Read the rest of 'Everything about web fonts' on Pega's Community blog.

Last updated: Feb 2020

Customizing a Cosmos application

This document covers what to do and what not to do when customizing a Cosmos application.

Read the rest of 'Customizing a Cosmos application' on Pega's Community blog.

Last updated: Jan 2020

How to update the summary panel of the Cosmos UI inside a case flow action

In the Cosmos UI, the main case is usually opened as a 'Review' harness (e.g. read only), where the assignment processing is opened inside an Ajax container using the 'Perform' harness. This is different from UI-Kit where the whole case page was opened inside a Perform harness when processing an assignment.

Read the rest of 'How to update the summary panel of the Cosmos UI inside a case flow action' on Pega's Community blog.

Last updated: Jan 2020

Common UI issues on upgrade of Pega Applications Built on UI Kit

After upgrading pega applications to newer versions of UI-Kit, the most common UI issues are misalignment of the layouts, controls and text overlapping over content, browser compatibility issues.

Read the rest of 'Common UI issues on upgrade of Pega Applications Built on UI Kit' on Pega's Community blog.

Last updated: Dec 2019

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: Dec 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: Dec 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: Dec 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: Dec 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: Dec 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: Dec 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: Dec 2019

How to Make a Card with a Click Action Accessible

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: Jun 2020

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

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: Jun 2020

The Sum Is Greater Than The Parts

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: Jun 2020