Add ObjectView: Integrated CRUD interface combining ObjectTable and ObjectForm #134

Copilot · 2026-01-21T12:35:07Z

ObjectView Component - Complete CRUD Management Interface

Overview

This PR implements the ObjectView component, a high-level, integrated CRUD management interface that combines ObjectTable and ObjectForm into a single, ready-to-use page component. This addresses the requirement from Issue #133 to create a complete "Object Management View" that reduces the effort needed to build admin interfaces.

What is ObjectView?

ObjectView is a page-level component that provides:

Integrated List & Forms: Combines ObjectTable (list view) with ObjectForm (create/edit) in one component
Multiple Layout Modes: Drawer (default), Modal, or Page navigation
Search & Filters: Built-in search bar and filter panel placeholder
Complete CRUD: Full Create, Read, Update, Delete operations with auto-refresh
Bulk Actions: Multiple row selection and bulk delete
Zero Boilerplate: Just pass a schema and data source - the component handles everything

Screenshots

Main Interface with Table

Create Form in Drawer Mode

Implementation Checklist

Key Features

1. Layout Modes

layout?: 'drawer' | 'modal' | 'page'

Drawer (default): Form slides in from the right side
Modal: Form appears in a centered modal dialog
Page: Navigate to a separate page (requires onNavigate handler)

2. Integrated Toolbar

Search Box: Filter records in real-time
Filters Button: Toggle filter panel (placeholder for FilterBuilder integration)
Refresh Button: Reload table data
Create Button: Open form for creating new records

3. Auto-Generated UI

Table columns generated from ObjectQL schema
Form fields generated from ObjectQL schema
Automatic type mapping (text, email, select, date, etc.)
Permission-aware (respects read/write permissions)

4. State Management

Form open/close state
Current form mode (create/edit/view)
Selected record tracking
Auto-refresh after successful form submission

Usage Example

import { ObjectView } from '@object-ui/plugin-object';

<ObjectView
  schema={{
    type: 'object-view',
    objectName: 'users',
    title: 'User Management',
    layout: 'drawer',
    showSearch: true,
    showFilters: true,
    operations: {
      create: true,
      update: true,
      delete: true,
    },
    table: {
      fields: ['name', 'email', 'status', 'role'],
      selectable: 'multiple',
    },
    form: {
      fields: ['name', 'email', 'status', 'role'],
      layout: 'vertical',
    },
  }}
  dataSource={objectQLDataSource}
/>

Files Changed

Type Definitions:

packages/types/src/objectql.ts - Added ObjectViewSchema interface
packages/types/src/index.ts - Exported ObjectViewSchema

Component Implementation:

packages/plugin-object/src/ObjectView.tsx - Main component (400+ lines)
packages/plugin-object/src/index.ts - Export ObjectView

Tests:

packages/plugin-object/src/__tests__/ObjectView.test.tsx - 14 comprehensive tests

Demo Example:

