Edit View

The Edit View is where users interact with individual Collection and Global Documents within the Admin Panel. The Edit View contains the actual form that submits the data to the server. This is where they can view, edit, and save their content. It contains controls for saving, publishing, and previewing the document, all of which can be customized to a high degree.

The Edit View can be swapped out in its entirety for a Custom View, or it can be injected with a number of Custom Components to add additional functionality or presentational elements without replacing the entire view.

To swap out the entire Edit View with a Custom View, use the views.edit.default property in your Collection Config or Global Config:

Here is an example of a custom Edit View:

For details on how to build Custom Views, including all available props, see Building Custom Views.

In addition to swapping out the entire Edit View with a Custom View, you can also override individual components. This allows you to customize specific parts of the Edit View without swapping out the entire view.

To override Edit View components for a Collection, use the admin.components.edit property in your Collection Config:

The following options are available:

To override Edit View components for Globals, use the admin.components.elements property in your Global Config:

The following options are available:

The SaveButton property allows you to render a custom Save Button in the Edit View.

To add a SaveButton component, use the components.edit.SaveButton property in your Collection Config or components.elements.SaveButton in your Global Config:

Here's an example of a custom SaveButton component:

The beforeDocumentControls property allows you to render custom components just before the default document action buttons (like Save, Publish, or Preview). This is useful for injecting custom buttons, status indicators, or any other UI elements before the built-in controls.

To add beforeDocumentControls components, use the components.edit.beforeDocumentControls property in your Collection Config or components.elements.beforeDocumentControls in your Global Config:

Here's an example of a custom beforeDocumentControls component:

The editMenuItems property allows you to inject custom components into the 3-dot menu dropdown located in the document controls bar. This dropdown contains default options including Create New, Duplicate, Delete, and other options when additional features are enabled. Any custom components you add will appear below these default items.

To add editMenuItems, use the components.edit.editMenuItems property in your Collection Config:

Here's an example of a custom editMenuItems component:

The SaveDraftButton property allows you to render a custom Save Draft Button in the Edit View.

To add a SaveDraftButton component, use the components.edit.SaveDraftButton property in your Collection Config or components.elements.SaveDraftButton in your Global Config:

Here's an example of a custom SaveDraftButton component:

The PublishButton property allows you to render a custom Publish Button in the Edit View.

To add a PublishButton component, use the components.edit.PublishButton property in your Collection Config or components.elements.PublishButton in your Global Config:

Here's an example of a custom PublishButton component:

The PreviewButton property allows you to render a custom Preview Button in the Edit View.

To add a PreviewButton component, use the components.edit.PreviewButton property in your Collection Config or components.elements.PreviewButton in your Global Config:

Here's an example of a custom PreviewButton component:

The Description property allows you to render a custom description of the Collection or Global in the Edit View.

To add a Description component, use the components.edit.Description property in your Collection Config or components.elements.Description in your Global Config:

Here's an example of a custom Description component:

The Upload property allows you to render a custom file upload component in the Edit View.

To add an Upload component, use the components.edit.Upload property in your Collection Config:

Here's an example of a custom Upload component: