リスト、フォーム、カンバン、カレンダー、ガントなど — Console におけるすべてのオブジェクト画面の宣言方法。

ビュー

ビュー とは、ユーザーが Console でレコードを閲覧・編集する方法です。ビューは宣言的メタデータであり、オブジェクトと同じライフサイクルを持ちます。一度宣言すれば、パッケージとともに配布し、どこでもレンダリングできます。

2 種類あります。

リストビュー — 多数のレコードを可視化（グリッド、カンバン、カレンダーなど）
フォームビュー — 単一レコードの閲覧・編集（シンプル、タブ、ウィザードなど）

スキーマソース: packages/spec/src/ui/view.zod.ts。

最小限の宣言

すべてのオブジェクトは、ビューを宣言しなくても自動的にデフォルトのグリッドリストとシンプルフォームを取得します。view を追加してオーバーライドまたは拡張できます。

import { defineObject, F, P } from '@objectstack/spec'

export default defineObject({
  name: 'support_ticket',
  fields: [ /* ... */ ],

  view: {
    list: { type: 'grid', columns: ['subject', 'status', 'priority', 'assignee'] },
    form: { sections: [ { label: 'Details', fields: ['subject','description','priority','status','assignee'] } ] }
  }
})

マルチビューオブジェクト（例えば同じデータに対するカンバンとカレンダー）の場合は、名前付きバリアントを使用します。

view: {
  listViews: {
    by_status:  { type: 'kanban',   kanban:   { groupByField: 'status' }, columns: ['subject','priority'] },
    schedule:   { type: 'calendar', calendar: { startDateField: 'due_at', titleField: 'subject' } },
    by_owner:   { type: 'grid', columns: ['subject','status','priority'], filterableFields: ['assignee'] }
  },
  formViews: {
    quick:    { type: 'modal',  sections: [ /* ... */ ] },
    full:     { type: 'tabbed', sections: [ /* ... */ ] }
  }
}

リストビューの種類

`type`	レンダリング	必須の設定
`grid`	データテーブル（デフォルト）	`columns`
`kanban`	列を持つボード	`kanban: { groupByField }`
`gallery`	カードデッキ	`gallery: { coverField, titleField }`
`calendar`	月 / 週 / 日	`calendar: { startDateField, titleField }`
`timeline`	時系列フィード	`timeline: { startDateField, titleField }`
`gantt`	プロジェクトタイムライン + 依存関係	`gantt: { startDateField, endDateField, titleField }`
`map`	地理空間ピン	`map: { locationField }`
`chart`	埋め込みチャート	`chart: { chartType, xAxisField, yAxisFields }`

共通のリストオプション

{
  type: 'grid',
  columns: ['subject','status','priority','assignee','created_at'],

  filter: [ { field: 'archived', operator: 'equals', value: false } ],
  sort:   [ { field: 'created_at', order: 'desc' } ],
  pagination: { pageSize: 25 },
  searchableFields:   ['subject','description'],
  filterableFields:   ['status','priority','assignee'],

  navigation: { mode: 'drawer' },                       // 'page' | 'drawer' | 'modal' | 'split' | 'popover' | 'new_window' | 'none'
  selection:  { type: 'multiple' },                     // 'none' | 'single' | 'multiple'

  rowActions:  ['close_ticket','assign_to_me'],
  bulkActions: ['bulk_close','bulk_export'],

  conditionalFormatting: [
    { condition: P`record.priority == 'urgent'`, style: { background: '#fef2f2', fontWeight: 600 } }
  ],

  exportOptions: ['csv','xlsx'],
  emptyState:   { title: 'No tickets yet', message: 'Create one to get started', icon: 'inbox' }
}

filter と sort は ObjectQL にコンパイルされます。 rowActions と bulkActions は actions を名前で参照します。

カンバン

{
  type: 'kanban',
  kanban: {
    groupByField:   'status',                // discrete field — usually a select
    summarizeField: 'amount',                // optional total per column
    columns: ['subject', 'priority', 'assignee']  // fields shown on each card
  }
}

ボードの列は groupByField の値から生成され、その順序と色は当該フィールドの select オプション定義から取得されます。

列間でのドラッグ&ドロップは、グループ化されたフィールドを設定する更新を発行します。手動編集と同じ権限ルールが適用されます。

カレンダー

{
  type: 'calendar',
  calendar: {
    startDateField: 'start_at',
    endDateField:   'end_at',                // optional — single-point if omitted
    titleField:     'subject',
    colorField:     'priority'               // optional — colours events by value
  }
}

ガント

{
  type: 'gantt',
  gantt: {
    startDateField:    'start_at',
    endDateField:      'due_at',
    titleField:        'name',
    progressField:     'percent_complete',   // optional, drives the progress bar
    dependenciesField: 'depends_on'          // optional — multiselect lookup to same object
  }
}

チャート（インライン）

{
  type: 'chart',
  chart: {
    chartType: 'bar',                        // 'bar' | 'line' | 'pie' | 'area' | 'scatter'
    xAxisField:  'created_at',
    yAxisFields: ['amount'],
    aggregation: 'sum',
    groupByField: 'status'
  }
}

チャートビューは、単一オブジェクト上のインラインダッシュボード向けです。より高度なオブジェクト横断分析には、専用のレポート画面を使用してください。

フォームビューの種類

`type`	レイアウト
`simple`	単一カラムまたはセクション（デフォルト）
`tabbed`	タブ付きセクション
`wizard`	ステップバイステップのフロー
`split`	マスター・ディテールの 2 ペイン
`drawer`	サイドパネルフォーム
`modal`	ダイアログフォーム

{
  type: 'tabbed',
  sections: [
    { label: 'Overview', fields: ['subject','status','priority','assignee'] },
    { label: 'Customer', fields: ['customer','contact','email','phone'] },
    { label: 'Resolution', fields: ['resolution_notes','resolved_at'] }
  ],
  submitBehavior: { kind: 'next-record' }   // 'thank-you' | 'redirect' | 'continue' | 'next-record'
}

公開フォーム

フォームは匿名アクセス可能にできます。

{
  type: 'simple',
  sections: [ { fields: ['name','email','message'] } ],
  sharing: {
    enabled: true,
    publicLink: 'contact-us',                // slug under /forms/
    allowAnonymous: true
  },
  submitBehavior: { kind: 'thank-you' }
}

これにより、GET /api/v1/forms/contact-us と POST /api/v1/forms/contact-us/submit が自動的に公開されます。これらは認証を必要としない公開フォームルートです。REST API → Public forms を参照してください。

可視性、ARIA、テーマ

visibleOn: P\...`` — フォームの セクション と フィールド に対して、ユーザー / レコード / 環境に基づいて非表示にします（CEL 述語）
aria: { label, description, ... } — スクリーンリーダー向けの ARIA 属性（リストビューとフォームビュー）
appearance: { showDescription, allowedVisualizations: [...] } — リストビューにおいて、エンドユーザーが切り替えられるリストタイプを制限します

チャットで構築する

通常、ビューのメタデータを手作業で書くことはありません。AI Builder に伝えましょう。

「support_ticket オブジェクトのカンバンビューを status でグループ化して追加し、カードに subject と priority を表示してください。列を status に応じて赤 / 黄 / 緑で色分けしてください。」

AI Builder はメタデータツールを呼び出し、差分をキューに入れます。承認すると、ビューが Console に表示されます。AI Builder を参照してください。

ビュー

ビュー