feat(next, ui): widget fields

[GermanJablo]

Summary

• Adds fields support to dashboard widgets, analogous to how Blocks work — widgets can now declare configurable fields
• Widget data is editable from a new drawer UI (edit icon) when in dashboard editing mode
• Full type generation: WidgetInstance<T> is now generic with typed data and width based on the widget's field schema and min/max width constraints
• WidgetServerProps is generic so widget components receive typed widgetData

Usage

import { buildConfig } from 'payload'

export default buildConfig({
  admin: {
    dashboard: {
      widgets: [
        {
          slug: 'sales-summary',
          ComponentPath: './components/SalesSummary.tsx#default',
          fields: [
            { name: 'title', type: 'text' },
            {
              name: 'timeframe',
              type: 'select',
              options: ['daily', 'weekly', 'monthly', 'yearly'],
            },
            { name: 'showTrend', type: 'checkbox' },
          ],
          minWidth: 'small',
          maxWidth: 'medium',
        },
      ],
    },
  },
})

import type { WidgetServerProps } from 'payload'

import type { SalesSummaryWidget } from '../payload-types'

export default async function SalesSummaryWidgetComponent({
  widgetData,
}: WidgetServerProps<SalesSummaryWidget>) {
  const title = widgetData?.title ?? 'Sales Summary'
  const timeframe = widgetData?.timeframe ?? 'monthly'

  return (
    <div className="card">
      <h3>
        {title} ({timeframe})
      </h3>
    </div>
  )
}

Demo

Screen.Recording.2026-02-23.at.16.25.40.mov

[github-actions]

📦 esbuild Bundle Analysis for payload

This analysis was generated by esbuild-bundle-analyzer. 🤖

Meta File	Out File	Size (raw)	Note
packages/next/meta_index.json	esbuild/index.js	959.94 KB	⚠️ +5.06 KB (+0.5%)
packages/payload/meta_index.json	esbuild/index.js	1.32 MB	⚠️ +1.36 KB (+0.1%)
packages/payload/meta_shared.json	esbuild/exports/shared.js	190.59 KB	✅ No change
packages/richtext-lexical/meta_client.json	esbuild/exports/client_optimized/index.js	281.79 KB	✅ No change
packages/ui/meta_client.json	esbuild/exports/client_optimized/index.js	1.18 MB	✅ No change
packages/ui/meta_shared.json	esbuild/exports/shared_optimized/index.js	16.32 KB	✅ No change

Largest paths

