To extend or customize the component action toolbar, at a high level we need to do the following:
Create a component for the custom action
Overlay the toolbar from WCM
Add a custom action item node
Step 1 – Create a component for the custom action
First of all we need to create a component for the custom action item. This component will be shown or popup when you click on your custom action.
For example, let’s create a custom action component here: /apps//components/actions/myaction
This is a content.
Step 2 – Overlay the toolbar from WCM.
Use CRXDE to find the below node.
Create an overlay using the Overlay Node option.
Overlay Location: /apps/
Match Node Types: active (select the checkbox)
Step 3 – Add a custom action item node
For our example, we will create a custom toolbar button MyAction.
Create a new node under the overlaid node for example: /apps/wcm/core/content/editor/jcr:content/content/items/content/content/items/myaction and add the below mentioned properties.
sling:resourceType = "/apps//components/actions/myaction"
type = component
Custom Toolbar Action item on the Component toolbar
Step 4 – Implement clientlibrary for the custom action