diff --git a/raw/fields__textarea.md b/raw/_processed/fields__textarea.md similarity index 100% rename from raw/fields__textarea.md rename to raw/_processed/fields__textarea.md diff --git a/wiki/_master-index.md b/wiki/_master-index.md index d6aa585..631f9b1 100644 --- a/wiki/_master-index.md +++ b/wiki/_master-index.md @@ -35,7 +35,7 @@ This 3-hop pattern works for hundreds of articles without vector search. | [[wiki/reports/_index\|reports/]] | Weekly and monthly summaries — generate: `uv run python scripts/report-generator.py --weekly` | 1 | | [[wiki/infrastructure/_index\|infrastructure/]] | Server inventory: all 10 SSH hosts — optical, optical-dev, optical-prod, baic, librechat, modocmms, box-cli, aimpress, pve | 12 | | [[wiki/testing/_index\|testing/]] | Web app testing: functional, performance, security, UI types; TDD/BDD/Agile methodologies; Selenium/Cypress/Playwright/JMeter/OWASP ZAP tools | 1 | -| [[wiki/payloadcms/_index\|payloadcms/]] | Full Payload CMS reference — getting started, config, database (Postgres/MongoDB/SQLite), all 22 field types, access control, hooks, authentication (cookies, JWT, API keys, custom strategies, token data), admin UI, custom components, Lexical rich text, live preview, versions/drafts, Local/REST/GraphQL APIs, queries, plugins, jobs queue, upload, ecommerce, production deploy, TypeScript, migration guides, i18n, localization | 82 | +| [[wiki/payloadcms/_index\|payloadcms/]] | Full Payload CMS reference — getting started, config, database (Postgres/MongoDB/SQLite), all 22 field types, access control, hooks, authentication (cookies, JWT, API keys, custom strategies, token data), admin UI, custom components, Lexical rich text, live preview, versions/drafts, Local/REST/GraphQL APIs, queries, plugins, jobs queue, upload, ecommerce, production deploy, TypeScript, migration guides, i18n, localization | 84 | | [[wiki/shared-patterns/_index\|shared-patterns/]] | Oliver Agency standard library patterns: httpx, structlog, pydantic-settings, alembic — reuse before writing from scratch | 4 | | [[wiki/mistakes/_index\|mistakes/]] | Anti-patterns extracted from sessions — per-stack running lists (fastapi, react, docker, postgres, general) — injected at session start | 5 | diff --git a/wiki/payloadcms/_index.md b/wiki/payloadcms/_index.md index 3173a05..df994dc 100644 --- a/wiki/payloadcms/_index.md +++ b/wiki/payloadcms/_index.md @@ -84,3 +84,4 @@ | [[wiki/payloadcms/fields-tabs\|Tabs Field]] | Tabbed layout field — unnamed tabs (presentational), named tabs (nested DB object), conditional tabs with auto-switch, interfaceName for TS types | raw/fields__tabs.md | 2026-05-15 | | [[wiki/payloadcms/fields-text\|Text Field]] | Plain string field — `hasMany` array mode, built-in Slug Field (`slugField()`), unique index, saveToJWT, virtual, localized, RTL admin | raw/fields__text.md | 2026-05-15 | | [[wiki/payloadcms/fields-textarea\|Textarea Field]] | Multiline string field — identical to Text but with larger input; `rows` (default 2), RTL, no `hasMany`, same validation/virtual/JWT options | raw/fields__textarea.md | 2026-05-15 | +| [[wiki/payloadcms/fields-ui\|UI Field]] | Presentational-only field — inject arbitrary React components into Admin Panel Edit/List views; no data stored; use for action buttons, context text, custom controls | raw/fields__ui.md | 2026-05-15 | diff --git a/wiki/payloadcms/fields-ui.md b/wiki/payloadcms/fields-ui.md new file mode 100644 index 0000000..974c7fa --- /dev/null +++ b/wiki/payloadcms/fields-ui.md @@ -0,0 +1,67 @@ +--- +title: "UI Field" +aliases: [ui-field, presentational-field, payload-ui-field] +tags: [payloadcms, fields, admin-panel, react, components] +sources: [raw/fields__ui.md] +created: 2026-05-15 +updated: 2026-05-15 +--- + +## Overview + +The UI field is **presentational-only** — it stores no data and has no effect on documents. It lets you inject arbitrary React components directly into the Admin Panel, nested among your other fields. + +```ts +import type { Field } from 'payload' + +export const MyUIField: Field = { + name: 'myCustomUIField', + type: 'ui', + admin: { + components: { + Field: '/path/to/MyCustomUIField', + Cell: '/path/to/MyCustomUICell', + }, + }, +} +``` + +## Config Options + +| Option | Required | Description | +|--------|----------|-------------| +| `name` | ✅ | Unique identifier for this field | +| `label` | — | Human-readable label | +| `admin.components.Field` | ✅ | React component rendered in Edit View | +| `admin.components.Cell` | — | React component rendered in List View cells | +| `admin.disabled` | — | `true` to disable everywhere, or granular `{ field?, column?, filter?, groupBy?, bulkEdit? }` | +| `custom` | — | Extension point for plugin data | + +> **Default:** UI fields have `disabled: { bulkEdit: true }` by default. + +## Use Cases + +- **Descriptive text** — add context/instructions between fields in Edit View +- **Action buttons** — "Refund" button in Order sidebar, "Clear Cache" button, "View Page" shortcut +- **Custom controls** — any React component injected exactly where editors need it + +## Key Takeaways + +- UI field has **zero impact on stored data** — purely admin UI enhancement +- `admin.components.Field` is required (the component to render) +- `admin.components.Cell` renders in List View columns — optional +- Bulk edit is disabled by default (no data to edit) +- Can trigger `fetch` calls, external APIs, or side effects from within the Admin Panel +- Use [[wiki/payloadcms/fields-overview|Fields Overview]] `admin.condition` to show/hide based on other field values + +## Related + +- [[wiki/payloadcms/fields-overview|Fields Overview]] — cross-cutting field config, `admin.components` pattern +- [[wiki/payloadcms/custom-components-authoring|Custom Components — Authoring Guide]] — how to write RSC vs Client components, Import Map +- [[wiki/payloadcms/fields-row|Row Field]] — another presentational-only layout field (horizontal grouping) +- [[wiki/payloadcms/fields-collapsible|Collapsible Field]] — presentational layout with collapsible header +- [[wiki/payloadcms/admin-panel-overview|Admin Panel Overview]] — Edit View and List View structure + +## Sources + +- `raw/fields__ui.md` — https://payloadcms.com/docs/fields/ui