Extend and Customize Adobe Experience Manager Component Action Toolbar | AEM Community Blog Seeding

Extend and Customize Adobe Experience Manager Component Action Toolbar by INITIALYZE

Abstract

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
Implement client library (javascript) to handle the click on the action
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

myaction.html


MyAction Header

This is a content.

Notice the above code snippet, we have defined the id for the custom Action item which will be used in the Javascript later to target.

Step 2 – Overlay the toolbar from WCM.
Use CRXDE to find the below node.

/libs/wcm/core/content/editor/jcr:content/content/items/content/content/items
Create an overlay using the Overlay Node option.

Path: /libs/wcm/core/content/editor/jcr:content/content/items/content/content/items
Overlay Location: /apps/
Match Node Types: active (select the checkbox)
1.00
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

Read Full Blog

Extend and Customize Adobe Experience Manager Component Action Toolbar

Q&A

Please use this thread to ask the related questions.