Issue

After updating from Pega Infinity™ ‘23.1 to '24.1.1 fields which used to display ‘--’ (dashes) for null values now display blank content. 

Symptoms and Impact

After updating from Pega Infinity ‘23.1 to '24.1.1, blank text fields display without the '--' placeholder dashes which were displayed in the earlier releases. 

Steps to reproduce

1. Create a Grid with Text fields which contain empty values. 

• When viewed in Pega Infinity ‘23.1 these display with double dashes (--) 
• When viewed in Pega Infinity ‘24.1.1 these display with no values. 

Root Cause

The removal of double dashes for empty text fields is an intentional accessibility enhancement introduced to improve compatibility with screen readers. 

Solution

This issue will be fixed in upcoming releases where users will be able to make use of a new helper text to optionally chose if the '--' (dashes) are needed in place of empty values.

To restore the previous behavior where blank values display as '--' in the UI, a local CSS override is recommended. 

This CSS targets empty span and paragraph elements within content containers and applies the '--' character using the CSS content property. This approach restores the visual cue for blank fields without modifying core product code. 

Users should apply the CSS fix in their skin configuration to maintain consistent UI behavior post-update  

1. Create a new CSS file in your application. 

2. Add the following CSS code to the file: 

.content-inner > .field-item > span:empty::after, 
.content-inner > .field-item > p:empty::after, 
.content-inner > .field-item > span > span:empty::after,  
.flex.content-item > .field-item > span:empty::after, 
.flex.content-item > .field-item > p:empty::after, 
.content-inner > .field-item > span > span[data-ctl="Text"]:empty:after,  
.flex.content-item > .field-item > span:empty:after,  
.flex.content-item > .field-item > span > span[data-ctl="Text"]:empty:after,  
.flex.content-item.content-field.dataValueRead > span:empty:after, 
.flex.content-item.content-field.dataValueRead > p:empty:after, 
.flex.content-item.content-field.dataValueRead > span > span[data-ctl="Text"]:empty:after, 
.dataValueRead.gridCell span:empty:after,  
table.gridTable .gridCell div.oflowDivM > span:empty:after { 
    content: '\2013\2013'!important; 
    color: rgba(0,0,0,0.6)!important; 
    line-height:inherit!important; 
} 

3. Include this CSS file in your application skin to apply the styling across your UI. 

Note: Once the skin updates are implemented in the core product, users are advised to remove their skin configuration. 

References

 Attaching a CSS to the skin