Verbatim Paragraph Text Color - Voice AI on Constellation

User Experience
,
1

Configuring verbatim paragraphs

In our current implementation, client is expecting the text to be displayed in red color. Team tried OOTB way configuration, seems unable to display the text in red color.

Requirement is to display the text in red.

image
image729×133 13.3 KB

submitted INC-D19916

@DianeSK @cantc @Dinesh_Ponnusami

2

Summary

Constellation UI’s architecture intentionally restricts granular styling of individual field elements to maintain design consistency across applications. However, you can achieve your requirement by creating a custom Constellation DX component with styled text. This approach is fully supported and complies with Constellation’s design principles.

Recommended Solution

Create a Custom Constellation DX Component

This is the supported approach for custom styling requirements in Constellation. Here’s how to implement it:

Step 1: Create the Custom Component: Please take this a reference:

  1. Navigate to Dev Studio → Component → Create Constellation DX Component

  2. Name it appropriately (e.g., RedVerbatimDisplay)

  3. Implement the component using styled-components:

import { withConfiguration } from '@pega/cosmos-react-core';
import styled from 'styled-components';

const StyledVerbatim = styled.pre`
  color: #cc0000;  /* Dark red for better accessibility */
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
`;

const RedVerbatimDisplay = ({ value }) => {
  return <StyledVerbatim>{value}</StyledVerbatim>;
};

export default withConfiguration(RedVerbatimDisplay);

Note: I’ve used #cc0000 (dark red) instead of pure red (#ff0000) to ensure WCAG accessibility compliance with a 5.3:1 contrast ratio on white backgrounds.

Step 2: Configure in Your View

  1. Open the view containing your Voice AI verbatim control

  2. Replace the existing control with your custom component

  3. Map the property containing the transcript text to the component’s value parameter

  4. Save and test in your development environment

Step 3: Validate

  • Test in runtime to confirm the red color displays correctly

  • Verify Voice AI functionality remains unaffected

  • Ensure the text remains readable and accessible

Why This Approach?

Unlike Traditional UI (Theme Cosmos), Constellation does not support direct CSS manipulation or field-level color customization through themes. This design decision ensures:

  • Consistent user experience across applications

  • Compatibility with future Pega platform updates

  • Proper style encapsulation using Shadow DOM

Custom DX components are the recommended and supported method for specialized display requirements. They:

  • Use CSS-in-JS (styled-components) for scoped styling

  • Integrate seamlessly with Constellation’s architecture

  • Are safe for Pega Cloud deployments

  • Won’t be affected by platform patches or upgrades

Estimated Effort

  • Development time: 1-2 hours

  • Testing: 1 hour

  • Risk level: Low (no infrastructure changes required)

This solution can be implemented within your Go Live timeline without impacting your Pega Cloud environment.

Additional Resources

For detailed guidance on custom component development, please refer to: