Pending Review

Pending Review from User Experience (UX)

Data Context Component

Overview

The PWC Data Context is a foundational state management component in the Progress Web Components design system. It provides centralized data handling, loading states, and error management for child components across React and Angular applications.

Core Capabilities

Centralized State Management - Unified data context for child components with shared state access
Loading State Management - Built-in loading indicators and state transitions for async operations
Error Handling - Comprehensive error management with user-friendly error displays
Data Mutation Support - Setter functions for updating context data from child components
Event-Driven Architecture - Custom events for data loading and state updates
Type Safety - Full TypeScript support with strongly typed data payloads and context

When to use Data Context:

Manage shared state across multiple child components
Handle async data loading with loading states and error handling
Provide centralized data access for complex component hierarchies
Coordinate data mutations between sibling components

When not to use Data Context:

Simple components with local state only
Static content that doesn't require dynamic data updates
Components that already have dedicated state management solutions

Basic Implementation

React 18React 19+AngularPure JavaScript

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

function MyComponent() {
  const handleLoadData = (event) => {
    const { success, failure } = event.detail;

    fetch('/api/users')
      .then(response => response.json())
      .then(data => success(data))
      .catch(error => failure({
        heading: 'Data Load Error',
        message: 'Unable to load user data'
      }));
  };

  return (
      <PwcDataContext onLoad={handleLoadData}>
        <UserTable />
        <UserStats />
      </PwcDataContext>
  );
}

import { useCallback } from 'react';
import '@progress-i360/progress-web-components/data-context';

function MyComponent() {
  const handleLoad = useCallback((event: CustomEvent) => {
    const { success, failure } = event.detail;

    fetch('/api/users')
      .then(response => response.json())
      .then(data => success(data))
      .catch(() => failure({
        message: 'Unable to load user data'
      }));
  }, []);

  return (
      <pwc-data-context 
        onPwcLoad={handleLoad}
      >
        <UserTable />
        <UserStats />
      </pwc-data-context>
  );
}

// component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/data-context";
import "@progress-i360/progress-web-components/body";

@Component({
  selector: 'data-context-demo',
  template: `
    <pwc-data-context (pwc-load)="loadData($event)">
      <pwc-body [content]="message"></pwc-body>
    </pwc-data-context>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class DataContextDemo {
  message = "Loading...";

  loadData(event: CustomEvent) {
    setTimeout(() => {
      this.message = "Data loaded successfully";
      event.detail.success({ items: 5 });
    }, 1000);
  }
}

// Create data context element
const dataContext = document.createElement('pwc-data-context');

// Handle data loading event
function handleDataLoad(event) {
  const { success } = event.detail;
  success({ users: 25, status: 'active' });
}

// Set up event listener and data loading
dataContext.addEventListener('pwc-load', handleDataLoad);
document.body.appendChild(dataContext);

Usage Patterns

Data context adapts to different data management scenarios:

Async Loading - Handle API calls with loading states and error management
Shared State - Provide common data access across multiple child components
Data Mutations - Enable child components to update context data through setter functions
Nested Contexts - Support multiple data contexts for complex application hierarchies

Best Practices

Content Strategy Guidelines

Clear Error Messages - Provide helpful, actionable error messages for users
Loading Indicators - Use consistent loading states across all data operations
Data Validation - Validate data payloads before setting context state
Error Recovery - Implement retry mechanisms for failed data operations

Performance Optimization

Efficient Updates - Update context state only when necessary to minimize re-renders
Memory Management - Clean up event listeners and avoid memory leaks
Caching Strategy - Implement appropriate caching for frequently accessed data
Lazy Loading - Load data only when components actually need it

Integration Architecture

Context Isolation - Keep contexts focused on specific data domains
Event Coordination - Use consistent event patterns for data operations
Type Safety - Leverage TypeScript interfaces for data payload validation
Error Boundaries - Implement proper error handling at component boundaries

Common Use Cases

Data Table Management

Provide shared data for table rows and pagination controls
Handle loading states during data fetching operations
Manage error states when API calls fail

Form Data Coordination

Share form data across multiple form sections or steps
Coordinate validation states between related form components
Handle data persistence and retrieval operations

Provide shared metrics data for multiple dashboard widgets
Handle real-time data updates across widget components
Manage loading states for time-sensitive dashboard data

Troubleshooting

Common Issues

Data Not Loading

Problem: Context doesn't trigger data loading events
Solution:

Verify load event listeners are properly attached and context is properly initialized

Context Not Updating

Problem: Child components don't receive updated context data
Solution:

Check that data setters are being called correctly and context state is being updated

Loading State Stuck

Problem: Loading state doesn't clear after data operations
Solution:

Ensure success or failure callbacks are being called properly in async operations

Type Errors

Problem: TypeScript errors with data payload types
Solution: Verify data payload matches expected DataPayload interface structure

Implementation Support

For detailed implementation guidance:

API Documentation - Complete interface definitions and type specifications in Storybook
Interactive Examples - Live component demos with various data scenarios and error states
Integration Guides - Step-by-step implementation examples for different frameworks and use cases

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.