diff --git a/raw/fields__collapsible.md b/raw/_processed/fields__collapsible.md similarity index 100% rename from raw/fields__collapsible.md rename to raw/_processed/fields__collapsible.md diff --git a/wiki/_master-index.md b/wiki/_master-index.md index 4d87ffa..e9906a4 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 | 66 | +| [[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 | 67 | | [[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 3aa7a4e..ab0304a 100644 --- a/wiki/payloadcms/_index.md +++ b/wiki/payloadcms/_index.md @@ -67,3 +67,4 @@ | [[wiki/payloadcms/fields-blocks\|Blocks Field]] | Heterogeneous array layout builder — block config, blockReferences, filterOptions, copy/paste, Lexical rendering, image guidelines | raw/fields__blocks.md | 2026-05-15 | | [[wiki/payloadcms/fields-checkbox\|Checkbox Field]] | Boolean field — config options, defaultValue, index, saveToJWT, hidden, virtual, custom components | raw/fields__checkbox.md | 2026-05-15 | | [[wiki/payloadcms/fields-code\|Code Field]] | Monaco editor UI (VS Code engine) storing a plain string — language syntax highlighting, editorOptions, custom components | raw/fields__code.md | 2026-05-15 | +| [[wiki/payloadcms/fields-collapsible\|Collapsible Field]] | Presentational-only layout field — groups nested fields under a collapsible header; no DB column; supports dynamic label via `({ data, path })` | raw/fields__collapsible.md | 2026-05-15 | diff --git a/wiki/payloadcms/fields-collapsible.md b/wiki/payloadcms/fields-collapsible.md new file mode 100644 index 0000000..ebc709a --- /dev/null +++ b/wiki/payloadcms/fields-collapsible.md @@ -0,0 +1,69 @@ +--- +title: "Collapsible Field" +aliases: [collapsible, payload-collapsible-field] +tags: [payloadcms, fields, admin-ui, layout] +sources: [raw/fields__collapsible.md] +created: 2026-05-15 +updated: 2026-05-15 +--- + +## Overview + +The Collapsible field is **presentational-only** — it has no database column and exists solely to group fields under a collapsible UI section in the Admin Panel. It does not affect the data shape stored in the document. + +## Config + +```ts +import type { Field } from 'payload' + +export const MyCollapsibleField: Field = { + type: 'collapsible', // required + label: 'Advanced Options', // string | function | React component + fields: [ // required — nested fields + { name: 'title', type: 'text' }, + ], + admin: { + initCollapsed: true, // start collapsed (default: false) + }, +} +``` + +## Config Options + +| Option | Required | Description | +|--------|----------|-------------| +| `type` | Yes | Must be `'collapsible'` | +| `label` | Yes | Header text — string, `({ data, path }) => string`, or React component | +| `fields` | Yes | Array of nested fields | +| `admin.initCollapsed` | No | Initial collapsed state (default `false`) | +| `custom` | No | Extension point for plugins | + +## Dynamic Label + +The `label` can be a function receiving `{ data, path }` — useful for showing a document field value as the header: + +```ts +label: ({ data }) => data?.title || 'Untitled', +``` + +This is the most common pattern — label shows the primary content field so the collapsed state is still informative. + +## Key Takeaways + +- **No DB column** — pure Admin Panel layout, data is stored on the parent document as if the collapsible didn't exist +- **`label` is required** — must always provide a string, function, or React component +- **`fields` is required** — must nest at least one field +- **`initCollapsed`** — set to `true` to hide secondary/advanced fields by default, reducing visual noise +- **Dynamic label pattern** — `label: ({ data }) => data?.title || 'Untitled'` shows content field value in the header so collapsed rows are identifiable at a glance +- Collapsible fields can be **nested inside** [[wiki/payloadcms/fields-array|Array]] or [[wiki/payloadcms/fields-blocks|Blocks]] fields + +## Related + +- [[wiki/payloadcms/fields-complex|Fields: Complex]] — Row, Group, Array, Blocks, Tabs, Collapsible overview +- [[wiki/payloadcms/fields-array|Array Field]] — repeating rows that can contain Collapsible groups +- [[wiki/payloadcms/fields-blocks|Blocks Field]] — heterogeneous layouts; each block can use Collapsible internally +- [[wiki/payloadcms/custom-components-edit-view|Custom Components — Edit View]] — further UI customization options + +## Sources + +- `raw/fields__collapsible.md` (source: https://payloadcms.com/docs/fields/collapsible)