AdminJS Documentation

When building custom property type components for the edit or filter views, you can use the onChange callback to update the record's state. The onChange function accepts two different signatures:

1. Single argument: Pass an entire RecordJSON object to replace the current record state.
2. Two arguments: Pass the property.path (string) as the first argument and the new value as the second argument.

This is useful for creating components that trigger changes to other properties on the same record (e.g., a button that updates a name field).

import React from 'react'
import { Button, Box } from '@adminjs/design-system'

const ValueTrigger = (props) => {
  const { onChange, record } = props

  const handleClick = (): void => {
    // Passing the entire updated record as a single argument
    onChange({
      ...record,
      params: {
        ...record.params,
        name: 'my new name',
      },
    })
  }

  return (
    <Box mb="xxl">
      <Button type="button" onClick={handleClick}>Set Name</Button>
    </Box>
  )
}

export default ValueTrigger

If you are not using a standard plugin like @adminjs/express, you can manually implement the AdminJS router in your own HTTP framework.

To do this, you must:

1. Iterate through Router.routes and map them to your framework's routing system. Note that you must convert AdminJS path parameters from {param} syntax to your framework's syntax (e.g., :param for Express).
2. Instantiate the route.Controller with the admin instance and the currentAdmin (the authenticated user).
3. Call the controller method corresponding to route.action, passing the request, params, query, and a payload containing fields and files.
4. Iterate through Router.assets to serve static files using the provided asset.src path.
5. Handle authentication by wrapping the route handlers with your own logic (e.g., checking a session).

const { Router } = require('adminjs')
const { routes, assets } = Router
const router = new express.Router()

// 1. Handle Routes
routes.forEach((route) => {
  // Convert {param} to :param for Express
  const expressPath = route.path.replace(/{/g, ':').replace(/}/g, '')
  
  const handler = async (req, res, next) => {
    try {
      // Implement authentication logic here
      const currentAdmin = null 

      const controller = new route.Controller({ admin }, currentAdmin)
      const { params, query } = req
      const method = req.method.toLowerCase()
      const payload = {
        ...(req.fields || {}),
        ...(req.files || {}),
      }
      
      const html = await controller[route.action]({
        ...req,
        params,
        query,
        payload,
        method,
      }, res)

      if (route.contentType) {
        res.set({ 'Content-Type': route.contentType })
      }
      if (html) {
        res.send(html)
      }
    } catch (e) {
      next(e)
    }
  }

  if (route.method === 'GET') router.get(expressPath, handler)
  if (route.method === 'POST') router.post(expressPath, handler)
})

// 2. Handle Assets
assets.forEach((asset) => {
  router.get(asset.path, async (req, res) => {
    res.sendFile(path.resolve(asset.src))
  })
})

The populator utility from adminjs is used to automatically populate all fields marked as 'reference' (via PropertyOptions#reference) within a set of records. This is particularly useful when creating custom action handlers where you need to retrieve data directly from the database and want the returned JSON to include the full objects for referenced entities instead of just their IDs.

const { populator } = require('adminjs')

// action handler for showing product with categories
const showProductsHandler = async (request, response, context) => {
  const { payload } = request
  const { _admin, currentAdmin } = context
  const ProductResource = _admin.findResource('Product')

  const product = await ProductResource.findOne()
  // product.populated is empty

  const [populatedProduct] = await populator([product])
  // populatedProduct.populated - has a categoryId filled with Category params

  return {
    record: record.toJSON(currentAdmin) // returns RecordJSON with populated field as well
  }
}

Actions in AdminJS can be applied to an entire resource, a specific record, or a set of selected records (bulk). You can create new actions or override existing built-in actions (like new, edit, show, delete, etc.) within the options.actions object of a resource configuration.

Action Types:

• resource: Performed for an entire resource (e.g., new, list, search).
• record: Invoked for a single record (e.g., edit, show, delete).
• bulk: Invoked for a set of records (e.g., bulkDelete).

Built-in Actions:

• show, edit, list, delete, bulkDelete, new, search.

const AdminJSOptions = {
  resources: [{
    resource: User,
    options: {
      actions: {
        // Overriding an existing action
        new: {
          icon: 'Add'
        },
        // Creating a new resource action
        myNewAction: {
          actionType: 'resource',
          handler: async (request, response, context) => {
            // implementation
          }
        }
      }
    }
  }]
}