I am going to share my experience with different technologies. It helps me in expending my knowledge. I'll start from the basics & try to keep my posts easy to understand.Your comments/suggestions are welcome as they encourage me to search more on different topics.
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.
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".
var editRollOver = CQ.utils.WCM.getEditable(this.path+"/childcomponent" );
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.
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