Removing component's auto generated div in AEM

In this blog, I will explain how can we remove extra div those are generated automatically when we use either sling:include or cq:include in our jsp.

1. Now the question arises, can we get rid of these extra divs?
2. Will they be generated everytime?
3. If we can remove these extra divs, how can we do that?

In this post, I will explain all of these questions. Let's begin with the first question-

Yes, we can remove these extra divs and it totally depends on our coding practices. Most of the time developers don't care about these divs and write their code, but these extra divs makes our HTML bulky as the size of HTML increases, it increases network traffic and performance of our site decreases. Because of these divs most of the developers always faces CSS issues.

For removing these extra divs you have to include these lines of code in your component level. These lines are-

if(WCMMode.fromRequest(request) != WCMMode.EDIT){

        IncludeOptions.getOptions(request,true).setDecorationTagName("");

}

We have to import these two statement for WCMMode and includeOptions-

@page import="com.day.cq.wcm.api.WCMMode"
@page import="com.day.cq.wcm.api.components.IncludeOptions"

Q4). Now another question arises where to add these lines?

The best practice is that you must put these lines in your global.jsp. So that all of your project components have these lines of code available to them.

So that if you sling:include or cq:include any of these components then no extra div will be generated.

Be happy

Template visibility at every page

In this blog, I am going to share a very interesting point related to the allowedPaths property.
If you create your project and in this project you create a template and want to create a page using this template, your template will not visible in the siteadmin. But if you copy the same template and paste in the geomtrixx/templates then this template will show you under geometrixx page at siteadmin page creation dialog.

So, the question arises here that why this template visible in geometrixx and why not visible in our project?
The answer is that geometrixx top level page has a cq:allowedTemplates property as shown below-

 So because of this property all templates which are created in geomtrixx project will be visible but our template has no restrictive (allowedPaths, allowedTemplate etc.) property.

So for making visible this  template we have to add allowedPaths property. This is mandatory for the first or top level page creation. Now when we create any page under this page, all siblings templates of this template will be visible.
When we add this property, then this template will be visible as displayed below-

At the top level page we can add cq:allowedTemplates property so that we can see under this page only those templates which we defined in this property.

To show our template under /content directory or every page under /content directory, we have to add a property on our template named as allowedPaths = /content(/.*)?
In my case I created a template named as homePage with the property allowedPaths = /content(/.*)?

Now this template will show on every page under content directory except geometrixx page.



Be happy

Remove p tag from RTE in AEM

In this post, I will explain how to remove <p> tag from RTE (Rich text editor) in AEM.

For removing the <p> tag we have to create a node named as htmlRules having jcr:primary type nt:unstructured. This node will have to create under the widget node which xtype is richtext.

In my case, I have created a node named as "heading with property xtype = richext" and created a node named as htmlRules under this node.

Now you have to create a node named as blockHandling under the htmlRules node and add  properties as

 jcr:primaryType = "nt:unstructured" and 

removeSingleParagraphContainer = "{Boolean}true".

Now go back your content page and refresh it. Add a line in RTE and click on Ok.Now you find that <p> tag has been removed from the rich text.

Be Happy