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

Wednesday, 12 November 2014

Configuration Bar in AEM

During my project, I got a task in which I have to create a Configuration Edit bar in publish mode for setting some of the particular publish instance level properties. In this post I will explain the approach I used to complete this task.

Agenda 
1). How to create Configuration Edit bar using cq:EditConfig node?
2). How to create Configuration Edit bar using Ext-JS node?
3). Difference between cq:EditConfig vs Ext-JS configuration Edit bar?

Approach - I :  

I will show you how to create configuration tab using cq:EditConfig node. 

For doing first I create a project structure as shown in fig. - 
Then, I have created a component named as -
componentWithEditBar.

Then I create a node of primaryType cq:EditConfig with a name cq:editConfig under componentWithEditBar node as displayed in image.

Note : Name of this node must be cq:editConfig


Also add  properties on cq:editConfig node as shown in figure - 


Now when you drop this component on your web page you will see a configuration bar for this component in author mode. your screen will be look like this - 

















Approach - II :
How to create this configuration bar using Ext-Js code?
For doing this I have created a new component named as componentWithEditBarUsingExtJs.
in it's jsp file I add the given JS code - 

<%@include file="/libs/foundation/global.jsp"%>
<%@page session="false" %>
<%
    String path= resource.getPath();
    String resourceType= resource.getResourceType();
    String dialogPath = resource.getResourceResolver().getResource(resourceType).getPath() + "/dialog";
%>
<script type="text/javascript">
        CQ.WCM.edit({
            "path":"<%= path %>",
            "dialog":"<%= dialogPath %>",
            "type":"<%= resourceType %>",
            "editConfig":{
                "xtype":"editbar",
                "listeners":{
                    "afteredit":"REFRESH_PAGE"
                },
                "inlineEditing":CQ.wcm.EditBase.INLINE_MODE_NEVER,
                "disableTargeting": true,
                "actions":[
                    CQ.I18n.getMessage("Configuration Tab Using Ext-JS"),
                    {
                        "xtype": "tbseparator"
                    },
                    CQ.wcm.EditBase.EDIT,
                    {
                        "xtype": "tbseparator"
                    },
                    CQ.wcm.EditBase.DELETE

                ]

            }
        });
        </script> 
<br/>
<h3>Example for showing component with a configuration edit bar using Ext Js.</h3>
<br/><br/>


Now when you drop this component you will see a screen like this - 















Difference between these two approaches : 

When you want that your configuration bar is visible only in Author mode, use first approach.
Using first approach this configuration bar is visible in Author mode only and when you publish your code then it will be disappeared. Maximum time we have this type of requirement so generally we go with first approach.

But I got a task in which I am integrating AEM with Salesforce & we have to set some setting which are dependent on each publisher. This is a very specific requirement for achieving this when I go with approach one then my configuration bar has been disappeared then I start my R & D for achieving this goal & then I found this second approach using this approach I got the same functionality as I achieve using first approach.

The only difference is when I follow second approach my configuration bar is visible in author as well as in publish mode & works for me.

github repository link
https://github.com/vietankur009/blog.git

Happy Coding
Namah Shivay

Component with default Components in CQ5

During my project work I got a task in which I have to create a container component having a parsys & some default child component. In this post, I will discuss, how I achieve this functionality.

Agenda
1). How to create a container component having a parsys & some child component? i.e.

" Whenever I drop containerComponent on my webpage, I will get a childComponent & a parsys already present there so that I don't have to drop childComponent from sidekick. "

For achieving this functionality, I  create a project structure as shown below - 
Step : 1
Here I create two simple component one is childComponent & another is containerComponent.
Now drop these component on your webpage so that you are able to see component nodes with their names under 
/content/<your project>/jcr:content/par/<component name>. 
in my case it is -  
/content/blogSite/jcr:content/par
as shown below - 




Step 2: 
Go to your containerComponent in apps/blog/component/content folder.
Under containerComponent node create a nt:unstructured node with a name of cq:template.

Note :  name must be cq:template.

Step : 3
Copy par node from /content/blogSite/jcr:content node.
Paste this node under containerComponent/cq:template node in your project and rename it as parsys. In my case it is apps/blog/component/content/containerComponent/cq:template.
your structure looks like - 










Step : 4
Delete containercomponent node from cq:template node as we only want childcomponent under containerComponent. new structure looks like -

Step : 5
in containerComponent.jsp file just include this parsys node using cq:include.
my code for containerComponent.jsp is 














<%@include file="/libs/foundation/global.jsp"%>
<b>Container Component with default component in parsys</b><br/><br/>
<cq:include path ="parsys" resourceType ="foundation/components/parsys" /><br/><br/>
<b>End of Container Component</b>

Note : path property of cq:include tag must have the same value as that of the name or the parsys node under cq:template.

Note : If you don't want to see your childComponent in sidekick then just change it's componentGroup property with .hidden & it will disappear from sidekick.

now when you drop containerComponent  from your sidekick you will see a screen like this - 
github repository link
https://github.com/vietankur009/blog.git

Happy Coding 
Namah Shivay