Skip to content

Pending Review

Pending Review from User Experience (UX)

Data View Component

Overview

The PWC Data View is a smart rendering component in the Progress Web Components design system. It automatically handles data display states including loading skeletons, error messages, and dynamic content rendering based on data context across React and Angular applications.

Core Capabilities

  • Smart State Management - Automatically switches between loading, error, and content states based on data context
  • Loading Skeletons - Configurable skeleton placeholders during data loading operations
  • Error Display - User-friendly error messages with customizable headings and descriptions
  • Dynamic Content Rendering - Flexible content rendering based on received data payloads
  • Context Integration - Seamless integration with data context for reactive state updates
  • Responsive Design - Adaptive skeleton sizing and content layout for different screen sizes

When to use Data View:

  • Display content that depends on async data loading with loading states
  • Show dynamic content that changes based on data context updates
  • Provide consistent loading and error state handling across components
  • Render content conditionally based on data availability and loading states

When not to use Data View:

  • Static content that doesn't require data loading or state management
  • Simple components with fixed content that never changes
  • Components that handle their own loading and error states independently

Basic Implementation

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

function MyComponent() {
  const handleSetContent = (event) => {
    const { data, setter } = event.detail;

    setter({
      type: "body",
      content: `Found ${data.users?.length || 0} users`,
      weight: "bold"
    });
  };

  return (
      <PwcDataContext>
        <PwcDataView 
          skeletonSize="m"
          skeletonMaxWidth="200px"
          onGetSetter={handleSetContent}
        />
      </PwcDataContext>
  );
}

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

function MyComponent() {
  const handleSetter = useCallback((event: CustomEvent) => {
    const { data, setter } = event.detail;
    setter({
      type: 'body',
      content: `Users: ${data.users?.length || 0}`,
      color: 'primary'
    });
  }, []);

  return (
      <pwc-data-context>
        <pwc-data-view 
          skeletonSize="m"
          skeletonMaxWidth="200px"
          onPwcGetSetter={handleSetter}
        ></pwc-data-view>
      </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/data-view';
import '@progress-i360/progress-web-components/button';

@Component({
  selector: 'data-view-demo',
  template: `
    <pwc-data-context>
      <pwc-data-view [skeletonSize]="'m'" (pwc-get-setter)="handleContentSetter($event)">
      </pwc-data-view>
    </pwc-data-context>
    <pwc-button label="Refresh View" (pwc-click)="refreshView()"></pwc-button>
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class DataViewDemo {
  totalRecords = 42;

  handleContentSetter(event: Event) {
    const { setter } = (event as CustomEvent).detail;
    setter({
      type: "body",
      content: `Total Records: ${this.totalRecords}`,
      weight: "semibold"
    });
  }

  refreshView() {
    this.totalRecords = Math.floor(Math.random() * 100) + 1;
  }
}

// Create data view element
const dataView = document.createElement('pwc-data-view');
dataView.skeletonSize = 'm';

// Handle content setting event
function handleContentSetter(event) {
  const { data, setter } = event.detail;
  setter({ type: 'body', content: `Records: ${data.count}` });
}

// Set up event listener and content rendering
dataView.addEventListener('pwc-get-setter', handleContentSetter);
document.body.appendChild(dataView);

Usage Patterns

Data view adapts to different content rendering scenarios:

  • Loading States - Display skeleton placeholders while data is being fetched from APIs
  • Dynamic Content - Render content that changes based on data context updates and user interactions
  • Error Handling - Show user-friendly error messages when data loading fails or encounters issues
  • Conditional Rendering - Display different content based on data availability and application state

Best Practices

Content Strategy Guidelines

  • Meaningful Placeholders - Configure skeleton dimensions that match expected content layout
  • Clear Error Messages - Provide specific, actionable error information for users
  • Consistent Loading States - Use standard skeleton sizes across similar components
  • Content Fallbacks - Always handle cases where data might be empty or unavailable

Performance Optimization

  • Efficient Re-renders - Update content only when data actually changes to minimize performance impact
  • Skeleton Optimization - Use appropriate skeleton sizes to avoid layout shifts during loading
  • Memory Management - Clean up event listeners and content references properly
  • Lazy Content Creation - Generate content objects only when data is available and ready

Integration Architecture

  • Context Dependency - Ensure proper data context setup for reactive state management
  • Event Coordination - Use consistent event patterns for content setting and data updates
  • State Synchronization - Coordinate view states with parent component lifecycle and data flows
  • Error Boundaries - Implement proper error handling to prevent component tree crashes

Common Use Cases

Dynamic Status Indicators

  • Display loading states for status checks and system health monitoring
  • Show real-time status updates with appropriate visual indicators
  • Handle connection errors and retry mechanisms gracefully

Data Summary Displays

  • Render summary statistics and metrics based on loaded data sets
  • Show loading placeholders for calculation-intensive operations
  • Display formatted numbers, percentages, and data aggregations

Content Preview Components

  • Load and display content previews with skeleton loading states
  • Handle content rendering errors with fallback displays
  • Show dynamic content based on user selections and filters

Troubleshooting

Common Issues

Content Not Rendering

Problem: Data view shows loading state but never displays content
Solution:

  • Verify that setter function is called correctly and content object has proper structure

Skeleton Layout Issues

Problem: Loading skeletons don't match actual content dimensions
Solution:

  • Adjust skeleton min/max width properties to match expected content size

Error State Persistence

Problem: Error state remains visible after data loads successfully
Solution:

  • Check data context error handling and ensure errors are cleared on successful data loads

Context Integration Problems

Problem: Data view doesn't respond to data context changes
Solution:

  • Verify data context is properly configured and data view is nested within context component

Implementation Support

For detailed implementation guidance:

  • API Documentation - Complete interface definitions and event specifications in Storybook
  • Interactive Examples - Live component demos with various data scenarios and loading states
  • Integration Patterns - Best practices for combining with data context and other 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.