Tutorial

05. Customize actions

At some point you would probably like to customize default views or create custom actions. Actions are the way of doing that.

Default actions

Admin bro has 7 major default actions defined for each resource:

Resource base actions:

  • list - list all records
  • search - search record by query string
  • new [Add new] - creates new record

Record base actions:

  • show [info] - shows details of a given record
  • edit [edit] - updates given record
  • delete [remove] - removes given record

Bulk actions:

  • bulkDelete [remove] - removes all selected records from the database

Resource base actions can be accessed in the header of the list of all the resources (next to the filters button). Record actions are places on the list by the resource. Where Bulk actions appear right in the table header when you select at least one record.

Take a look at the following screenshot:

Default actions can be accessed right from the AdminBro class, by using ACTIONS object.


const AdminBro = require('admin-bro)
AdminBro.ACTIONS.show // => show action object

// so to modify the availability of action for all resources
AdminBro.ACTIONS.show.isAccessible = ({ currentAdmin, resource, record }) => {
  return currentAdmin.isManager
}

Modify default action per Resource

Each action has all the parameters defined by Action. They can be modified per resource along with other ResourceOptions

const adminBroOptions = {
  resources: [
    { resource: Article, options: { actions: {show: {}, edit: {}, ...} } },
  ],
}

Basic properties

Yes - you can modify things like: label, icon and visibility. List of all options can be found in Action

In the following example, we will change icon, and will show it only for records with an email.

const adminBroOptions = {
  resources: [
    { resource: Article,
      options: {
        actions: {
          show: {
            icon: 'View',
            isVisible: (context) => context.record.param('email') !== '',
          },
        },
      },
    },
  ],
}

Action#isVisible can be either a function returning a boolean value or a boolean value itself.

Action handler and action hooks

Each action has an Action#handler function. This function is executed every time the action is invoked and all of the default actions has their handlers.

You probably don't want to modify behavior of the handler for the default Edit action. But, if you really want to change this action, you can use Action#before and Action#after action hooks.

Action#handler has to be specified for new actions (read the next section).

Custom Actions

Also, you can define your own actions. Simply pass Action under a new key to ResourceOptions.

Your action can be either resource, record or bulk.

const adminBroOptions = {
  resources: [
    { resource: Article,
      options: {
        actions: {
          newAction: {
            actionType: 'record',
            icon: 'View',
            isVisible: true,
            handler: async () => {...},
            component: AdminBro.bundle('./your-action-component'),
          },
        },
      },
    },
  ],
}

Action components

When you define your own action you have to also create a React component responsible for rendering it. To see what options you have - go to the next tutorial:

And much much more...

Things I presented in this tutorial are just the tip of the iceberg. Make sure to check out all available options in Action interface.