Friday, 26 February 2016

Remove component wrapper divs in CQ/AEM

Remove component wrapper divs in CQ

Remove enclosing component divs in AEM/CQ.
When working on a project we sometimes face situations where our HTML,CSS and JS has already been developed and we need to integrate our AEM components into them.

Now, in AEM when we create a component then the rendered component has a parsys <div> tag enclosing the markup of our component. This might sometimes be problematic as it might break the styling of the component.

Say for example we want our component markup to look like this:


<ul>
 <li>Codermagnet</li>
 <li>Java</li>
 <li>AEM</li> 
</ul>

But the rendered markup ended up like this:

<ul>
 <div class="myComponent"><li>CoderMagnet</li></div>
 <div class="myComponent"><li>Java</li></div>
 <div class="myComponent"><li>AEM</li></div> 
</ul>


So we must remove the unnecessary tag or manipulate it.

For doing this we have the following options:
1. Using cq:noDecoration to remove extra AEM component divs.
2. Using the  IncludeOptions class to remove the AEM component divs.
3. Using the cq:htmlTag to manipulate component divs.


Using cq:noDecoration to remove component divs.

The cq:noDecoration property removes the enclosing component divs.

Remove component wrapper divs in CQ


The component above will not have the enclosing divs but the problem is that it will not be editable from the sidekick anymore.



Using the  IncludeOptions class to remove the AEM component divs.

cq:noDecoration makes the component uneditable. Neither the editconfig not the dialog is visible.
So the ideal apprach to do this is to use the IncludeOptions class.
For this we need to include the following snippet just before we cq:include our component.

 
<%
  IncludeOptions opts = IncludeOptions.getOptions(request, true);
  opts.setDecorationTagName("");
 %>
 

The full code snippet looks like this.

<%@ page import="com.day.cq.wcm.api.components.IncludeOptions" %>
 <%
   IncludeOptions opts = IncludeOptions.getOptions(request, true);
   opts.setDecorationTagName("");
 %>
 
<cq:include path="mycomp" resourceType="/apps/myproject/myComponent"/>
 



Using the cq:htmlTag to manipulate component divs

Out of the box AEM components creates a number of wrapper div in the generated HTML code which are used by the editing system and to identify various components in the DOM.

However sometimes this may cause unnecessary problems as the HTML structure becomes different from the one you started with.

We can use cq:htmlTag to manipulate the wrapper divs.
First we need to create a nt:unstructured node under our component.

Remove component wrapper divs in CQ

This node will contain the following:

1. class - The CSS class names that may be used for styling.
2. id - The id of the element in the rendered HTML.
3. cq:tagName - The tag that will be used to represent our component in the DOM (div, span, p, etc.)

Remove component wrapper divs in CQ


This will render the component enclosed in the below element.


<span id="mycomponent" class="modern-style">
…
</span>


No comments:

Post a Comment

Coder Magnet
CoderMagnet is full of resources from our daily development activities. It has solutions for common problematic scenarios in technologies like Java 8, AEM, JCR and also occasionally gives you tips on Blogger as well.