Dynamic Badge Styling in Pega Infinity ’26 🎨

[Anandhuc17408577 (Anandhu chandran)]

Pega Infinity ’26 provides OOTB support for configuring badge variants dynamically in Constellation applications.

Demo : https://youtu.be/J3B9uxmXX2Q

Badge variants help visually distinguish different values in the UI. They can be particularly useful with case statuses, where different states may need different visual representations to help users quickly understand the current state of a case.

Badge configuration

When a field is displayed as a Badge, the Badge variant selection provides two options:

• Constant – applies a fixed badge variant.
• Property reference – determines the badge variant dynamically using another property.

With a property reference, the source property can provide variants such as info, warn, success, or urgent based on application logic.

Example: Configuring the Work Status Field

For this example, we display the Work status field as a Badge.

We use WorkStatusDisplayStyle property as the Badge variant source. This property provides the appropriate variant based on the current Work status.

Mapping the Badge Variants

The WorkStatusDisplayStyle property uses a Declare Expression, sourced by a Decision Table, to determine the variant based on the current case status. The returned variant displays the Work status badge in the corresponding color.

Pending-AdditionalInfo → warn → Orange

Target-Approved → success → Green

Target-Rejected → urgent → Red

Any other status → info → Grey

Custom badge variant mapping offers greater flexibility in how values are visually represented in Constellation. With Pega Infinity ’26, this can be configured OOTB without the need for a custom DX component, making it easier to create clear and meaningful visual experiences.

[MarcCheong]

@Anandhuc17408577 thanks for sharing. I have added it to our constellation 101 series!

Enjoyed this article?

See suggested articles from our Constellation 101 series and view all our Knowledge Shares from our User Experience Expert Circle.

[Anandhuc17408577 (Anandhu chandran)]

Thank @MarcCheong I’m glad you found it informative!

[RaghuveerReddyB (Raghuveer Reddy Bathini)]

The read-only configuration (to select Badge) for a TextInput field is working only while authoring in the Partial view. Does it only applicable to partial views and not for form views?