List, Form, Kanban, Calendar, Gantt und mehr — wie jede Objektoberfläche in der Console deklariert wird.

Views

Eine View ist die Art und Weise, wie ein Benutzer Datensätze in der Console sieht und bearbeitet. Views sind deklarative Metadaten — mit demselben Lebenszyklus wie Objekte: einmal deklarieren, mit Ihrem Paket ausliefern, überall rendern.

Zwei Arten:

List Views — viele Datensätze visualisieren (Grid, Kanban, Calendar, …)
Form Views — einen einzelnen Datensatz ansehen / bearbeiten (simple, tabbed, wizard, …)

Schema-Quelle: packages/spec/src/ui/view.zod.ts.

Die kürzestmögliche Deklaration

Jedes Objekt erhält automatisch eine Standard-Grid-Liste + ein einfaches Formular, selbst wenn Sie keine Views deklarieren. Fügen Sie view hinzu, um zu überschreiben oder zu erweitern:

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'] } ] }
  }
})

Für Objekte mit mehreren Views (z. B. ein Kanban und ein Calendar über denselben Daten) verwenden Sie die benannten Varianten:

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: [ /* ... */ ] }
  }
}

List-View-Typen

`type`	Rendert	Erforderliche Konfiguration
`grid`	Datentabelle (Standard)	`columns`
`kanban`	Board mit Spalten	`kanban: { groupByField }`
`gallery`	Kartenstapel	`gallery: { coverField, titleField }`
`calendar`	Monat / Woche / Tag	`calendar: { startDateField, titleField }`
`timeline`	Chronologischer Feed	`timeline: { startDateField, titleField }`
`gantt`	Projektzeitachse + Abhängigkeiten	`gantt: { startDateField, endDateField, titleField }`
`map`	Geografische Pins	`map: { locationField }`
`chart`	Eingebettetes Diagramm	`chart: { chartType, xAxisField, yAxisFields }`

Allgemeine List-Optionen

{
  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 und sort werden zu ObjectQL kompiliert; rowActions und bulkActions verweisen per Name auf Actions.

Kanban

{
  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
  }
}

Die Spalten des Boards stammen aus den Werten des groupByField; ihre Reihenfolge und Farbe werden den select-Optionsdefinitionen dieses Feldes entnommen.

Drag & Drop zwischen Spalten löst ein Update aus, das das gruppierte Feld setzt — mit denselben Berechtigungsregeln wie bei einer manuellen Bearbeitung.

Calendar

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

Gantt

{
  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
  }
}

Chart (inline)

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

Chart-Views sind für eingebettete Dashboards auf einem einzelnen Objekt gedacht — für umfangreichere, objektübergreifende Analysen verwenden Sie die dedizierte Reports-Oberfläche.

Form-View-Typen

`type`	Layout
`simple`	Einzelne Spalte oder Abschnitte (Standard)
`tabbed`	Abschnitte mit Tabs
`wizard`	Schritt-für-Schritt-Ablauf
`split`	Master-Detail mit zwei Bereichen
`drawer`	Formular im Seitenbereich
`modal`	Formular im Dialog

{
  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'
}

Öffentliche Formulare

Formulare können anonym zugänglich gemacht werden:

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

Dadurch werden automatisch GET /api/v1/forms/contact-us und POST /api/v1/forms/contact-us/submit bereitgestellt — öffentliche Formularrouten, die keine Authentifizierung erfordern. Siehe REST API → Public forms.

Sichtbarkeit, ARIA, Theming

visibleOn: P\...`` — auf Formular-Abschnitten und Feldern, blendet sie basierend auf Benutzer / Datensatz / Umgebung aus (CEL-Prädikat)
aria: { label, description, ... } — ARIA-Attribute für Screenreader (List- und Form-Views)
appearance: { showDescription, allowedVisualizations: [...] } — auf List-Views, schränkt ein, zu welchen List-Typen Endbenutzer wechseln können

Per Chat erstellen

Normalerweise schreiben Sie View-Metadaten nicht von Hand. Weisen Sie den AI Builder an:

"Add a kanban view of the support_ticket object grouped by status, with cards showing subject and priority. Colour the columns red / amber / green by status."

Er ruft die Metadaten-Tools auf, stellt den Diff in die Warteschlange, und sobald Sie ihn genehmigen, erscheint die View in der Console. Siehe AI Builder.

Siehe auch

Data model — die Objekte, aus denen Views lesen
Actions — worauf rowActions / bulkActions verweisen
ObjectQL — wozu filter / sort kompiliert werden
CEL — conditionalFormatting, visibleOn
@objectstack/spec/ui/view.zod.ts — Schema

Views

On this page