examples/object-view-demo/* - Complete standalone demo app with mock data

Test Results

✓ src/__tests__/ObjectTable.test.tsx (8 tests)
✓ src/__tests__/ObjectForm.test.tsx (15 tests)
✓ src/__tests__/validation.test.ts (16 tests)
✓ src/__tests__/ObjectView.test.tsx (14 tests)

Test Files  4 passed (4)
Tests      53 passed (53)

Build & Type Check Status

✅ TypeScript Build: All packages compile successfully
✅ Type Checking: No type errors
✅ Lint: No errors (warnings in pre-existing files only)
✅ Tests: All 53 tests passing

Recent Fixes

Fixed TypeScript type errors in ObjectView.tsx:
- Added proper type casting for recordId extraction from selectedRecord
- Fixed type inference for objectLabel by explicitly casting to string
Fixed TypeScript build error in demo app:
- Reordered object spread to ensure proper type inference
- Added type assertion for array push operation

Future Enhancements

Integrate FilterBuilder component for advanced filtering
Add pagination controls
Support for export/import operations
Custom actions and batch operations
Keyboard shortcuts
Mobile-responsive drawer behavior

Breaking Changes

None. This is a new component addition.

Migration Guide

Not applicable - this is a new feature.

Result: ObjectView provides a complete, production-ready CRUD interface with minimal configuration. Developers can now build full admin panels with just a schema definition - no need to manually wire up tables, forms, state management, or refresh logic.

Original prompt

基于 PR #133 的成功合并（实现了元数据驱动的 ObjectTable 和 ObjectForm CRUD 功能），下一个合乎逻辑的步骤是构建一个集成化的“对象管理视图” (Object View Layout)。

这个任务旨在将独立的表格和表单组件组合成一个完整的、开箱即用的页面级组件，通过路由或模态框来管理列表页与详情/编辑页之间的交互。

您可以直接复制以下 Prompt 发给 AI 开始工作：
Context: 我们刚刚完成了 ObjectTable 和 ObjectForm 的核心功能（PR #133），它们现在可以通过 ObjectStack 元数据自动生成 UI 并处理 CRUD 操作。

Goal: 下一步，请开发一个高阶组件 ObjectView，它将 Table 和 Form 组合成一个完整的管理界面。

Requirements:
Layout Structure:

左侧/主区域显示 ObjectTable（列表视图）。

支持两种编辑/创建模式：

Drawer/Modal 模式（默认）：点击行或“新建”按钮时，从侧边滑出 Drawer 或弹出 Modal 显示 ObjectForm。

Page 模式：点击时通过路由跳转到详情页（需定义 URL 模式）。

State Management:

管理列表的刷新（当 Form 提交成功后自动刷新 Table）。

管理选中状态和操作栏的显示。

Search & Filter Integration:

在 Table 上方添加一个搜索栏和过滤器区域。

自动根据元数据生成可筛选的字段（利用我们之前的 FilterNode AST 能力）。
Props Interface:
interface ObjectViewProps {
  objectName: string;
  layout?: 'modal' | 'drawer' | 'page';
  dataSource: ObjectQLDataSource;
  // ...其他配置
}
Deliverable:

实现 ObjectView 组件。

创建一个新的 Example 页面演示这个全功能的管理界面。
这个任务的价值: 它将把零散的“积木”搭建成用户可以直接使用的“房子”，极大降低开发者构建后台管理系统的成本。

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

vercel · 2026-01-21T12:35:12Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
objectui-docs	Error		Jan 21, 2026 2:16pm
objectui-site	Ready	Preview, Comment	Jan 21, 2026 2:16pm

…support Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

github-actions · 2026-01-21T13:08:59Z

📦 Bundle Size Report

Package	Size	Gzipped
components (index.js)	1553.12KB	365.90KB
core (index.js)	0.53KB	0.28KB
data-objectql (ObjectQLDataSource.js)	11.05KB	2.64KB
data-objectql (hooks.js)	5.62KB	1.43KB
data-objectql (index.js)	0.62KB	0.36KB
designer (index.js)	1.46KB	0.51KB
plugin-charts (AdvancedChartImpl-DazADGz5.js)	74.89KB	15.82KB
plugin-charts (BarChart-CRc8MAtI.js)	551.60KB	127.51KB
plugin-charts (ChartImpl-DVw_7KEd.js)	3.17KB	1.10KB
plugin-charts (index-CdgY2AuM.js)	12.39KB	3.83KB
plugin-charts (index.js)	0.21KB	0.16KB
plugin-editor (MonacoImpl-B7ZgZJJG.js)	18.15KB	5.59KB
plugin-editor (index-Dl3HAAqu.js)	10.07KB	3.31KB
plugin-editor (index.js)	0.19KB	0.15KB
plugin-kanban (KanbanImpl-CUWM-JC-.js)	76.50KB	20.46KB
plugin-kanban (index-BV3FWhCb.js)	11.86KB	3.67KB
plugin-kanban (index.js)	0.18KB	0.15KB
plugin-markdown (MarkdownImpl-BRkYjVWf.js)	256.79KB	64.50KB
plugin-markdown (index-D_CdfEXQ.js)	9.59KB	3.16KB
plugin-markdown (index.js)	0.19KB	0.15KB
react (SchemaRenderer.js)	1.44KB	0.73KB
react (index.js)	0.32KB	0.23KB
react (index.test.js)	0.34KB	0.26KB
types (api-types.js)	0.20KB	0.18KB
types (app.js)	0.20KB	0.18KB
types (base.js)	0.20KB	0.18KB
types (complex.js)	0.20KB	0.18KB
types (crud.js)	0.20KB	0.18KB
types (data-display.js)	0.20KB	0.18KB
types (data.js)	0.20KB	0.18KB
types (disclosure.js)	0.20KB	0.18KB
types (feedback.js)	0.20KB	0.18KB
types (form.js)	0.20KB	0.18KB
types (index.js)	0.34KB	0.25KB
types (layout.js)	0.20KB	0.18KB
types (navigation.js)	0.20KB	0.18KB
types (objectql.js)	0.20KB	0.18KB
types (overlay.js)	0.20KB	0.18KB
types (registry.js)	0.20KB	0.18KB

Size Limits

✅ Core packages should be < 50KB gzipped
✅ Component packages should be < 100KB gzipped
⚠️ Plugin packages should be < 150KB gzipped

packages/plugin-object/src/ObjectView.tsx

github-actions · 2026-01-21T13:10:03Z

✅ All checks passed!

✅ Type check passed
✅ Tests passed
✅ Lint check completed

hotlong · 2026-01-21T13:14:05Z

@copilot fix lint

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot · 2026-01-21T13:21:40Z

@copilot fix lint

Fixed in commit 45a478b. The main issue was accessing a ref during render, which violated React rules. Changed to use state-based refresh instead. Also improved type safety in the demo app by replacing any types with proper type annotations.

huangyiirene · 2026-01-21T13:41:14Z

@copilot fix build and type check workflow

hotlong · 2026-01-21T14:07:17Z

@copilot 继续

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot · 2026-01-21T14:15:40Z

@copilot 继续

Fixed TypeScript build and type check issues in commit 4718255. The build now passes successfully:

Changes made:

Fixed type casting for recordId extraction in ObjectView
Fixed objectLabel type inference by casting to string
Fixed demo app type error by reordering object spread and adding type assertion

Status:
✅ All packages build successfully
✅ All 53 tests passing
✅ No TypeScript errors
✅ Lint passes (0 errors)

github-actions · 2026-01-21T15:06:03Z

📦 Bundle Size Report

Package	Size	Gzipped
components (index.js)	1553.12KB	365.90KB
core (index.js)	0.53KB	0.28KB
data-objectql (ObjectQLDataSource.js)	11.05KB	2.64KB
data-objectql (hooks.js)	5.62KB	1.43KB
data-objectql (index.js)	0.62KB	0.36KB
designer (index.js)	1.46KB	0.51KB
plugin-charts (AdvancedChartImpl-DazADGz5.js)	74.89KB	15.82KB
plugin-charts (BarChart-CRc8MAtI.js)	551.60KB	127.51KB
plugin-charts (ChartImpl-DVw_7KEd.js)	3.17KB	1.10KB
plugin-charts (index-CdgY2AuM.js)	12.39KB	3.83KB
plugin-charts (index.js)	0.21KB	0.16KB
plugin-editor (MonacoImpl-B7ZgZJJG.js)	18.15KB	5.59KB
plugin-editor (index-Dl3HAAqu.js)	10.07KB	3.31KB
plugin-editor (index.js)	0.19KB	0.15KB
plugin-kanban (KanbanImpl-CUWM-JC-.js)	76.50KB	20.46KB
plugin-kanban (index-BV3FWhCb.js)	11.86KB	3.67KB
plugin-kanban (index.js)	0.18KB	0.15KB
plugin-markdown (MarkdownImpl-BRkYjVWf.js)	256.79KB	64.50KB
plugin-markdown (index-D_CdfEXQ.js)	9.59KB	3.16KB
plugin-markdown (index.js)	0.19KB	0.15KB
react (SchemaRenderer.js)	1.44KB	0.73KB
react (index.js)	0.32KB	0.23KB
react (index.test.js)	0.34KB	0.26KB
types (api-types.js)	0.20KB	0.18KB
types (app.js)	0.20KB	0.18KB
types (base.js)	0.20KB	0.18KB
types (complex.js)	0.20KB	0.18KB
types (crud.js)	0.20KB	0.18KB
types (data-display.js)	0.20KB	0.18KB
types (data.js)	0.20KB	0.18KB
types (disclosure.js)	0.20KB	0.18KB
types (feedback.js)	0.20KB	0.18KB
types (form.js)	0.20KB	0.18KB
types (index.js)	0.34KB	0.25KB
types (layout.js)	0.20KB	0.18KB
types (navigation.js)	0.20KB	0.18KB
types (objectql.js)	0.20KB	0.18KB
types (overlay.js)	0.20KB	0.18KB
types (registry.js)	0.20KB	0.18KB

Size Limits

✅ Core packages should be < 50KB gzipped
✅ Component packages should be < 100KB gzipped
⚠️ Plugin packages should be < 150KB gzipped

github-actions · 2026-01-21T15:07:15Z

✅ All checks passed!

✅ Type check passed
✅ Tests passed
✅ Lint check completed

Initial plan

aaec37a

Copilot AI assigned Copilot and hotlong Jan 21, 2026

vercel bot had a problem deploying to Preview – objectui-docs January 21, 2026 12:35 Failure

Copilot started work on behalf of hotlong January 21, 2026 12:35 View session

Add ObjectView component with drawer/modal layouts and search/filter …

fdf62f5

…support Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel bot had a problem deploying to Preview – objectui-docs January 21, 2026 12:45 Failure

vercel bot deployed to Preview – objectui-site January 21, 2026 12:46 View deployment

Add ObjectView demo example app with mock data source

dcfc235

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel bot had a problem deploying to Preview – objectui-docs January 21, 2026 12:49 Failure

vercel bot had a problem deploying to Preview – objectui-site January 21, 2026 12:49 Failure

Complete ObjectView implementation with all features and tests

3b3dba7

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel bot had a problem deploying to Preview – objectui-docs January 21, 2026 12:54 Failure

vercel bot deployed to Preview – objectui-site January 21, 2026 12:55 View deployment

hotlong approved these changes Jan 21, 2026

View reviewed changes

Copilot AI changed the title ~~[WIP] Add integrated object management view layout~~ Add ObjectView: Integrated CRUD interface combining ObjectTable and ObjectForm Jan 21, 2026

Copilot AI requested a review from hotlong January 21, 2026 13:00

Copilot finished work on behalf of hotlong January 21, 2026 13:00

github-actions bot added dependencies package: types plugin examples tests labels Jan 21, 2026

github-advanced-security bot found potential problems Jan 21, 2026

View reviewed changes

packages/plugin-object/src/ObjectView.tsx Fixed Show fixed Hide fixed

Copilot started work on behalf of hotlong January 21, 2026 13:14 View session

Fix lint errors: remove ref access during render and improve type safety

45a478b

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel bot had a problem deploying to Preview – objectui-docs January 21, 2026 13:21 Failure

vercel bot deployed to Preview – objectui-site January 21, 2026 13:22 View deployment

Copilot finished work on behalf of hotlong January 21, 2026 13:23

Copilot started work on behalf of huangyiirene January 21, 2026 13:41 View session

Copilot AI requested a review from huangyiirene January 21, 2026 13:44

Copilot started work on behalf of hotlong January 21, 2026 14:07 View session

Fix TypeScript build errors in ObjectView and demo app

4718255

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel bot had a problem deploying to Preview – objectui-docs January 21, 2026 14:15 Failure

vercel bot deployed to Preview – objectui-site January 21, 2026 14:16 View deployment

Copilot finished work on behalf of hotlong January 21, 2026 14:16

huangyiirene marked this pull request as ready for review January 21, 2026 15:04

huangyiirene merged commit 465e0b7 into main Jan 21, 2026
12 of 13 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add ObjectView: Integrated CRUD interface combining ObjectTable and ObjectForm #134

Add ObjectView: Integrated CRUD interface combining ObjectTable and ObjectForm #134

Uh oh!

Copilot AI commented Jan 21, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 21, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 21, 2026

Uh oh!

Uh oh!

github-actions bot commented Jan 21, 2026

Uh oh!

hotlong commented Jan 21, 2026

Uh oh!

Copilot AI commented Jan 21, 2026

Uh oh!

huangyiirene commented Jan 21, 2026

Uh oh!

hotlong commented Jan 21, 2026

Uh oh!

Copilot AI commented Jan 21, 2026

Uh oh!

github-actions bot commented Jan 21, 2026

Uh oh!

github-actions bot commented Jan 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Add ObjectView: Integrated CRUD interface combining ObjectTable and ObjectForm #134

Add ObjectView: Integrated CRUD interface combining ObjectTable and ObjectForm #134

Uh oh!

Conversation

Copilot AI commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ObjectView Component - Complete CRUD Management Interface

Overview

What is ObjectView?

Screenshots

Main Interface with Table

Create Form in Drawer Mode

Implementation Checklist

Key Features

1. Layout Modes

2. Integrated Toolbar

3. Auto-Generated UI

4. State Management

Usage Example

Files Changed

Test Results

Build & Type Check Status

Recent Fixes

Future Enhancements

Breaking Changes

Migration Guide

Uh oh!

vercel bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 21, 2026

📦 Bundle Size Report

Size Limits

Uh oh!

Uh oh!

github-actions bot commented Jan 21, 2026

Uh oh!

hotlong commented Jan 21, 2026

Uh oh!

Copilot AI commented Jan 21, 2026

Uh oh!

huangyiirene commented Jan 21, 2026

Uh oh!

hotlong commented Jan 21, 2026

Uh oh!

Copilot AI commented Jan 21, 2026

Uh oh!

github-actions bot commented Jan 21, 2026

📦 Bundle Size Report

Size Limits

Uh oh!

github-actions bot commented Jan 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Jan 21, 2026 •

edited

Loading

vercel bot commented Jan 21, 2026 •

edited

Loading