PEGA Constellation UI Framework

Constellation UI Architecture Overview

PEGA Constellation UI represents a modern, component-based approach to building user interfaces in PEGA applications. It leverages web standards, modern JavaScript frameworks, and responsive design principles to deliver superior user experiences.

Key architectural components include: Component Library with reusable UI elements, Design System for consistent visual language, Theme Engine for customizable styling, Accessibility Framework for inclusive design, and Performance Optimization features for fast loading and smooth interactions.

Building Custom Components

Custom components in Constellation UI are built using modern web technologies including React, Web Components, and TypeScript. Components follow a declarative approach with clear separation of concerns between presentation, logic, and data.

// Custom Constellation Component Example
import React, { useState, useEffect } from 'react';
import { ComponentProps, PegaComponent } from '@pega/constellation-ui';

interface CustomerCardProps extends ComponentProps {
  customerId: string;
  displayMode: 'summary' | 'detailed';
  onCustomerSelect?: (customerId: string) => void;
}

const CustomerCard: PegaComponent = ({
  customerId,
  displayMode = 'summary',
  onCustomerSelect,
  ...props
}) => {
  const [customerData, setCustomerData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchCustomerData = async () => {
      try {
        setIsLoading(true);
        const response = await fetch(`/api/customers/${customerId}`);
        if (!response.ok) {
          throw new Error('Failed to fetch customer data');
        }
        const data = await response.json();
        setCustomerData(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    if (customerId) {
      fetchCustomerData();
    }
  }, [customerId]);

  const handleCardClick = () => {
    if (onCustomerSelect) {
      onCustomerSelect(customerId);
    }
  };

  if (isLoading) {
    return (
      

        

      
    );
  }

  if (error) {
    return (
      

        
{error}
      
    );
  }

  return (
    
 e.key === 'Enter' && handleCardClick()}
      aria-label={`Customer: ${customerData?.name}`}
      {...props}
    >
      

        
      
      
      

        
{customerData?.name}
        
{customerData?.email}
        
        {displayMode === 'detailed' && (
          <>
            

              
                {customerData?.status}
              
            
            
            

              

                Cases:
                {customerData?.caseCount || 0}
              
              

                Last Activity:
                {customerData?.lastActivity}
              
            
          
        )}
      
      
      

        
          
        
      

    

  );
};

// Component registration
CustomerCard.displayName = 'CustomerCard';
CustomerCard.defaultProps = {
  displayMode: 'summary'
};

export default CustomerCard;

Responsive Design and Accessibility

Constellation UI implements responsive design using CSS Grid, Flexbox, and container queries. The framework provides built-in breakpoints, fluid typography, and adaptive components that work seamlessly across all device sizes.

/* Responsive Design with Constellation UI */
.customer-card {
  /* Base mobile-first styles */
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 1rem;
  padding: 1rem;
  background: var(--constellation-surface-primary);
  border-radius: var(--constellation-border-radius-medium);
  box-shadow: var(--constellation-shadow-card);
  transition: all 0.2s ease-in-out;
  
  /* Accessibility */
  outline-offset: 2px;
  
  /* Focus states */
  &:focus-visible {
    outline: 2px solid var(--constellation-focus-color);
    outline-offset: 2px;
  }
  
  /* Hover states */
  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--constellation-shadow-card-elevated);
  }
  
  /* Loading state */
  &.loading {
    pointer-events: none;
    opacity: 0.7;
  }
  
  /* Error state */
  &.error {
    border-left: 4px solid var(--constellation-color-error);
  }
}

.customer-avatar {
  img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
  }
}

