Skip to content

Pending Review

Pending Review from User Experience (UX)

Display Field Component

Overview

The PWC Display Field component provides a read-only label-value pair display for presenting information in forms and data views. Built as a lightweight utility function, it creates consistent formatting for static data presentation with proper typography hierarchy and spacing.

Core Capabilities

  • Label-Value Pairing - Structured display of related label and value content with consistent formatting

  • Typography Integration - Uses design system Body component for consistent text styling and hierarchy

  • Flexible Layout - Responsive row layout with proper alignment and spacing using Flex layout system

  • Color Hierarchy - Semi-bold subtle color labels with standard body text values for clear information hierarchy

  • Responsive Design - Adapts to container width while maintaining readability and visual structure

  • Lightweight Implementation - Pure function component with minimal overhead for efficient rendering

When to use Display Field:

  • Read-only data presentation in forms, profiles, and detailed information views

  • Summary sections displaying calculated values, totals, and derived information

  • Configuration displays showing current settings and system information

  • Data previews and confirmation screens before form submission or data processing

When not to use Display Field:

  • Editable form fields where users need to input or modify data - use appropriate input components

  • Complex data structures requiring nested or hierarchical display patterns

  • Interactive elements that need click handlers or user interaction capabilities

Basic Implementation

import React from 'react';
import { PwcDisplayField } from "@progress-i360/pwc-react";

function MyComponent() {
  const userInfo = {
    name: 'John Smith',
    email: 'john.smith@company.com',
    department: 'Engineering'
  };

  return (
    <>
      <PwcDisplayField
        label="Full Name"
        value={userInfo.name}
      />

      <PwcDisplayField
        label="Email"
        value={userInfo.email}
      />

      <PwcDisplayField
        label="Department"
        value={userInfo.department}
      />
    </>
  );
}

import { useEffect, useRef } from 'react';
import '@progress-i360/progress-web-components/display-field';
import '@progress-i360/progress-web-components/flex';

type DisplayFieldElement = HTMLElement & { label?: string; value?: string };

