AEM / CQ5 Tips : Avoiding AEM generated wrapper div around the components in preview and publish mode

To implement it, the following changes need to be done in the application.

1. Add the following scriptlet in project specific global.jsp

<%@page session="false" import="com.day.cq.wcm.api.components.IncludeOptions, com.day.cq.wcm.api.WCMMode" %>
<% if (WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) { IncludeOptions options = IncludeOptions.getOptions(request, true);
options.setDecorationTagName("");
} %>

2. Create a new parsys component for the project by extending /libs/foundation/components/parsys. Override parsys.jsp by copying content in parsys.jsp in /libs/foundation/components/parsys
and replacing <%@include file="/libs/foundation/global.jsp"%> with <%@include file="/apps/my_project/foundation/global.jsp"%>

3. Replace /libs/foundation/components/parsys with /apps/my_project/foundation/global.jsp in the entire application (in jsps, where parsys is included and
custom parsys components with property sling:resourceSuperType as foundation/components/parsys )

AEM:Solution to enable author edit option for components having cq:noDecoration=true

Put cq:noDecoration=true, for your components to avoid wrapper div. To enable editing in author mode, use the following scriptlet in the jsp of your component.

<% if (WCMMode.fromRequest(request) == WCMMode.EDIT || WCMMode.fromRequest(request) == WCMMode.DESIGN) {
 componentContext.setDecorate(true);
} %>

CQ5 - Component - A basic example on custom component creation

1. Create a component named “agent” under “apps/sfsc/components”
Set the following properties
label - agent
title (jcr:title) - Agent
super resource type (sling:resourceSuperType) - lib/foundation/components

2. On creating the agent component,  agent.jsp will be created inside the component. Include the following html scripts in it

 <div style="border:thin solid #000000;padding:10px">
  <p><h2><%=properties.get("agentName","Agent Name")%></h2></p>
  <p><%=properties.get("address1","Addres1")%></p>
  <p><%=properties.get("address2","Addres2")%></p>
  <p><%=properties.get("address3","Addres3")%></p>
  <p><%=properties.get("email","Email")%></p>
  <p><%=properties.get("phone","Phone Number")%></p>
  </div>

3.Create dialog (cq:Dialog) under agent component.
Properies:
jcr:primaryType:cq:Dialog
xtype:dialog
title:Dialog

4.Create a new node under “dialog” of type  “cq:WidgetCollection” with name as “items”

5.Create a new node under “items”, of type  “cq:Widget” with name as “basic” and “xtype” as “panel”

6.Create a new node under “basic”, of type  “cq:WidgetCollection” with name as “items”

7. Create following nodes under “items”, of type  “cq:Widget”

a.agentName
   name: ./agentName
   xtype: textfield
   fieldLabel:Agent Name


b.address1
   name: ./address1
   xtype: textfield
   fieldLabel:Address 1

c.address2
   name: ./address2
   xtype: textfield
   fieldLabel:Address 2



d.address3
   name: ./address3
   xtype: textfield
   fieldLabel:Address 3


e.email
    name: ./email
    xtype: textfield
   fieldLabel:Email


f.phone
   name: ./phone
   xtype: textfield
   fieldLabel:Phone