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