277448d9c0
Payload is designed with performance in mind, but its customizability means that there are many ways to configure your app that can impact performance. While Payload provides several features and best practices to help you optimize your app's specific performance needs, these are not currently well surfaced and can be obscure. Now: - A high-level performance doc now exists at `/docs/performance` - There's a new section on performance within the `/docs/queries` doc - There's a new section on performance within the `/docs/hooks` doc - There's a new section on performance within the `/docs/custom-components` doc This PR also: - Restructures and elaborates on the `/docs/queries/pagination` docs - Adds a new `/docs/database/indexing` doc - More --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1210743577153856
65 lines
3.1 KiB
Plaintext
65 lines
3.1 KiB
Plaintext
---
|
|
title: UI Field
|
|
label: UI
|
|
order: 200
|
|
desc: UI fields are purely presentational and allow developers to customize the Admin Panel to a very fine degree, including adding actions and other functions.
|
|
keywords: custom field, react component, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
|
|
---
|
|
|
|
The UI (user interface) Field gives you a ton of power to add your own React components directly into the [Admin Panel](../admin/overview), nested directly within your other fields. It has absolutely no effect on the data of your documents. It is presentational-only. 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 the UI Field, you can:
|
|
|
|
- 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 `refund` endpoint
|
|
- 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
|
|
|
|
To add a UI Field, set the `type` to `ui` in your [Field Config](./overview):
|
|
|
|
```ts
|
|
import type { Field } from 'payload'
|
|
|
|
export const MyUIField: Field = {
|
|
// ...
|
|
type: 'ui', // highlight-line
|
|
}
|
|
```
|
|
|
|
## Config Options
|
|
|
|
| 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 details](./overview#field). |
|
|
| **`admin.components.Cell`** | React component to be rendered as a Cell within collection List views. [More details](./overview#cell). |
|
|
| **`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`
|
|
|
|
```ts
|
|
import type { CollectionConfig } from 'payload'
|
|
|
|
export const ExampleCollection: CollectionConfig = {
|
|
slug: 'example-collection',
|
|
fields: [
|
|
{
|
|
name: 'myCustomUIField', // required
|
|
type: 'ui', // required
|
|
admin: {
|
|
components: {
|
|
Field: '/path/to/MyCustomUIField',
|
|
Cell: '/path/to/MyCustomUICell',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
}
|
|
```
|