Wednesday, 12 November 2014

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.

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 -  
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

Happy Coding 
Namah Shivay