Warning
You're browsing the documentation for an old version of Webiny. Consider upgrading your project to Webiny 5.39.x.
Can I Use This?

This feature is available since Webiny v5.37.0.

What you'll learn
  • how to add a custom action to the Entry Editor
  • how to discover existing action names
  • how to change the position of actions, remove, or replace an existing action

Overview
anchor

By default, Headless CMS offers built-in actions that handle entry saving, publishing and deletion. These are located at the top of the content entry form.

To customize actions, you need to use the ContentEntryEditorConfig component. For this article, we will use ButtonAction and MenuItemAction components in the Actions namespace.

As you can see, there are two types of actions:

  1. ButtonAction listed as a button;
  2. MenuItemAction listed in the top right corner menu.
Overview built-in actionsOverview built-in actions
(click to enlarge)

Button Actions
anchor

Add a Button
anchor

To add a new button, use the ContentEntryEditorConfig component and mount it within your Admin app. Your button is just a regular React element, so it can render anything you want.

To help developers keep the UI consistent, you’ll find a handy useButtons hook that exposes four button components:

  • ButtonDefault
  • ButtonPrimary
  • ButtonSecondary
  • IconButton

Use one of these components to render a button that inherits UI rules and guidelines from the Webiny core package.

apps/admin/src/App.tsx

By declaring the modelIds prop, you can define in which Content Model Entry Editor you want to show your custom button. If you exclude this prop, the button will be registered for all models in the system.

In the example above, you’ll see your new element the next time you open a car Content Model Entry Editor. This is the whole process of registering a new button element.

Custom Button in ActionCustom Button in Action
(click to enlarge)

Discovering Buttons
anchor

This section demonstrates how you can discover the names of existing buttons. This is important for further sections on positioning, removing, and replacing buttons.

The easiest way to discover existing buttons is to use your browser’s React Dev Tools plugins and look for the Buttons element. From there, you can either look for actions props or look at the child elements and their keys:

Discover Existing ButtonsDiscover Existing Buttons
(click to enlarge)

Positioning a Button
anchor

To position your custom button before or after an existing button, you can use the before and after props on the <ButtonAction> element:

Position Your Button Before Another ButtonPosition Your Button Before Another Button
(click to enlarge)

Removing a Button
anchor

You may want to remove an existing button. All you need to do is reference the button by name and pass a remove prop to the <ButtonAction> element:

Replacing a Button
anchor

To replace an existing button with a new button element, you need to reference the existing button by name and pass a new element via the element prop:

Menu Item Actions
anchor

Add a Menu Item
anchor

To add a new menu item, use the ContentEntryEditorConfig component and mount it within your Admin app. Your menu item is just a regular React element, so it can render anything you want.

To help developers keep the UI consistent, you’ll find a handy useOptionsMenuItem hook that exposes the OptionsMenuItem component, inheriting UI rules and guidelines from the Webiny core package.

apps/admin/src/App.tsx

By declaring the modelIds prop, you can define in which Content Model Entry Editor you want to show your custom menu item. If you exclude this prop, the menu item will be registered for all models in the system.

In the example above, you’ll see your new element the next time you open a car Content Model Entry Editor. This is the whole process of registering a new menu item element.

Custom Menu Item in ActionCustom Menu Item in Action
(click to enlarge)

Discovering MenuItems
anchor

This section demonstrates how you can discover the names of existing menu items. This is important for further sections on positioning, removing, and replacing menu items.

The easiest way to discover existing menu items is to use the React Dev Tools plugins for your browser, and look for the OptionsMenu element. From there, you can either look for actions props or look at the child elements and their keys:

Discover Existing Menu ItemsDiscover Existing Menu Items
(click to enlarge)

Positioning a MenuItem
anchor

To position your custom menu item before or after an existing menu item, you can use the before and after props on the <Action.MenuItemAction> element:

Position Your Menu Item Before Another Menu ItemPosition Your Menu Item Before Another Menu Item
(click to enlarge)

Removing a MenuItem
anchor

You may want to remove an existing menu item. All you need to do is reference the menu item by name and pass a remove prop to the <Action.MenuItemAction> element:

Replacing a MenuItem
anchor

To replace an existing menu item with a new menu item element, you need to reference the existing menu item by name and pass a new component via the element prop: