Tutorial

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

AdminBro has 7 major default actions defined for each resource:

Resource base actions:

they don't require recordId in params

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

Record base actions

they require recordId in params

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

Bulk actions

they require recordIds[] in params

  • 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 explaining which action type is where:

Modify default action per Resource

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

This is how modifying show action and creating a new myNewAction can look like:

const adminBroOptions = {
  resources: [
    { 
      resource: Article,
      options: {
        actions: {
          show: {
            // change the behavior of show action
          },
          myNewAction: {
            // create a totally new action
            actionType: 'record',
            handler: () => {},
          },
        },
      },
    },
  ],
}

Basic properties

Yes - you can modify things like: label, icon and visibility. The 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. There is also another method: Action#isAccessible which not only hides given action but also totally disables it.

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 have their handlers.

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

Nevertheless, Action#handler has to be specified for new actions (read the next section), or set to null

Modifying actions for all resources

Default actions templates 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
}

Create new, custom actions

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

Your action can be either resource, record or bulk type.

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

SoftwareBrothers

Proudly built and maintained by SoftwareBrothers

Software House with a passion for both JavaScript and TypeScript.

See what we do See what we believe in

Proudly built and maintained by

SoftwareBrothers