Plugin SDK > Dropdown actions

Plugins can greatly improve DatoCMS's overall functionality by defining custom actions that will appear as dropdown menu items or context menus throughout the entire interface, enhancing a more personalized user experience.

Custom dropdown actions can be defined in various unique contexts:

Record-Editing actions

Actions of this specific type will be prominently displayed next to the title of the record, enabling users to quickly access tools custom to streamline their editing process:

The hooks required for their implementation are:

• Present the actions using itemFormDropdownActions()

• Execute the action with executeItemFormDropdownAction()

Field-Specific Record Actions

Actions will be conveniently placed in a dropdown next to the field label, allowing users to easily interact with the data contained in a specific field of a record:

The hooks required for their implementation are:

• Present the actions using fieldDropdownActions()

• Execute the action with executeFieldDropdownAction()

Global Record Actions

Actions of this type will be presented in two areas of the interface: firstly, in the batch actions available within the record collection view:

And secondly, in the detailed view of the record itself (together with any available Record-Editing actions), providing users with additional options for manipulation:

The hooks required for their implementation are:

• Present the actions using itemsDropdownActions()

• Execute the action with executeItemsDropdownAction()

Asset Management Actions

Actions of this type will be displayed in two sections of the interface: in batch actions within the Media Area:

and in the detailed view of the asset itself:

The hooks required for their implementation are:

• Present the actions using uploadsDropdownActions()

• Execute the action with executeUploadsDropdownAction()

How to implement a dropdown action

This is a brief example of how you can implement your actions:

import {
  connect,
  type FieldDropdownActionsCtx,
  type ExecuteFieldDropdownActionCtx,
} from "datocms-plugin-sdk";
import "datocms-react-ui/styles.css";
connect({
  fieldDropdownActions(field, ctx: FieldDropdownActionsCtx) {
    if (
      ctx.itemType.attributes.api_key !== "blog_post" ||
      field.attributes.api_key !== "title"
    ) {
      // Don't add any action!
      return [];
    }
    return [
      // A single action
      {
        id: "actionA",
        label: "Custom action A",
        icon: "music",
      },
      // A group of actions
      {
        label: "Group of custom actions",
        icon: "mug-hot",
        actions: [
          // These actions will be shown in a submenu
          {
            id: "actionB",
            label: "Custom action B",
            icon: "rocket-launch",
          },
          {
            id: "actionC",
            label: "Custom action C",
            icon: "sparkles",
          },
        ],
      },
    ];
  },
  async executeFieldDropdownAction(
    actionId: string,
    ctx: ExecuteFieldDropdownActionCtx,
  ) {
    if (actionId === "actionA") {
      // Do something using ctx
      ctx.notice('Selected action A');
    } else if (actionId === "actionB") {
      // Do something else
      ctx.notice('Selected action B');
    } else if (actionId === "actionC") {
      // Do something else
      ctx.notice('Selected action C');
    }
  },
});

The types of operations you can perform within your execute hooks are dependent on the methods available in the ctx argument, which in turn is influenced by the specific type of action. As an example, Record-Editing and Field-Specific Record actions offer methods in ctx to change the state of the record form, while other actions do not. Consult the specific documentation for each hook listed below to understand the available options.

Function Reference