These visualization shows top 20 largest paths in the bundle.

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████████████▌ }}}$ 82.0%, 783.61 KB
dist/views/Version	${{\color{Goldenrod}{ █▎ }}}$ 5.4%, 51.48 KB
dist/views/Dashboard	${{\color{Goldenrod}{ ▌ }}}$ 2.2%, 21.46 KB
dist/views/Document	${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 16.59 KB
dist/views/List	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 11.38 KB
dist/views/Root	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 9.03 KB
dist/views/Versions	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.16 KB
dist/views/API	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.08 KB
dist/elements/Nav	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 5.96 KB
dist/views/Account	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 5.55 KB
dist/elements/DocumentHeader	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 4.81 KB
dist/views/Login	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 4.40 KB
dist/views/ForgotPassword	${{\color{Goldenrod}{ }}}$ 0.3%, 3.09 KB
dist/layouts/Root	${{\color{Goldenrod}{ }}}$ 0.3%, 2.91 KB
dist/views/CreateFirstUser	${{\color{Goldenrod}{ }}}$ 0.3%, 2.81 KB
dist/templates/Default	${{\color{Goldenrod}{ }}}$ 0.3%, 2.63 KB
dist/views/BrowseByFolder	${{\color{Goldenrod}{ }}}$ 0.3%, 2.61 KB
dist/views/CollectionFolders	${{\color{Goldenrod}{ }}}$ 0.3%, 2.44 KB
dist/views/ResetPassword	${{\color{Goldenrod}{ }}}$ 0.3%, 2.40 KB
dist/views/Logout	${{\color{Goldenrod}{ }}}$ 0.2%, 1.94 KB
(other)	${{\color{Goldenrod}{ ████▌ }}}$ 18.0%, 171.66 KB

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████████▉ }}}$ 67.7%, 887.23 KB
dist/fields/hooks	${{\color{Goldenrod}{ ▊ }}}$ 3.3%, 43.59 KB
dist/collections/operations	${{\color{Goldenrod}{ ▊ }}}$ 3.0%, 39.77 KB
dist/versions/migrations	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 18.50 KB
dist/auth/operations	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 15.74 KB
dist/globals/operations	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 13.17 KB
dist/utilities/configToJSONSchema.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 13.15 KB
dist/fields/config	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 12.84 KB
dist/queues/operations	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 12.80 KB
dist/fields/validations.js	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 10.54 KB
dist/bin/generateImportMap	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.87 KB
dist/collections/config	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 8.35 KB
dist/index.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.69 KB
dist/uploads/fetchAPI-multipart	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.67 KB
dist/database/migrations	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.54 KB
dist/config/orderable	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.83 KB
dist/collections/endpoints	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.22 KB
dist/config/sanitize.js	${{\color{Goldenrod}{ }}}$ 0.4%, 5.80 KB
dist/auth/strategies	${{\color{Goldenrod}{ }}}$ 0.4%, 5.50 KB
dist/auth/endpoints	${{\color{Goldenrod}{ }}}$ 0.4%, 5.42 KB
(other)	${{\color{Goldenrod}{ ████████ }}}$ 32.3%, 424.11 KB

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ███████████████████▊ }}}$ 79.4%, 148.51 KB
dist/fields/validations.js	${{\color{Goldenrod}{ █▍ }}}$ 5.6%, 10.54 KB
dist/config/orderable	${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 3.13 KB
dist/fields/baseFields	${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 2.79 KB
dist/utilities/deepCopyObject.js	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 2.54 KB
dist/auth/cookies.js	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.55 KB
dist/utilities/flattenTopLevelFields.js	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.42 KB
dist/fields/config	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 1.28 KB
dist/utilities/getVersionsConfig.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 1.04 KB
dist/utilities/flattenAllFields.js	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 943 B
dist/folders/utils	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 916 B
dist/utilities/unflatten.js	${{\color{Goldenrod}{ }}}$ 0.4%, 779 B
dist/utilities/sanitizeUserDataForEmail.js	${{\color{Goldenrod}{ }}}$ 0.4%, 713 B
dist/utilities/getFieldPermissions.js	${{\color{Goldenrod}{ }}}$ 0.3%, 651 B
dist/collections/config	${{\color{Goldenrod}{ }}}$ 0.3%, 570 B
dist/bin/generateImportMap	${{\color{Goldenrod}{ }}}$ 0.3%, 561 B
dist/auth/sessions.js	${{\color{Goldenrod}{ }}}$ 0.3%, 525 B
dist/fields/getFieldPaths.js	${{\color{Goldenrod}{ }}}$ 0.3%, 485 B
dist/errors/APIError.js	${{\color{Goldenrod}{ }}}$ 0.2%, 438 B
dist/utilities/getSafeRedirect.js	${{\color{Goldenrod}{ }}}$ 0.2%, 423 B
(other)	${{\color{Goldenrod}{ █████▏ }}}$ 20.6%, 38.43 KB

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path	Size
dist/features/blocks	${{\color{Goldenrod}{ ███▏ }}}$ 12.6%, 35.15 KB
dist/lexical/plugins	${{\color{Goldenrod}{ ██▉ }}}$ 11.5%, 32.00 KB
dist/lexical/ui	${{\color{Goldenrod}{ ██▏ }}}$ 8.7%, 24.36 KB
dist/features/experimental_table	${{\color{Goldenrod}{ ██▏ }}}$ 8.5%, 23.70 KB
dist/packages/@lexical	${{\color{Goldenrod}{ █▋ }}}$ 6.8%, 18.99 KB
dist/features/link	${{\color{Goldenrod}{ █▋ }}}$ 6.5%, 18.23 KB
dist/features/toolbars	${{\color{Goldenrod}{ █▌ }}}$ 6.4%, 17.75 KB
dist/features/upload	${{\color{Goldenrod}{ █▏ }}}$ 4.9%, 13.77 KB
dist/features/textState	${{\color{Goldenrod}{ █ }}}$ 4.0%, 11.08 KB
dist/features/relationship	${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 9.03 KB
dist/lexical/utils	${{\color{Goldenrod}{ ▊ }}}$ 3.0%, 8.49 KB
dist/features/debug	${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 7.39 KB
dist/utilities/fieldsDrawer	${{\color{Goldenrod}{ ▋ }}}$ 2.6%, 7.15 KB
dist/features/converters	${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 7.05 KB
dist/lexical/config	${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 5.08 KB
dist/features/lists	${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 5.00 KB
dist/features/format	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 3.46 KB
dist/lexical/LexicalEditor.js	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 3.17 KB
dist/lexical/theme	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 2.62 KB
dist/features/indent	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 2.50 KB
(other)	${{\color{Goldenrod}{ █████████████████████▊ }}}$ 87.4%, 243.38 KB

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████▍ }}}$ 49.5%, 579.02 KB
dist/elements/FolderView	${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 29.37 KB
dist/elements/BulkUpload	${{\color{Goldenrod}{ ▌ }}}$ 2.4%, 27.63 KB
dist/elements/WhereBuilder	${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 17.27 KB
dist/views/Edit	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 16.74 KB
dist/fields/Relationship	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.78 KB
dist/elements/Table	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.77 KB
dist/forms/Form	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.31 KB
dist/fields/Upload	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 14.24 KB
dist/fields/Blocks	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 13.69 KB
dist/elements/QueryPresets	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 10.36 KB
dist/elements/PublishButton	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.06 KB
dist/providers/Folders	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.47 KB
dist/elements/HTMLDiff	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.38 KB
dist/elements/LivePreview	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.38 KB
dist/elements/ListHeader	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.99 KB
dist/fields/Array	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.73 KB
dist/views/CollectionFolder	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.50 KB
dist/views/List	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.35 KB
dist/elements/ReactSelect	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.34 KB
(other)	${{\color{Goldenrod}{ ████████████▋ }}}$ 50.5%, 590.88 KB

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

Path	Size
dist/graphics/Logo	${{\color{Goldenrod}{ █████ }}}$ 20.0%, 3.12 KB
../../node_modules	${{\color{Goldenrod}{ ████▎ }}}$ 17.0%, 2.65 KB
dist/graphics/Icon	${{\color{Goldenrod}{ ██▍ }}}$ 9.8%, 1.52 KB
dist/utilities/formatDocTitle	${{\color{Goldenrod}{ ██▏ }}}$ 8.5%, 1.32 KB
dist/providers/TableColumns	${{\color{Goldenrod}{ █▍ }}}$ 5.5%, 862 B
dist/utilities/groupNavItems.js	${{\color{Goldenrod}{ █▎ }}}$ 5.2%, 814 B
dist/utilities/getGlobalData.js	${{\color{Goldenrod}{ █▏ }}}$ 4.9%, 762 B
dist/utilities/api.js	${{\color{Goldenrod}{ █▏ }}}$ 4.8%, 756 B
dist/elements/Translation	${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 493 B
dist/utilities/handleTakeOver.js	${{\color{Goldenrod}{ ▋ }}}$ 2.8%, 440 B
dist/utilities/traverseForLocalizedFields.js	${{\color{Goldenrod}{ ▋ }}}$ 2.6%, 399 B
dist/elements/withMergedProps	${{\color{Goldenrod}{ ▌ }}}$ 2.2%, 339 B
dist/utilities/getVisibleEntities.js	${{\color{Goldenrod}{ ▌ }}}$ 2.1%, 329 B
dist/utilities/getNavGroups.js	${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 301 B
dist/elements/WithServerSideProps	${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 232 B
dist/utilities/handleGoBack.js	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 180 B
dist/fields/mergeFieldStyles.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 159 B
dist/utilities/handleBackToDashboard.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 152 B
dist/forms/Form	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 147 B
dist/utilities/abortAndIgnore.js	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 146 B
(other)	${{\color{Goldenrod}{ ████████████████████ }}}$ 80.0%, 12.51 KB

Details

Next to the size is how much the size has increased or decreased compared with the base branch of this PR.

• ‼️: Size increased by 20% or more. Special attention should be given to this.
• ⚠️: Size increased in acceptable range (lower than 20%).
• ✅: No change or even downsized.
• 🗑️: The out file is deleted: not found in base branch.
• 🆕: The out file is newly found: will be added to base branch.

[GermanJablo]

@copilot

[Copilot]

@GermanJablo I've opened a new pull request, #15730, to work on those changes. Once the pull request is ready, I'll request review from you.

[GermanJablo]

@copilot I just wanted you to review this PR 😅

[Copilot]

@GermanJablo I've opened a new pull request, #15731, to work on those changes. Once the pull request is ready, I'll request review from you.

[GermanJablo]

Okay, I figured out how to do it, but you should be smarter. Bad bot!

[Copilot]

Pull request overview

This PR adds configurable fields support to dashboard widgets, enabling widget customization through a new drawer UI in editing mode. The feature includes full type generation with generic WidgetInstance<T> and WidgetServerProps<T> types that provide typed data and width based on widget field schemas and min/max width constraints.

Changes:

• Added fields configuration to widget definitions, allowing widgets to declare form fields similar to Blocks
• Implemented widget data editing via a new drawer UI (accessible through edit button) when dashboard is in editing mode
• Full TypeScript type generation for widget instances with typed data and constrained width properties

Reviewed changes

Copilot reviewed 28 out of 29 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
test/dashboard/utils.ts	Updated test helper to support widget editing and improved width button visibility checking
test/dashboard/payload-types.ts	Generated TypeScript types for widget instances with typed data and width constraints
test/dashboard/e2e.spec.ts	Added E2E tests for widget data editing, persistence, and cancellation flows
test/dashboard/config.ts	Updated config to include widget field definitions and default widget data
test/dashboard/components/Revenue.tsx	Updated Revenue widget to use typed widgetData from WidgetServerProps
test/dashboard/components/Count.tsx	Updated Count widget to use typed widgetData and dynamic collection selection
packages/ui/src/utilities/getSchemaMap.ts	Extended schema map caching to support widgetSlug with widget-specific cache keys
packages/ui/src/utilities/getClientSchemaMap.ts	Extended client schema map to support widget field schemas
packages/ui/src/utilities/buildFormState.ts	Added widgetSlug parameter for building form state from widget fields
packages/ui/src/utilities/buildFieldSchemaMap/index.ts	Added widget field schema building alongside collections and globals
packages/ui/src/utilities/buildClientFieldSchemaMap/index.ts	Added client-side widget field schema processing
packages/payload/src/utilities/configToJSONSchema.ts	Added widget schema generation with field types and width constraints
packages/payload/src/index.ts	Added TypedWidget, WidgetSlug, and DataFromWidgetSlug type utilities
packages/payload/src/config/types.ts	Updated Widget and WidgetInstance types to support fields and typed data/width
packages/payload/src/config/sanitize.ts	Added widget field sanitization during config processing
packages/payload/src/config/client.ts	Added client widget field processing and label resolution
packages/payload/src/bin/generateImportMap/iterateConfig.ts	Added import map iteration for widget field components
packages/payload/src/admin/views/dashboard.ts	Enhanced WidgetServerProps with generic type parameter for typed widgetData
packages/payload/src/admin/forms/Form.ts	Extended BuildFormStateArgs to support widgetSlug
packages/next/src/views/Dashboard/.../useDashboardLayout.ts	Added updateWidgetData function and data change detection
packages/next/src/views/Dashboard/.../renderWidget/renderWidgetServerFn.ts	Added widgetData parameter passing through server function
packages/next/src/views/Dashboard/.../renderWidget/getDefaultLayoutServerFn.ts	Added widgetData extraction from layout instances
packages/next/src/views/Dashboard/.../renderWidget/RenderWidget.tsx	Enhanced with request ID tracking to prevent race conditions
packages/next/src/views/Dashboard/.../index.tsx	Added widget data to item mapping and component props
packages/next/src/views/Dashboard/.../index.scss	Updated focus styles to use focus-visible for better accessibility
packages/next/src/views/Dashboard/.../index.client.tsx	Added WidgetEditControl and updated data tracking in WidgetItem
packages/next/src/views/Dashboard/.../WidgetEditControl.tsx	New component for widget edit button with conditional rendering
packages/next/src/views/Dashboard/.../WidgetConfigDrawer.tsx	New drawer component for editing widget field data
docs/custom-components/dashboard.mdx	Updated documentation with widget fields examples and usage

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[paulpopus]

Left some comments.

We should trigger the "LeaveWithoutSaving" modal if changes are made to fields but not saved, it can be a bit confusing that the modal says "save" but actually its not submitted until you save the dashboard layout itself.
Or maybe we need to think about the UX here as its easy to lose changes made in the modals

[paulpopus]

1. Localisation works now in the given example but it doesn't work with nested fields:

{
  type: 'group',
  name: 'nestedGroup',
  fields: [
    {
      name: 'nestedText',
      type: 'text',
      localized: true,
    },
  ],
},

2. When I make content changes in a widget I can still navigate away without being blocked by a LeaveWithoutSaving modal so it's easy to lose changes made

[github-actions]

🚀 This is included in version v3.78.0