.customer-info {
  min-width: 0; /* Prevent flex item overflow */
  
  .customer-name {
    font-size: var(--constellation-font-size-heading-small);
    font-weight: var(--constellation-font-weight-semibold);
    margin: 0 0 0.25rem 0;
    
    /* Text truncation */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .customer-email {
    color: var(--constellation-color-text-secondary);
    font-size: var(--constellation-font-size-body-small);
    margin: 0;
  }
}

/* Tablet and larger screens */
@media (min-width: 768px) {
  .customer-card {
    grid-template-columns: 80px 1fr auto;
    padding: 1.5rem;
    
    &.detailed {
      grid-template-columns: 80px 2fr 1fr auto;
    }
  }
  
  .customer-metrics {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    
    .metric {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .label {
        font-size: var(--constellation-font-size-caption);
        color: var(--constellation-color-text-secondary);
        margin-bottom: 0.25rem;
      }
      
      .value {
        font-weight: var(--constellation-font-weight-semibold);
        color: var(--constellation-color-text-primary);
      }
    }
  }
}

/* Desktop and larger screens */
@media (min-width: 1200px) {
  .customer-card {
    &.detailed {
      grid-template-columns: 100px 2fr 1fr 1fr auto;
    }
  }
}

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .customer-card {
    transition: none;
    
    &:hover {
      transform: none;
    }
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .customer-card {
    border: 1px solid;
    
    &:focus-visible {
      outline-width: 3px;
    }
  }
}

/* Print styles */
@media print {
  .customer-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
  
  .customer-actions {
    display: none;
  }
}

Theming and Branding

Constellation UI's theming system uses CSS custom properties and design tokens to enable comprehensive customization. Themes can be applied at runtime, supporting multiple brand variations and dark/light mode switching.

/* Custom Theme Configuration */
:root {
  /* Brand Colors */
  --constellation-brand-primary: #1f4e79;
  --constellation-brand-secondary: #2d89ef;
  --constellation-brand-accent: #ff8c00;
  
  /* Semantic Color System */
  --constellation-color-primary: var(--constellation-brand-primary);
  --constellation-color-primary-hover: #2a5a87;
  --constellation-color-primary-active: #1a4269;
  --constellation-color-primary-disabled: #8ba5c1;
  
  --constellation-color-secondary: var(--constellation-brand-secondary);
  --constellation-color-accent: var(--constellation-brand-accent);
  
  /* Status Colors */
  --constellation-color-success: #107c10;
  --constellation-color-warning: #ff8c00;
  --constellation-color-error: #d13438;
  --constellation-color-info: #0078d4;
  
  /* Surface Colors */
  --constellation-surface-primary: #ffffff;
  --constellation-surface-secondary: #faf9f8;
  --constellation-surface-tertiary: #f3f2f1;
  --constellation-surface-elevated: #ffffff;
  
  /* Text Colors */
  --constellation-color-text-primary: #323130;
  --constellation-color-text-secondary: #605e5c;
  --constellation-color-text-tertiary: #8a8886;
  --constellation-color-text-disabled: #a19f9d;
  --constellation-color-text-on-primary: #ffffff;
  
  /* Typography Scale */
  --constellation-font-size-caption: 0.75rem;
  --constellation-font-size-body-small: 0.875rem;
  --constellation-font-size-body: 1rem;
  --constellation-font-size-body-large: 1.125rem;
  --constellation-font-size-heading-small: 1.25rem;
  --constellation-font-size-heading-medium: 1.5rem;
  --constellation-font-size-heading-large: 2rem;
  
  /* Font Weights */
  --constellation-font-weight-normal: 400;
  --constellation-font-weight-medium: 500;
  --constellation-font-weight-semibold: 600;
  --constellation-font-weight-bold: 700;
  
  /* Spacing Scale */
  --constellation-spacing-xs: 0.25rem;
  --constellation-spacing-sm: 0.5rem;
  --constellation-spacing-md: 1rem;
  --constellation-spacing-lg: 1.5rem;
  --constellation-spacing-xl: 2rem;
  --constellation-spacing-xxl: 3rem;
  
  /* Border Radius */
  --constellation-border-radius-small: 4px;
  --constellation-border-radius-medium: 8px;
  --constellation-border-radius-large: 12px;
  --constellation-border-radius-full: 50%;
  
  /* Shadows */
  --constellation-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.1);
  --constellation-shadow-card-elevated: 0 4px 8px rgba(0, 0, 0, 0.15);
  --constellation-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.2);
  
  /* Focus */
  --constellation-focus-color: #0078d4;
  --constellation-focus-width: 2px;
}

/* Dark Theme */
[data-theme="dark"] {
  /* Dark mode color overrides */
  --constellation-surface-primary: #1f1f1f;
  --constellation-surface-secondary: #2d2d2d;
  --constellation-surface-tertiary: #3d3d3d;
  --constellation-surface-elevated: #2d2d2d;
  
  --constellation-color-text-primary: #ffffff;
  --constellation-color-text-secondary: #e1dfdd;
  --constellation-color-text-tertiary: #c8c6c4;
  --constellation-color-text-disabled: #a19f9d;
  
  --constellation-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.3);
  --constellation-shadow-card-elevated: 0 4px 8px rgba(0, 0, 0, 0.4);
  --constellation-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* High Contrast Theme */
[data-theme="high-contrast"] {
  --constellation-color-primary: #000000;
  --constellation-color-text-primary: #000000;
  --constellation-color-text-secondary: #000000;
  --constellation-surface-primary: #ffffff;
  --constellation-border-width: 2px;
}

/* Brand-specific theme variations */
.theme-healthcare {
  --constellation-brand-primary: #0078d4;
  --constellation-brand-secondary: #40e0d0;
  --constellation-brand-accent: #00bcf2;
}

.theme-finance {
  --constellation-brand-primary: #004578;
  --constellation-brand-secondary: #0078d4;
  --constellation-brand-accent: #ffd700;
}

.theme-retail {
  --constellation-brand-primary: #e74c3c;
  --constellation-brand-secondary: #f39c12;
  --constellation-brand-accent: #2ecc71;
}

Performance Optimization

Constellation UI implements various performance optimization techniques including code splitting, lazy loading, virtual scrolling for large lists, and efficient re-rendering strategies. These optimizations ensure fast load times and smooth user interactions.

Key optimization strategies include: Bundle splitting for smaller initial downloads, Component lazy loading for better perceived performance, Virtual scrolling for handling large datasets, Memoization for expensive calculations, and Progressive loading for enhanced user experience.

Integration with Modern Frameworks

Constellation UI provides seamless integration with modern JavaScript frameworks and libraries including React, Angular, Vue.js, and vanilla JavaScript. This flexibility allows teams to choose the best tools for their specific requirements.

Integration patterns include: Framework-specific wrapper components, Custom hooks for state management, Event handling adapters, and Build tool configurations for optimal bundling and deployment.