Skip to content

plugin-view.mdx

Latest commit

 

History

History
277 lines (217 loc) · 4.77 KB

plugin-view.mdx

File metadata and controls

277 lines (217 loc) · 4.77 KB
Raw
title Plugin View

import { InteractiveDemo } from '@/app/components/InteractiveDemo'; import { PluginLoader } from '@/app/components/PluginLoader';

Unified view component for ObjectQL objects with automatic form and grid generation.

Installation

npm install @object-ui/plugin-view

<PluginLoader plugins={['view']}>

Interactive Examples

User Directory View

Record Detail View

Form Create View

Features

  • Automatic Views - Generate views from ObjectQL schemas
  • Form Generation - Auto-generate forms from object definitions
  • Grid Generation - Auto-generate data grids
  • CRUD Operations - Built-in create, read, update, delete
  • Field Mapping - Automatic field type detection
  • ObjectQL Integration - Native ObjectStack support

Schema API

ObjectView

{
  type: 'object-view',
  object: string,                 // ObjectQL object name
  viewMode?: 'grid' | 'form' | 'detail',
  fields?: string[],              // Fields to display
  dataSource?: DataSource,
  onCreate?: (data) => void,
  onUpdate?: (id, data) => void,
  onDelete?: (id) => void,
  className?: string
}

Usage

Auto-registration (Side-effect Import)

import '@object-ui/plugin-view';

Manual Registration

import { viewComponents } from '@object-ui/plugin-view';
import { ComponentRegistry } from '@object-ui/core';

Object.entries(viewComponents).forEach(([type, component]) => {
  ComponentRegistry.register(type, component);
});

Examples

Grid View

Display objects in a data grid:

{
  "type": "object-view",
  "object": "users",
  "viewMode": "grid",
  "fields": ["name", "email", "role", "created_at"]
}

Form View

Create or edit objects with a form:

{
  "type": "object-view",
  "object": "users",
  "viewMode": "form",
  "mode": "create",
  "fields": ["name", "email", "role"]
}

Detail View

Display a single object's details:

{
  "type": "object-view",
  "object": "users",
  "viewMode": "detail",
  "recordId": "123",
  "fields": ["name", "email", "role", "bio", "created_at"]
}

CRUD Operations

Create

{
  "type": "object-view",
  "object": "products",
  "viewMode": "form",
  "mode": "create"
}

Read/List

{
  "type": "object-view",
  "object": "products",
  "viewMode": "grid",
  "pagination": true,
  "searchable": true,
  "filters": {
    "category": "electronics"
  }
}

Update

{
  "type": "object-view",
  "object": "products",
  "viewMode": "form",
  "mode": "edit",
  "recordId": "123"
}

Delete

{
  "type": "object-view",
  "object": "products",
  "viewMode": "grid",
  "enableDelete": true
}

Field Configuration

Customize field display and behavior:

{
  "type": "object-view",
  "object": "users",
  "viewMode": "form",
  "fieldConfig": {
    "name": {
      "label": "Full Name",
      "required": true,
      "placeholder": "Enter name"
    },
    "email": {
      "label": "Email Address",
      "type": "email",
      "required": true
    },
    "role": {
      "label": "User Role",
      "type": "select",
      "options": [
        { "label": "Admin", "value": "admin" },
        { "label": "User", "value": "user" }
      ]
    }
  }
}

Advanced Features

Nested Objects

{
  "type": "object-view",
  "object": "orders",
  "viewMode": "detail",
  "fields": ["order_number", "customer.name", "items", "total"],
  "nestedFields": {
    "items": {
      "type": "object-grid",
      "object": "order_items",
      "fields": ["product.name", "quantity", "price"]
    }
  }
}

Tabs View

{
  "type": "object-view",
  "object": "users",
  "viewMode": "tabs",
  "tabs": [
    { "label": "Details", "fields": ["name", "email", "bio"] },
    { "label": "Settings", "fields": ["theme", "notifications", "timezone"] },
    { "label": "Activity", "type": "object-grid", "object": "user_activities" }
  ]
}

Integration with ObjectQL

import { createObjectStackAdapter } from '@object-ui/data-objectstack';

const dataSource = createObjectStackAdapter({
  baseUrl: 'https://api.example.com',
  token: 'your-auth-token'
});

const schema = {
  type: 'object-view',
  object: 'contacts',
  viewMode: 'grid',
  dataSource,
  fields: ['first_name', 'last_name', 'email', 'company'],
  searchable: true,
  sortable: true
};

TypeScript Support

import type { ObjectViewSchema } from '@object-ui/plugin-view';

const userView: ObjectViewSchema = {
  type: 'object-view',
  object: 'users',
  viewMode: 'grid',
  fields: ['name', 'email', 'role']
};

License

MIT