108 lines
5.3 KiB
Plaintext
108 lines
5.3 KiB
Plaintext
---
|
|
title: Global Admin Config
|
|
label: Globals
|
|
order: 30
|
|
desc:
|
|
keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
|
|
---
|
|
|
|
The behavior of [Globals](../configuration/globals) within the [Admin Panel](./overview) can be fully customized to fit the needs of your application. This includes grouping or hiding their navigation links, adding [Custom Components](./components), setting page metadata, and more.
|
|
|
|
To configure Admin Options for Globals, use the `admin` property in your Global Config:
|
|
|
|
```ts
|
|
import { GlobalConfig } from 'payload'
|
|
|
|
export const MyGlobal: GlobalConfig = {
|
|
// ...
|
|
admin: { // highlight-line
|
|
// ...
|
|
},
|
|
}
|
|
```
|
|
|
|
## Admin Options
|
|
|
|
The following options are available:
|
|
|
|
| Option | Description |
|
|
| ------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
| **`group`** | Text used as a label for grouping Collection and Global links together in the navigation. |
|
|
| **`hidden`** | Set to true or a function, called with the current user, returning true to exclude this Global from navigation and admin routing. |
|
|
| **`components`** | Swap in your own React components to be used within this Global. [More details](#custom-components). |
|
|
| **`preview`** | Function to generate a preview URL within the Admin Panel for this Global that can point to your app. [More details](#preview). |
|
|
| **`livePreview`** | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview). |
|
|
| **`hideAPIURL`** | Hides the "API URL" meta field while editing documents within this collection. |
|
|
| **`meta`** | Page metadata overrides to apply to this Global within the Admin Panel. [More details](./metadata). |
|
|
|
|
### Custom Components
|
|
|
|
Globals can set their own [Custom Components](./components) which only apply to [Global](../configuration/globals)-specific UI within the [Admin Panel](./overview). This includes elements such as the Save Button, or entire layouts such as the Edit View.
|
|
|
|
To override Global Components, use the `admin.components` property in your [Global Config](../configuration/globals):
|
|
|
|
```ts
|
|
import type { SanitizedGlobalConfig } from 'payload'
|
|
|
|
export const MyGlobal: SanitizedGlobalConfig = {
|
|
// ...
|
|
admin: {
|
|
components: { // highlight-line
|
|
// ...
|
|
},
|
|
},
|
|
}
|
|
```
|
|
|
|
The following options are available:
|
|
|
|
| Path | Description |
|
|
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
|
|
| **`elements.SaveButton`** | Replace the default Save Button with a Custom Component. [Drafts](../versions/drafts) must be disabled. |
|
|
| **`elements.SaveDraftButton`** | Replace the default Save Draft Button with a Custom Component. [Drafts](../versions/drafts) must be enabled and autosave must be disabled. |
|
|
| **`elements.PublishButton`** | Replace the default Publish Button with a Custom Component. [Drafts](../versions/drafts) must be enabled. |
|
|
| **`elements.PreviewButton`** | Replace the default Preview Button with a Custom Component. [Preview](#preview) must be enabled. |
|
|
| **`views`** | Override or create new views within the Admin Panel. [More details](./views). |
|
|
|
|
<Banner type="success">
|
|
<strong>Note:</strong>
|
|
For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components).
|
|
</Banner>
|
|
|
|
### Preview
|
|
|
|
It is possible to display a Preview Button within the Edit View of the Admin Panel. This will allow editors to visit the frontend of your app the corresponds to the document they are actively editing. This way they can preview the latest, potentially unpublished changes.
|
|
|
|
To configure the Preview Button, set the `admin.preview` property to a function in your Global Config:
|
|
|
|
```ts
|
|
import { GlobalConfig } from 'payload'
|
|
|
|
export const MainMenu: GlobalConfig = {
|
|
// ...
|
|
admin: {
|
|
// highlight-start
|
|
preview: (doc, { locale }) => {
|
|
if (doc?.slug) {
|
|
return `/${doc.slug}?locale=${locale}`
|
|
}
|
|
|
|
return null
|
|
},
|
|
// highlight-end
|
|
},
|
|
}
|
|
```
|
|
|
|
The preview function receives two arguments:
|
|
|
|
| Argument | Description |
|
|
| --- | --- |
|
|
| **`doc`** | The Document being edited. |
|
|
| **`ctx`** | An object containing `locale` and `token` properties. The `token` is the currently logged-in user's JWT. |
|
|
|
|
<Banner type="success">
|
|
<strong>Note:</strong>
|
|
For fully working example of this, check of the official [Draft Preview Example](https://github.com/payloadcms/payload/tree/main/examples/draft-preview) in the [Examples Directory](https://github.com/payloadcms/payload/tree/main/examples).
|
|
</Banner>
|