Global Admin Config
The behavior of Globals within the Admin Panel can be fully customized to fit the needs of your application. This includes grouping or hiding their navigation links, adding Custom Components, setting page metadata, and more.
To configure Admin Options for Globals, use the admin property in your Global Config:
Admin Options
The following options are available:
| Option | Description |
|---|---|
group | Text or localization object used to group Collection and Global links in the admin navigation. Set to false to hide the link from the navigation while keeping its routes accessible. |
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. |
preview | Function to generate a preview URL within the Admin Panel for this Global that can point to your app. More details. |
livePreview | Enable real-time editing for instant visual feedback of your front-end application. More details. |
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. |
Custom Components
Globals can set their own Custom Components which only apply to Global-specific UI within the Admin Panel. 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:
The following options are available:
| Path | Description |
|---|---|
elements.SaveButton | Replace the default Save Button with a Custom Component. Drafts must be disabled. |
elements.SaveDraftButton | Replace the default Save Draft Button with a Custom Component. Drafts must be enabled and autosave must be disabled. |
elements.PublishButton | Replace the default Publish Button with a Custom Component. Drafts must be enabled. |
elements.PreviewButton | Replace the default Preview Button with a Custom Component. Preview must be enabled. |
views | Override or create new views within the Admin Panel. More details. |
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:
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. |