function OrderSummary() {
  const orderIdRef = useRef<DisplayFieldElement | null>(null);
  const totalRef = useRef<DisplayFieldElement | null>(null);
  const statusRef = useRef<DisplayFieldElement | null>(null);

  useEffect(() => {
    if (orderIdRef.current) {
      orderIdRef.current.label = 'Order ID';
      orderIdRef.current.value = 'ORD-2024-001';
    }
    if (totalRef.current) {
      totalRef.current.label = 'Total Amount';
      totalRef.current.value = '$299.99';
    }
    if (statusRef.current) {
      statusRef.current.label = 'Status';
      statusRef.current.value = 'Shipped';
    }
  }, []);

  return (
    <pwc-flex direction="column" gap="s">
      <pwc-display-field ref={orderIdRef}></pwc-display-field>
      <pwc-display-field ref={totalRef}></pwc-display-field>
      <pwc-display-field ref={statusRef}></pwc-display-field>
    </pwc-flex>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/body";
import "@progress-i360/progress-web-components/button";
import "@progress-i360/progress-web-components/display-field";
import "@progress-i360/progress-web-components/flex";
import "@progress-i360/progress-web-components/heading";

@Component({
  selector: 'display-field-demo',
  template: `
    <pwc-flex direction="column" gap="m" padding="m">
      <pwc-heading content="User Profile Information" size="l"></pwc-heading>
      <pwc-flex direction="column" gap="s">
        <pwc-display-field label="Name" [value]="userName"></pwc-display-field>
        <pwc-display-field label="Email" [value]="userEmail"></pwc-display-field>
        <pwc-display-field label="Status" [value]="userStatus"></pwc-display-field>
        <pwc-display-field label="Last Login" [value]="lastLogin"></pwc-display-field>
      </pwc-flex>
      <pwc-flex gap="s">
        <pwc-button label="Update Profile" variant="primary" (pwc-click)="updateProfile()"></pwc-button>
        <pwc-button label="Change Status" variant="outline" (pwc-click)="toggleStatus()"></pwc-button>
      </pwc-flex>
      <pwc-body [content]="'Updates: ' + updateCount" color="subtle" size="xs"></pwc-body>
    </pwc-flex>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class DisplayFieldDemo {
  userName = 'John Smith';
  userEmail = 'john.smith@company.com';
  userStatus = 'Active';
  lastLogin = 'Today at 2:30 PM';
  updateCount = 0;

  statuses = ['Active', 'Away', 'Busy', 'Offline'];

  updateProfile() {
    this.updateCount++;
    this.userName = `John Smith (Updated ${this.updateCount})`;
    this.lastLogin = 'Just now';
  }

  toggleStatus() {
    const currentIndex = this.statuses.indexOf(this.userStatus);
    this.userStatus = this.statuses[(currentIndex + 1) % this.statuses.length];
    this.updateCount++;
  }
}

import '@progress-i360/progress-web-components/display-field';
import '@progress-i360/progress-web-components/flex';

const container = document.createElement('pwc-flex');
container.setAttribute('direction', 'column');
container.setAttribute('gap', 's');

const nameField = document.createElement('pwc-display-field');
nameField.setAttribute('label', 'Name');
nameField.value = 'John Smith';

const emailField = document.createElement('pwc-display-field');
emailField.setAttribute('label', 'Email');
emailField.value = 'john@example.com';

container.append(nameField, emailField);
document.body.appendChild(container);

Usage Patterns

  • Data Summaries - Display calculated totals, averages, and derived values in dashboard widgets and report sections

  • Profile Information - Show user details, account information, and system settings in read-only format

  • Configuration Display - Present current application settings, preferences, and system configuration values

  • Confirmation Views - Display selected options and entered data before form submission or processing

Best Practices

Content Strategy Guidelines

  • Clear Labels - Use descriptive, concise labels that clearly identify the type of information being displayed

  • Consistent Formatting - Apply consistent value formatting for dates, numbers, currency, and other data types

  • Logical Grouping - Group related display fields together and use consistent ordering patterns

  • Appropriate Length - Keep labels concise while maintaining clarity and avoid overly long value text

Performance Optimization

  • Efficient Rendering - Use display fields for static content that doesn't require complex component lifecycle management

  • Data Memoization - Cache formatted values and labels to prevent unnecessary re-computations

  • Conditional Display - Only render display fields when both label and value data are available

  • Layout Optimization - Group multiple display fields in containers to optimize layout calculations

Integration Architecture

  • Typography Consistency - Leverage design system Body component for consistent text styling across applications

  • Layout Integration - Use Flex layout system for consistent spacing and alignment with other form components

  • Data Binding - Implement efficient data binding patterns for dynamic content updates

  • Responsive Design - Ensure display fields adapt appropriately to different screen sizes and container widths

Common Use Cases

User Profiles

  • Personal information display including name, email, phone number, and address details

  • Account settings and preferences showing current configuration and subscription information

  • Activity summaries displaying usage statistics, last login times, and account status

Order Management

  • Order details presentation with order numbers, dates, amounts, and shipping information

  • Product information display showing SKUs, descriptions, prices, and availability status

  • Transaction summaries with payment methods, processing dates, and confirmation numbers

System Information

  • Application configuration display showing versions, build numbers, and deployment information

  • Server status information including uptime, resource usage, and performance metrics

  • Integration settings displaying API endpoints, connection status, and configuration parameters

Troubleshooting

Common Issues

Actions Not Triggering

Symptoms: Display fields don't update when underlying data changes

Solutions:

  • Verify data binding is properly configured for reactive updates

  • Check that parent component re-renders when data properties change

  • Ensure display field render function receives updated props

Actions Not Visible

Symptoms: Display fields don't appear or render with empty content

Solutions:

  • Confirm both label and value properties are provided and not undefined

  • Check CSS display properties and container styling affecting visibility

  • Verify import statements and component registration are correct

Layout Issues

Symptoms: Display fields appear misaligned or with incorrect spacing

Solutions:

  • Check parent container flex properties and alignment settings

  • Ensure consistent gap and padding values across multiple display fields

  • Verify responsive design breakpoints don't conflict with field layouts

Icon Problems

Symptoms: Typography or styling doesn't match design system standards

Solutions:

  • Confirm Body component is properly imported and design tokens are loaded

  • Check color token values for subtle and base text colors

  • Verify font weights and sizes are applied correctly through typography system

Implementation Support

  • Data Formatting - Pattern guidance for consistent value formatting including dates, numbers, and currency

  • Layout Architecture - Best practices for grouping and organizing display fields in complex interfaces

  • Integration Patterns - Strategies for combining display fields with editable form components

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.