UI Field
This field is helpful if you need to build in custom functionality via React components within the Admin panel. Think of it as a way for you to "plug in" your own React components directly within your other fields, so you can provide your editors with new controls exactly where you want them to go.
With this field, you can also inject custom Cell components that appear as additional columns within collections' List views.
Example uses:
- Add a custom message or block of text within the body of an Edit view to describe the purpose of surrounding fields
- Add a "Refund" button to an Order's Edit view sidebar, which might make a fetch call to a custom
refundendpoint - Add a "view page" button into a Pages List view to give editors a shortcut to view a page on the frontend of the site
- Build a "clear cache" button or similar mechanism to manually clear caches of specific documents
Config
| Option | Description |
|---|---|
name * | A unique identifier for this field. |
label | Human-readable label for this UI field. |
admin.components.Field * | React component to be rendered for this field within the Edit view. More |
admin.components.Cell | React component to be rendered as a Cell within collection List views. More |
admin.disableListColumn | Set disableListColumn to true to prevent the UI field from appearing in the list view column selector. |
custom | Extension point for adding custom data (e.g. for plugins) |
* An asterisk denotes that a property is required.
Example
collections/ExampleCollection.ts
1
import { CollectionConfig } from 'payload/types'
2
3
export const ExampleCollection: CollectionConfig = {
4
slug: 'example-collection',
5
fields: [
6
{
7
name: 'myCustomUIField', // required
8
type: 'ui', // required
9
admin: {
10
components: {
11
Field: MyCustomUIField,
12
Cell: MyCustomUICell,
13
},
14
},
15
},
16
],
17
}
Next