Thursday, 13 November 2014

Custom Action in Configuration Bar in AEM

In my last post, I explained, how to create configuration bar in CQ using cq:EditConfig node as well as using Ext - JS. When I was doing that R & D a question come in my mind that using cq:actions property of cq:EditConfig node, we are restricted to used only few operation i.e. EDIT, DELETE, COPYMOVE, INSERT & TEXT.

What if I want to create my own custom action? How will I achieve it?

So In this post, I will explain how to add custom action into configuration bar.

Agenda
1). Use of cq:actionConfigs node.
2). Custom Action creation.

For doing this I create a project structure as shown below - 

Here I create a simple component named as customActionForConfBar.

Create a cq:EditConfig node under your component.

Brief Introduction of cq:editConfig-
"Edit config node is used to change the behaviour of a component."

under cq:editConfig node create a node having primary type nt:unstructured, name it as cq:actionConfigs.

" cq:actionConfigs node is used to append new action to the actions specified in cq:actions  property of cq:editConfig node of your component."

Under cq:actionConfigs node create nodes of type nt:unstructured. If you want two action then add two node of any name.

In my case, I create two nodes seperator & customAction used for - 
seperator -  for adding a separation (|) between two actions. 
customAction - This node denote my custom action.

at cq:editConfig node add properties as displayed - 












at seperator node add properties as  - 






at customAction node add properties as -







This node is main for creating custom action. Here I add two properties 

text - This property is used to add the name to the configuration bar. i.e. At configuration bar you will see one more button named as "My Action".

handler - This property is used to define a action or function to be done when this "My Action" button has been clicked on web page. This handler defines a javascript function. So in my case I want to open a new dialog box of it's child component. My JS code is - 

function(){ 
var editRollOver = CQ.utils.WCM.getEditable(this.path+"/childcomponent" );
CQ.wcm.EditBase.showDialog(editRollOver, CQ.wcm.EditBase.EDIT);
}

This function is first getting a roll over configuration of my child component named as "childComponent" & then open it's dialog. 

As I have another component named as childComponent as displayed in my project structure. I will open childComponent dialog when I click on "My Action" button of configuration bar of customActionForConfBar component. for creating component within component refer my Component with in Component blog post.

Note : 
1). Do not create parsys node just use your component node directly & include your child component in customActionForConfBar.jsp file. so your jsp file code becomes  - 
<%@include file="/libs/foundation/global.jsp"%>
<b>Container Component with default component in parsys</b><br/><br/>
<cq:include path ="childcomponent" resourceType ="blog/components/content/childComponent" /> <br/><b>End of Container Component</b>

2). Change childComponent componentGroup property to .hidden as it's created only for custom action & also remove any code from it's jsp file.


Everything is done now. go to your web page and drop customActionForConfBar component. you will see a configuration bar with custom action & when you click on this button you will see a screen as 


github repository link

Happy Coding
Namah Shivay