Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

kautuk_sahni
Community Manager
Community Manager

BlogImage.jpg

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.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

0 Replies