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:
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. |
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. |
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. |
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. |