72 lines
4.7 KiB
Plaintext
72 lines
4.7 KiB
Plaintext
---
|
|
title: The Admin Panel
|
|
label: Overview
|
|
order: 10
|
|
desc: Manage your data and customize the Admin Panel by swapping in your own React components. Create, modify or remove views, fields, styles and much more.
|
|
keywords: admin, components, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, express
|
|
---
|
|
|
|
Payload dynamically generates a beautiful, fully functional React admin panel to manage your data. It's extremely powerful and can be customized / extended upon easily by swapping in your own React components. You can add additional views, modify how built-in views look / work, swap out Payload branding for your client's, build your own field types and much more.
|
|
|
|
The Payload Admin panel is built with Webpack, code-split, highly performant (even with 100+ fields), and written fully in TypeScript.
|
|
|
|
<Banner type="success">
|
|
The Admin panel is meant to be simple enough to give you a starting point but not bring too much complexity, so that you can easily customize it to suit the needs of your application and your editors.
|
|
</Banner>
|
|
|
|
|
|
|
|
*Screenshot of the Admin panel while editing a document from an example `AllFields` collection*
|
|
|
|
## Admin Options
|
|
|
|
All options for the Admin panel are defined in your base Payload config file.
|
|
|
|
| Option | Description |
|
|
| -------------------- | -------------|
|
|
| `user` | The `slug` of a Collection that you want be used to log in to the Admin dashboard. [More](/docs/admin/overview#the-admin-user-collection) |
|
|
| `meta` | Base meta data to use for the Admin panel. Included properties are `titleSuffix`, `ogImage`, and `favicon`. |
|
|
| `disable` | If set to `true`, the entire Admin panel will be disabled. |
|
|
| `indexHTML` | Optionally replace the entirety of the `index.html` file used by the Admin panel. Reference the [base index.html file](https://github.com/payloadcms/payload/blob/master/src/admin/index.html) to ensure your replacement has the appropriate HTML elements. |
|
|
| `css` | Absolute path to a stylesheet that you can use to override / customize the Admin panel styling. [More](/docs/admin/customizing-css). |
|
|
| `scss` | Absolute path to a Sass variables / mixins stylesheet meant to override Payload styles to make for an easy re-skinning of the Admin panel. [More](/docs/admin/customizing-css#overriding-scss-variables). |
|
|
| `dateFormat` | Global date format that will be used for all dates in the Admin panel. Any valid [date-fns](https://date-fns.org/) format pattern can be used.
|
|
| `components` | Component overrides that affect the entirety of the Admin panel. [More](/docs/admin/components) |
|
|
| `webpack` | Customize the Webpack config that's used to generate the Admin panel. [More](/docs/admin/webpack) |
|
|
|
|
|
|
### The Admin User Collection
|
|
|
|
<Banner type="warning">
|
|
<strong>Important:</strong><br />
|
|
The Payload Admin panel can only be used by one Collection that supports <a href="/docs/authentication/overview">Authentication</a>.
|
|
</Banner>
|
|
|
|
To specify which Collection to use to log in to the Admin panel, pass the `admin` options a `user` key equal to the slug of the Collection that you'd like to use.
|
|
|
|
`payload.config.js`:
|
|
```js
|
|
import { buildConfig } from 'payload/config';
|
|
|
|
const config = buildConfig({
|
|
admin: {
|
|
user: 'admins', // highlight-line
|
|
},
|
|
})
|
|
```
|
|
|
|
By default, if you have not specified a Collection, Payload will automatically provide you with a `User` Collection which will be used to access the Admin panel. You can customize or override the fields and settings of the default `User` Collection by passing your own collection using `users` as its `slug` to Payload. When this is done, Payload will use your provided `User` Collection instead of its default version.
|
|
|
|
**Note: you can use whatever Collection you'd like to access the Admin panel as long as the Collection supports Authentication. It doesn't need to be called `users`!**
|
|
|
|
For example, you may wish to have two Collections that both support `Authentication`:
|
|
|
|
- `admins` - meant to have a higher level of permissions to manage your data and access the Admin panel
|
|
- `customers` - meant for end users of your app that should not be allowed to log into the Admin panel
|
|
|
|
This is totally possible. For the above scenario, by specifying `admin: { user: 'admins' }`, your Payload Admin panel will use `admins`. Any users logged in as `customers` will not be able to log in via the Admin panel.
|
|
|
|
### Restricting user access
|
|
|
|
If you would like to restrict which users from a single Collection can access the Admin panel, you can use the `admin` access control function. [Click here](/docs/access-control/overview#admin) to learn more.
|