b09ae6772f
Discussion #8859. Requires #14012. Exports a new `slugField`. This is a wrapper around the text field that you can drop into any field schema. A slug is a unique, indexed, URL-friendly string that identifies a particular document, often used to construct the URL of a webpage. Slugs are a fundamental concept for seemingly every project. Traditionally, you'd build this field from scratch, but there are many edge cases and nice-to-haves to makes this difficult to maintain by hand. For example, it needs to automatically generate based on the value of another field, provide UI to lock and re-generate the slug on-demand, etc. Fixes #13938. When autosave is enabled, the slug is only ever generated once after the initial create, leading to single character, or incomplete slugs. For example, it is expected that "My Title" → "my-title, however ends up as "m". This PR overhauls the field to feel a lot more natural. Now, we only generate the slug through: 1. The `create` operation, unless the user has modified the slug manually 2. The `update` operation, if: a. Autosave is _not_ enabled and there is no slug b. Autosave _is_ enabled, the doc is unpublished, and the user has not modified the slug manually The slug should stabilize after all above criteria have been met, because the URL is typically derived from the slug. This is to protect modifying potentially live URLs, breaking links, etc. without explicit intent. This fix, along with all the other features, is now standardized behind the new `slugField`: ```ts import type { CollectionConfig } from 'payload' import { slugField } from 'payload' export const MyCollection: CollectionConfig = { // ... fields: [ // ... slugField() ] } ``` In the future we could also make this field smart enough to auto increment itself when its generated slug is not unique. --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1211513433305005
77 lines
2.3 KiB
Plaintext
77 lines
2.3 KiB
Plaintext
---
|
|
title: Row Field
|
|
label: Row
|
|
order: 150
|
|
desc: With the Row field you can arrange fields next to each other in the Admin Panel to help you customize your Dashboard.
|
|
keywords: row, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
|
|
---
|
|
|
|
The Row Field is presentational-only and only affects the [Admin Panel](../admin/overview). By using it, you can arrange [Fields](./overview) next to each other horizontally.
|
|
|
|
<LightDarkImage
|
|
srcLight="https://payloadcms.com/images/docs/fields/row.png"
|
|
srcDark="https://payloadcms.com/images/docs/fields/row-dark.png"
|
|
alt="Shows a row field in the Payload Admin Panel"
|
|
caption="Admin Panel screenshot of a Row field"
|
|
/>
|
|
|
|
To add a Row Field, set the `type` to `row` in your [Field Config](./overview):
|
|
|
|
```ts
|
|
import type { Field } from 'payload'
|
|
|
|
export const MyRowField: Field = {
|
|
// ...
|
|
// highlight-start
|
|
type: 'row',
|
|
fields: [
|
|
// ...
|
|
],
|
|
// highlight-end
|
|
}
|
|
```
|
|
|
|
## Config Options
|
|
|
|
| Option | Description |
|
|
| --------------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
| **`fields`** \* | Array of field types to nest within this Row. |
|
|
| **`admin`** | Admin-specific configuration excluding `description`, `readOnly`, and `hidden`. [More details](./overview#admin-options). |
|
|
| **`custom`** | Extension point for adding custom data (e.g. for plugins) |
|
|
|
|
_\* An asterisk denotes that a property is required._
|
|
|
|
## Example
|
|
|
|
```ts
|
|
import type { CollectionConfig } from 'payload'
|
|
|
|
export const ExampleCollection: CollectionConfig = {
|
|
slug: 'example-collection',
|
|
fields: [
|
|
{
|
|
type: 'row', // required
|
|
fields: [
|
|
// required
|
|
{
|
|
name: 'label',
|
|
type: 'text',
|
|
required: true,
|
|
admin: {
|
|
width: '50%',
|
|
},
|
|
},
|
|
{
|
|
name: 'value',
|
|
type: 'text',
|
|
required: true,
|
|
admin: {
|
|
width: '50%',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
```
|